How to bind a Kendo UI Grid to a collection of my model in an editor template using MVC Razor

Question

I Have a Grid that is based on a Model Similar to

public class UserModel
{
  ...
  public IList<UserOrgModel> UserOrg {get; set;}
  ...
}

This Grid is set to .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("...") and open this editorTemplate to edit the row I selected (by pressing Action Button).

This Editor Template contain also a Grid that would be bind to my collection.

I defined my grid this way

@(Html.Kendo().Grid(Model.UserOrg)
  .Name("blabla")
  .Columns(col => 
  {
    col.Bound(c => c.Id);
  })
)

When I do this my grid based on my collection is always empty. Any Idea how I can use Kendo UI and its grid to do what I want. I don't know how to bind my grid with the "collection" of my model.

Solution 1

I found my Answer here: Grid Popup Editing Navigation Property Collection with nested Grid

I Downloaded the demo and All I wanted was there. This is exactly what I was looking for!

Solution 2

Honestly, I didn't fully understand your question. But if you are trying to bind the grid to a collection in your model. Here you go:

In the Kendo UI online demos, this example may help you. Scroll to the bottom portion of the page, click on "ASP.NET MVC" then click the "local_data.cshtml". Here is the code example edited to be more like your example:

@model UserModel

@(Html.Kendo().Grid(Model.UserOrg)
    .Name("Grid")
    .Columns(columns =>
    {
        //set up your columns here
        columns.Bound(u => u.Name).Title("Name");
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430)) 
    .Filterable()    
    .DataSource(dataSource => dataSource        
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)        
     )
)

Update

I found another SO article that may help you: Kendoui MVC EditorTemplateName do not work in PopUp edit mode

I think what you want is to create an editor template in the ~\View\Shared\EditorTemplates folder that you reference using the column.EditorTemplateName("..").

Comments

[JudgeProphet]

I edited my question... maybe you'll understand better