Two Grid in one page, Please help.

[Vincent]

I have Two Grid in one razor page.

<kendo-grid name="DgMaster"  selectable="true">
        <datasource type="DataSourceTagHelperType.WebApi">
            <transport>
                <read url="@Url.Content("~/api/Master")"/>
            </transport>
        </datasource>
    </kendo-grid>

<kendo-grid name="DgDetail">
        <datasource type="DataSourceTagHelperType.WebApi">
            <transport>
                <read url="@Url.Content("~/api/Detail/001")"/>
            </transport>
        </datasource>
    </kendo-grid>

 

I want when Master grid Row select changed, the detail grid datasource change.  <read url="@Url.Content("~/api/Detail/001")"/>  replace "001" to mater grid row data id.

I can get mater grid selected row data in javascript, the code as follow:

function DgMasterChange(e) {
        var grid= $("#DgCategory").data("kendoGrid");
        var row = grid.select();
        var category = grid.dataItem(row);

}

 

I am trying to setDatasource in javascript. but setDatasource method doesn't work.

Please Help.

 

[Stefan]

Hello, Vincent,

Thank you for the details.

Indeed, the recommended approach is to change the second Grid dataSource on the master Grid change event.

I noticed that the on the change event the "DgCategory" Grid is accessed, but based on the code it could be the "DgMaster" Grid.

function DgMasterChange(e) {
        var grid= $("#DgMaster").data("kendoGrid");
        var detailGrid = $("#DgDetail").data("kendoGrid");
        var row = grid.select();
        var category = grid.dataItem(row);
        // Create the dataSource with the read value based on the data item.
        detailGrid.setDataSource(theNewDataSource)
}

If this causing any issues, please advise the exact error, or send us a runnable example and I will gladly provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik