CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
ataravati
ataravati

Reputation: 9155

CRUD operations in a grid inside a parent grid detail template

Here's a sample code from the Kendo Grid Detail Template demo on the Telerik website (I've simplified the detail template by removing the tab-strip):

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(120);
        columns.Bound(e => e.LastName).Width(120);
        columns.Bound(e => e.Country).Width(120);
        columns.Bound(e => e.City).Width(120);
        columns.Bound(e => e.Title);
    })
    .Sortable()
    .Pageable()
    .Scrollable()
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
    )
    .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Title("ID").Width(56);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress);
                columns.Bound(o => o.ShipName).Width(190);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
        )
</script>

I'd like to add a Create button to the child grid (Order grid) inside the template. The problem is that when a new Order is being added, I need to pass the EmployeeID to the controller, but the following does not work, even though it works for the Read action:

.Create(create => create.Action("AddOrder", "Grid", new { employeeID = "#=EmployeeID#" }))

How do I pass the EmployeeID to the controller when adding a new item to the grid in the detail template?

Upvotes: 1

Views: 1059

Answers (1)

Dion D.
Dion D.

Reputation: 2596

You should not set an EmployeeID value as a parameter in its create transport. Because you will do POST request here, the right way to do it is to pass the value as default value of EmployeeID of Grid model.

Your inner Grid should have configuration data source like this

.DataSource(ds=> ds.Ajax()
                   .PageSize(5)
                   .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#: EmployeeID #" }))
                   .Create(create => create.Action("AddOrder", "Grid"))
                   .Model(model => 
                          {
                              model.Id(f => f.OrderID)
                              model.Field(f => f.EmployeeID).DefaultValue("#: EmployeeID #")
                           })
            )

The moment you add new record to server its EmployeeID value has been set.

Note: EmployeeID will be assigned by string value because of this expression "#= #",you should have EmployeeID as string type. Or you will get razor error for incompatible type.

Upvotes: 1

Related Questions