Hey again Yogesh :) 

Ive done that, and got an example right here(this umbraco default):

The html looks like this :

<div ng-controller="Umbraco.PropertyEditors.Grid.MediaController">

    <div class="usky-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
        <i class="icon icon-picture"></i>
        <div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
    </div>

    <div ng-if="control.value">
        <img
            ng-if="url"
            ng-click="setImage()"
            ng-src="{{url}}"
            class="fullSizeImage" />
        <input type="text" class="caption" ng-model="control.value.caption" localize="placeholder" placeholder="@grid_placeholderImageCaption" />
    </div>
</div>

Controller looks something like this :

angular.module("umbraco")
    .controller("Umbraco.PropertyEditors.Grid.MediaController",
    function ($scope, $rootScope, $timeout, dialogService) {

        $scope.setImage = function(){

            dialogService.mediaPicker({
                startNodeId: $scope.control.editor.config && $scope.control.editor.config.startNodeId ? $scope.control.editor.config.startNodeId : undefined,
                multiPicker: false,
                cropSize:  $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined,
                showDetails: true,
                callback: function (data) {

                    $scope.control.value = {
                        focalPoint: data.focalPoint,
                        id: data.id,
                        image: data.image
                    };

                    $scope.setUrl();
                }
            });
        };

        $scope.setUrl = function(){

            if($scope.control.value.image){
                var url = $scope.control.value.image;

                if($scope.control.editor.config && $scope.control.editor.config.size){
                    url += "?width=" + $scope.control.editor.config.size.width;
                    url += "&height=" + $scope.control.editor.config.size.height;

                    if($scope.control.value.focalPoint){
                        url += "&center=" + $scope.control.value.focalPoint.top +"," + $scope.control.value.focalPoint.left;
                        url += "&mode=crop";
                    }
                }

                $scope.url = url;
            }
        };

        $timeout(function(){
            if($scope.control.$initializing){
                $scope.setImage();
            }else{
                $scope.setUrl();
            }
        }, 200);
});

working great !Thanks

let me implement my functionality with this :)

Thanks again

Yogesh

Awesome man :) 

Hi Rasmus,

Media picker pop up is being loaded at the page load how can stop this? , i want it open only when user will click on "click to insert image text"

Thanks

Yogesh

Arh yea that is true.

think if you look at the last lines with the $timeout func.

try removing :

$scope.setImage();

i am sorry fore that idiotic question :( , i just skipped that chuck of code :(

Fixed now

Thank

Yogesh

Hey Rasmus, I am having strange issue with grid editors - i have created a grid editor named TypeTester and for some reasons i need to remove it so for that i have removed its config from Grid.Editors.Config.js and removed its folder from App.Plugins folder, but i can see this grid editor is still being shown in the row configuration and working too. i don't know from where these values/ are coming can you help?

Thanks Yogesh Pathak

Ey yogesh

Hmm have you tried clearing your cache and restarting your solution? Sometimes those changes can be Hard to pull through

Hi Rasmus, Cleared cache , deleted browsing history, Restarted Solution,PC BUT No luck still the same, Its frustrating :( Regards Yogesh

Hmm sounds wierd.

What version are you on ? Could you upgrade your solution if its not 7.2.6 else im running out of ideas.

is working on a reply...