kendo multiple grid on same page data mismatch

Question

I have Two ASP MVC Kendo Grid on Single Page. When I am loading that page my data getting mismatch in between two grid. My Both Method Calling but when it displays my all data mashed up between two grids. How to Resolve it ?

can any one help me ?

//This is for Grid1
@(Html.Kendo().Grid<Alliant.Domain.Model1>()
        .Name("Model1Grid")
        .NoRecords("No record found.")
        .Columns(columns =>
        {
           columns.Bound(e => e.Name).Width("10%");
           columns.Bound(e => e.Description).Width("10%").Filterable(false);

        })
        .Pageable(p =>
            {
                p.PreviousNext(false);
                p.Numeric(false);
            })
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(Constant.KendoDefaultPageSize)
            .Read(read => read.Action("GetDataBySearch", "Model1", new { area = "" }))
            .ServerOperation(true)
            .Model(Model1 => Model1.Id(x => x.Model1ID))
        )
        .Resizable(resize => resize.Columns(true))

    )
//this is for secounf grid on same page
@(Html.Kendo().Grid<Alliant.Domain.Model2>()
        .Name("Model2Grid")
        .NoRecords("No record found.")
        .Columns(columns =>
        {
           columns.Bound(e => e.Name).Width("10%");
           columns.Bound(e => e.Description).Width("10%").Filterable(false);

        })
        .Pageable(p =>
            {
                p.PreviousNext(false);
                p.Numeric(false);
            })
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(Constant.KendoDefaultPageSize)
            .Read(read => read.Action("GetData2BySearch", "Model2", new { area = "" }))
            .ServerOperation(true)
            .Model(Model2 => Model2.Id(x => x.Model2ID))
        )
        .Resizable(resize => resize.Columns(true))

    )

Answer 1

Hi @Arpit I also faces the same issue,

Some time first request finishes first then the data map in another grid.

Please check the below solution

1. First you need to set AutoBind(false) in both grids. FYI - Click Me

add the below jquery code to your pages and check.

$(document).ready(function(){
   var Model1Grid= $("#Model1Grid").data("kendoGrid");
   var Model2Grid= $("#Model2Grid").data("kendoGrid");

   Model1Grid.dataSource.read().then(function(){
       Model2Grid.dataSource.read();
   });
});