Hi Yasir,

If you haven´t sen the documentation about the Grid in Umbraco 7.2 then try to see these links.

http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout

http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout-Best-Practices

And especially the section about grid editors http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout#GridEditors

Hope this helps,

/Dennis

Hi Dennis,

Thanks for sharing these links. I had already went through these links and i know that how to build custom control for grid.

but my concern/question is that is it possible to use already build data types in grid?

Explanation:

In Developer section i already have a datatype called Realted links and i want to use this one in grid.

As i have limited knowledge so i can see 2 ways right now

1. In grid.editors.config.js i add a new configuration for my control but in the view setting use umbraco property editor path e.g "view": "/umbraco/views/propertyeditors/realtedlinks/relatedlinks.html" Control is visible but not working as it should be. bang :)

2. I have to create my own custom related links control in app_plugins same as which is already exist in umbraco build in property control. which is like same code twice at two different places.

Hope you understand my problem.

Yasir

Hi Yasir

If the control is visible but not working as intended have you then tried having a look in the browsers console log to see if it gives you any errors?

/Jan

Hi Jan!

Sorry for late reply. I was on vocations and out of country.

My configuration for related links are

{ "name": "Related links", "alias": "relatedlinks", "view": "/umbraco/views/propertyeditors/relatedlinks/relatedlinks.html", "icon": "icon-coin", "render": "/Views/Partials/Grid/Editors/relatedlinks/render.cshtml" }

Below is the related links image how it is rendered.

Here is the console output on edit and add

TypeError: Cannot set property 'edit' of undefined at Object.$scope.edit (http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:1417:29) at http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:13:4671 at http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…pbnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:75:112 at Object.e.$eval (http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:14:7447) at Object.e.$apply (http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:14:7554) at HTMLButtonElement.

ON Add

TypeError: undefined is not a function at Object.$scope.add (http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…nMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:1417:503) at http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:13:4671 at http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…pbnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:75:112 at Object.e.$eval (http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:14:7447) at Object.e.$apply (http://dev.norgesinvestor.no/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdW…bnMvdTdkdGcvdTdkdGcuY29udHJvbGxlci5qczs&t=Javascript&cdv=477677181:14:7554) at HTMLButtonElement.

Hi Yasir

Sorry about the late reply, holiday and flu caught me.

I'm wondering if you have set debug to be "true" in the web.config? Just search for "debug" and change it to "true" if it's set to false.

This disables the backoffice cache, which can cause some errors since changes to your property editor is not being picked up etc.

Hope this helps.

/Jan

Hi,

Somehow i managed to make working related links as a custom grid control and its working as it should be.

Secret: I have copied related links code from umbraco to App_plugins directory and replace $scope.model to $scope.control. Its working perfect now.

Now i am experienced another error it is becuase of grid handle which has delete and sort icon. some reason it width is 150px and it come over related links control and i cant click on add/delete button.

See this image below. I dont know that it should call bug in grid or something else.

Css which is causing error

.usky-grid .cell-tools { position: absolute; top: 0; right: 0; bottom: 0; z-index: 50; width: 150px; /* opacity: .3; */ -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

Any one experience this kind of error?

Yasir

Hi Yasir, I'm trying to do exactly the same with the media picker (I need an editor for selecting multiple media items) can you elaborate on how you got the related link picker to work?

Thanks in advance

Dan

Hi Dan,

It is easy :)

Code related to javascript of all umbraco property editors are inside the umbraco.controller.js file. You have to copy only code related to mediapicker. its controller name is Umbraco.PropertyEditors.MediaPickerController.

Copy its js code and add it to your custom controller js file and change the name of the controller and replace the $scope.model with $scope.control at every place inside the controller

Next is html. Copy the html from mediapicker.html and add it to your custom control's html file. and change the ng-controller name with your new name.

Setup your package.manifest file like

{
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/Multimedia/multimedia.controller.js'
]}

Now you have to add configuration for your custom control in grid.editors.config.js. like

{
    "name": "Multimedia",
    "alias": "multimedia",
    "view": "/app_plugins/multimedia/editor.html",
    "icon": "icon-coin",
    "render": "/Views/Partials/Grid/Editors/Multimedia.cshtml"
}

you have to create your grid editor render file in your grid editor folder or according to your path.

Remove the cache and restart the app pool OR touch your web.config. so your are good to go. control should be visible and it should work as it supposed to be.

These are the same instructions you can use to create any kind of umbraco property editor to custom grid control. I think so :) if there are any error so you have to rectify.

any way i have created a multimedia picker for you. you can download it from here https://onedrive.live.com/redir?resid=150E960233041ECE!173&authkey=!AK5o5BvHLpZaT00&ithint=folder%2czip

I have commented some code in js file. you can see my comments with my name in js file.

Yasir

This multimedia is working for me see image below

Hi Yasir, thank you very much for your comprehensive responsive! I've got it working mostly but I'm experiencing two issues... 1. The new custom editor doesn't appear in the list of editors when I create a new datatype although it is there in my original custom data type as I got this partly working before? Are you aware of a caching issue, I've cleared the Clientdendency cache and incremented the clientdependancy.config, restarted app etc but its stil not being shown. 2. In my original adta type all appears to work except the sorting - changes to the order are not being saved...

Any thoughts?

Many thanks again for your help, 

Cheers,

Danny

Hi Danny!

1. If control does not appear in the list. I always remove the clientdepency folder from under App_Data/Temp folder. Refresh the browser and it should appear in the list. What do you mean by "it is there in my original custom data type"?

2. What is your origianl data type?

Jan said to me that "I'm wondering if you have set debug to be "true" in the web.config? Just search for "debug" and change it to "true" if it's set to false." Try this one as well

Yasir

Hi Yasir, I got this half working before I'd seen your post.... Its was chnging the scope from model to control that was the break through. The custom editor appeared in the list but it gave an error when I tried to use it.

Implement your solution everything apart from the sorting works but it no longer appears in the list of available editors when I create a new data type.

Does that make sense?

Cheers,

Danny

Hi,

Yes i checked it carefully and you are right, sorting is working but when we save then it get back to older postion.

Right now i have no idea. I will check it later and come back to you.

Yasir

Hi Yasir, it appearing again now... I think there must be some very heavy caching going on somewhere.... as even resetting Safari didn't fix it but its there now!! I notice this post talks about the same caching issue with no resolution.

http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/56496-Custom-editors-in-grid-(Umbraco-72)?p=1

Anyway... just the sorting to fix. If I discover anything I'll let you know but thank you soo much for your help so far!

Cheers,

Danny 

Hi Danny!

I looked the sorting problem and it looks like that it is bug in Multimedia picker.

I tried on another document type as normal data type. I added multiple images, sorted them and did save and publish then refresh the page then sort order got back to older order.

I debug it and There is function seupViewModel which is calling a function entityResource.getByIds(ids, "Media") which creates the problem and return the different order

You may check it!

Yasir

Hi Yasir,

Thanks again for your speady research! Looks like its a bug in the media picker. I've added a standard media picker to a doc type and enabled multi selections and it too is not saving the order after save and publish. I see you have raised this as a bug too! Thanks again

Danny

Hi

Just a follow up on this, I manged to get this working another way using LeBlender which can use any of the built in datatypes. The only issues was Related Links datatype didn't look great on the right hand side so I replaced it with Multi Url Picker as recommended on this post https://our.umbraco.org/projects/backoffice-extensions/leblender/bug-reports/64515-Related-links-Grid-editor

Just thought I'd post as it was a fairly quick alternative.

Hi all,

I am trying to create a grid editor which accept a collection of headlines and text corresponding to it ,can anyone please explain where to specify js file? and how to create renderer?

thanks

Yogesh

is working on a reply...