Grid Ajax Binding - Additional data not working in cascading grid example

[Darren Mann]

Hi,

I've tried to implement the client side selection from the original MVC examples http://demos.telerik.com/aspnet-mvc/razor/grid/selectionclientside. I've done this by using the additional data mechanism and everything looks okay until the first refresh after selection. I've verified that the javascript function is called for additional data at the time of the refresh and that the parameter to be passed has the changed value but I'm getting a null in the controller.

I have two grids in my view

Parent

@(Html.Kendo().Grid<OemGridRow>(Model.Oems)

    .Name("OemGrid")

    .Columns(column =>

    {

        column.Bound(p => p.Title);

    })

    .DataSource(dataSource => dataSource

            .Ajax()

            .Events(events => events.Error("error_handler"))

            .Model(model => model.Id(p => p.Id))

            .Read(read => read.Action("GetOems", "Customer"))

    )

    .Pageable()

    .Sortable()

    .Scrollable()

    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

    .Events(events => events.Change("onOemChange"))

)

Child

@(Html.Kendo().Grid<CustomerGridRow>()

    .Name("CustomerGrid")

    .Columns(column =>

    {

        column.Bound(p => p.Title);

    })

    .Pageable()

    .Sortable()

    .Scrollable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .Events(events => events.Error("error_handler"))

        .Model(model => model.Id(p => p.Id))

        .Read(read => read.Action("GetCustomers", "Customer").Data("getOemId"))

    )

)

Javascript

var OemId;

 

function onOemChange(e) {

    // Get the grids

    var oemGrid = $('#OemGrid').data('kendoGrid');

    var customerGrid = $("#CustomerGrid").data("kendoGrid")

 

    // Set OemId to the selected id of the Oem

    OemId = $.map(this.select(), function (item) {

        var dataItem = oemGrid.dataItem(item);

        return dataItem.Id;

    });

 

    // Read the datasource again

    customerGrid.dataSource.read();

}

 

//

function getOemId() {

    // Return the updated OemId

    return {

        filterId: OemId

    };

}

Controller

public ActionResult GetCustomers([DataSourceRequest]DataSourceRequest request, string filterId)

{

    Guid oemId = filterId.ToGuid();

 

    // Omitted

 

    return Json(customers.ToDataSourceResult(request));

}

Can anybody point me in the direction of where I'm going wrong.

Thanks in advance
Darren

[Nikolay Rusev]

Hello Darren,

I suspect that the issue due to the fact that you are sending array of id's($.map does that) and the action method expects single string.

You can change the implementation as follow:

function onOemChange(e) {
 // Get the grids
 var oemGrid = this;
 var customerGrid = $("#CustomerGrid").data("kendoGrid")

 // Set OemId to the selected id of the Oem
 OemId = oemGrid.dataItem(oemGrid.select());

 // Read the datasource again
 customerGrid.dataSource.read();
}

Regards,
Nikolay Rusev
the Telerik team

[Darren Mann]

Minor change to get the Id from the dataitem and it worked, thanks very much for your help.

function onOemChange(e) {

    // Get the grids

    var oemGrid = this;

    var customerGrid = $("#CustomerGrid").data("kendoGrid")

 

    // Set OemId to the selected id of the Oem

    OemId = oemGrid.dataItem(oemGrid.select()).Id;

 

    // Read the datasource again

    customerGrid.dataSource.read();

}