CODEWITHSUNDEEP
c#kendo-gridkendo-asp.net-mvc
user11469175
user11469175

Reputation:

kendo multiple grid on same page data mismatch

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))

    )

Upvotes: 0

Views: 949

Answers (1)

jishan siddique
jishan siddique

Reputation: 1893

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();
   });
});

Upvotes: 0

Related Questions