Kendo Grid Databind on popup template

[Richard]

Hello,
I'm trying to bind a grid to the Model's property in the Popup Edit template. I need to attach some events to the grid, but it requires an object to do so. I can't find a way to bind an observable to the grid definition from the Model.

Here's the class Definition:
public class PopupBind
        {
            public PopupBind()
            {
                this.PopupBind1= new List<PopupBind1>();
            }

            public int primaryKey{ get; set; }
            public string bindData{ get; set; }
            public virtual IEnumerable<PopupBind1> PopupBind1{ get; set; }
        }

public class PopupBind1
        {
            public int primaryKey{ get; set; }
            public string Name{ get; set; }
            public string Value{ get; set; }
        }

Grid Defintion
@(Html.Kendo().Grid<PopupBind>()
      .Name("bound")
      .Columns(columns =>
      {
          columns.Bound(ad => ad.bindData).Title("Name");
          columns.Bound(ad => ad.PopupBind1).ClientTemplate("# if( typeof PopupBind1!= 'undefined' ) { #" +
                                                                   "# PopupBind1.forEach(function(element, index, array){ #" +
                                                                   "<div>"+
                                                                   "#= element.Name# (#=element.Value# %)" +
                                                                   "</div>" +
                                                                   "# }) } #").Title("Bind1");
        
          columns.Command(command =>
          {
              command.Edit();
          });
      })
      .Editable(editable =>
      {
          editable.Mode(GridEditMode.PopUp).TemplateName("EditPopupBind");
          editable.Window(window => window.Width(600));
      })
      .ToolBar(toolbar => toolbar.Create())
      .DataSource(dataSource => dataSource.Ajax()
          .Batch(true)
          .Model(model =>
          {
              model.Id(ad => ad.primaryKey);
              model.Field(ad => ad.PopupBind1).Editable(false).DefaultValue(new Collection<PopupBind1>());
          })
          .Read("GetPopupBind", "popup")
          .Update("UpdatePopupBind", "popup")
          .Create("CreatePopupBind", "popup")
      ))


EditPopupBind.cshtml
@model PopupBind

<fieldset>
        <legend>PopupBind</legend>

         <div id = "PopupBind1Details" data-role="grid" 
         data-editable='[
         {
            "confirmDelete":
                "Delete",
            "cancelDelete": "Cancel",
            "mode": "incell",
            "template": null,
            "create": true,
            "update": true,
            "destroy":true
        }]'
         data-bind = "source: PopupBind1" 
         data-columns='[
        { field : "Name", title: "Name" },
        { field : "Value", width: 120, title : "Value" },
        { "command":[{
                "name": "destroy",
                "buttonType": "ImageAndText",
                "text":"Delete"
            }]
            }]'/>
</fieldset>

Description for PopupBind1Details
What I need to do is
1. Make Name field non-editable.
2. Attach Destoy, Edit and Add handlers, and if possible pass the updates done to the Value field to UpdatePopupBind. 

Is this achievable?

[Richard]

Anybody on this?

[Petur Subev]

Hello Richard,

Editing a nested collection property is not supported by the Grid, in order to edit such we suggest creating hierarchy of Grids.

http://www.telerik.com/support/code-library/grid-ajax-hierarchy-editing

However you can use a work-around similar to your case which is covered in the following code library:

http://www.telerik.com/support/code-library/grid-popup-editing-navigation-property-collection-with-nested-grid

Kind Regards,
Petur Subev
Telerik