Good day,

maybe who faced and will prompt.

There are two telerik grids on the page; when you click on the line of the first grid, you need to update the second with the data from the query in the database. Accordingly, I managed to catch the event of pressing the desired string, take its id and send it to controll to form a query in the database to display the necessary information in the second grid.

But then I don’t understand how to assign the received json result to my controll as a new data source for the second grid and update it.

Tell me who faced, thank you!

<!-- language: lang-js --> <script type="text/javascript"> function onButtonClick(e) { e.preventDefault(); var grid = $("#grid1").data("kendoGrid"); var selectedItem = grid.dataItem(grid.select()); $.ajax({ url: "/myControll/ReadDataMethod", type: "GET", data: { id: selectedItem.Id} }).done(function(returnData) { $("#grid2").data("kendoGrid").dataSource.data(returnData); $("#grid2").data("kendoGrid").dataSource.read(); }); } </script>

    1 answer 1

    The solution is the following!

    On the event of a click on the first grid line, fill in the hidden fields with our variable values ​​that will be passed to the control and call the Read method of the second grid.

     <input type="hidden" id="HiInIncId" value=""/> <input type="hidden" id="HiInIncNum" value="" /> <script type="text/javascript"> function onChange(e) { var grid = $("#grid").data("kendoGrid"); var selectedItem = grid.dataItem(grid.select()); $('input[id=HiInIncId]').val(selectedItem.Id); $('input[id=HiInIncNum]').val(selectedItem.IncidentID); $("#gridInc").data("kendoGrid").dataSource.read(); } </script>

    In the second grid, we specify Data ("extraDataInc") to invoke the script to transfer our variables to the control.

     Read(action => action.Action("ReadIncident", "DetailInc").Data("extraDataInc")). <script type="text/javascript"> function extraDataInc(e) { return { someDate: $('#someDate').val(), incid: $('input[id=HiInIncId]').val(), incnum: $('input[id=HiInIncNum]').val() } } </script>