Kendo Grid MVC - Refreshing child / detail grid

Question

I'm using Kendo Grid with a master details setup. The details grid is named DetailsGrid_#=Id# so that it can access the id of the parent record - this part works fine.

I have setup the details grid to update some part of the backing data and need to be able to refresh the details grid on the Success of a $ajax call. I try to select the details grid using :

var childGrid = $('#DetailsGrid_#=Id#').data("kendoGrid");
childGrid.refresh();

But when I run this code I get a Jquery error saying "Uncaught Error: Syntax error, unrecognized expression: DetailsGrid_#=Id#"

Can anyone suggest the correct way of selecting the details grid, or another way of calling the refresh?

Update: Having done some further research on query selectors I see that I need to escape the = & # characters. I've now modified the code as follows which gets past the "unrecognized expression" error, but I now get the error "Cannot call method 'refresh' of undefined " so the grid isn't being recognised

var param = "DetailsGrid_#=Id#";
                var escapedParam = param.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@@])/g, '\\$1');
                //function escape(param) {
                //    return param.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@@])/g, '\\\\$1');
                //}
                var childGrid = $('#' + escapedParam ).data("kendoGrid");
                childGrid.refresh();

I would just call a refresh on the parent Grid, if the sub grid is open once the parent grid gets refreshed the sub grid will close. I've wondered how to do this as well but haven't been successful — CSharper

Vivek Parekh Vivek Parekh · Accepted Answer · 2014-02-24T13:52:16

As, I don't know how do you specify the Id of grid.

Get the Id of the Grid you want to refresh. Store it in a variable.

var newId = Id;// Id is Grid Id

var childGrid = $('#DetailsGrid_' + newId).data("kendoGrid");
childGrid.refresh();

Kendo Grid MVC - Refreshing child / detail grid

2 Answers