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.

Are you trying to use a grid within a grid? And you want the "inside" grid to be bound to a collection? — jwatts1980, Apr 08 '14 at 15:12
With Kendo you can Update a Row with a property set to .Mode(GridEditMode.Popup)... This Popup Open up a defined EditorTemplate. In this Template a want another Grid. — JudgeProphet, Apr 08 '14 at 15:15

score 5 · Accepted Answer · answered Apr 08 '14 at 17:41

5

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!

answered Apr 08 '14 at 17:41

JudgeProphet

1,687
3
26
44

score 1 · Answer 2 · edited May 23 '17 at 12:01

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("..").

I edited my question... maybe you'll understand better – JudgeProphet Apr 08 '14 at 15:03 — JudgeProphet, Apr 08 '14 at 15:03

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

2 Answers2