How to read 2nd grid based on the 1st grid

[york]

Hi,

I have 2 Kendo Grids in which 2nd grid is read based on the selection of row of 1st grid. The code is:

1st grid

        <% Html.Kendo().Grid<EvaluationsQuestionsEvaluationVersionGridViewModel>(Model.VersionsGridModel)
            .Name("Versions")
           .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.EvaluationVersionId))
                    .ServerOperation(true)
                    .Create(create => create.Action("InsertEvaluationVersion", "Evaluations"))
                    .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationVersionGridAjax", "Evaluations"))
                    .Update(update => update.Action("UpdateEvaluationVersion", "Evaluations").Data("onUpdateEvaluationVersion"))
                )
            .Events(e => e.Change("onVersionGridRowSelect")
                          .Edit("onEditEvaluationsVersion")
                          .Save("onSaveEvaluationsVersion")
                    )​

.....

2nd grid

        <% Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarsGridViewModel>()
            .Name("Pillars")
            .DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(model => model.Id(a => a.EvaluationMasterPillarId))
                  .ServerOperation(true)
                  .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationPillarsGridAjax", "Evaluations")
                                    .Data("onLoadEvaluationsQuestionsEvaluationPillarsGridData"))
             )​

......

        function onVersionGridRowSelect(e) {
            var grid = $("#Versions").data("kendoGrid");
            var currentRow = grid.dataItem(grid.select());
            var evaluationVersionId = currentRow.EvaluationVersionId;

            $('#evaluationVersionId').val(evaluationVersionId);
            $("#Pillars").data("kendoDropDownList").dataSource.read();
        }

        function onLoadEvaluationsQuestionsEvaluationPillarsGridData(e) {
            var evaluationVersionId = $('#evaluationVersionId').val();  // "evaluationVersionId" is set beforehand
            var showDeletedCheckbox = $('#Checkbox1').val();

            return { evaluationVersionId: evaluationVersionId, showDeleted: showDeletedCheckbox }
        }

But 2nd grid can not be read because Data function "onLoadEvaluationsQuestionsEvaluationPillarsGridData" is not called. So what is the problem in code?​ Thanks.
​

[Dimiter Madjarov]

Hello york,

What exactly is the issue that you are experiencing with the function providing the additional read data? Please elaborate further.

Regards,
Dimiter Madjarov
Telerik

[york]

Hi Dimiter,

I attach a ​sample project ​named MVC_Controls_Kendo as well as MVC_Controls_Kendo Database to show you the problem. Because of the size limit, I remove the package in the
project. The package include, Kendo MVC (2015.1.429.440.Trial), MVC 4
and many others. The simplest way to recreate the solution is to create
new Telerik MVC project (name: MVC_Controls_Kendo) and select .Net 4 and
ASPX (not razor), and add the source files attached.

 Please add the OTPTEST.mdf in attached MVC_Controls_Kendo Database to the Data folder for SQL Server Express on the your pc and attach it in SQL management studio. Then modify the connection string in Webconfig in MVC_Controls_Kendo project and App.Config file in Data project. Currently it is:
    <add name="OTPTESTEntities" connectionString="metadata=res://*/Model3.csdl|res://*/Model3.ssdl|res://*/Model3.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=ZHANG-PC\SQLEXPRESS;initial catalog=OTPTEST;integrated security=True;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

Replace ZHANG-PC with your pc name. After launching the project, just click on "Evaluation Questions", which
will go to EvaluationQuestions.aspx.

After selecting a row in 1st grid (Name("Versions")), I want to pass EvaluationVersionId and value of a checkbox (name='showDeletedQuestions') to read function (LoadEvaluationsQuestionsEvaluationPillarsGridAjax) of 2nd grid (Name("Pillars")) and reload the "Pillars" again.  This is done in event onVersionGridRowSelect in "Versions". But after several tries, I failed to send above 2 parameters (the code is in  onVersionGridRowSelect). Please help me to find way to pass EvaluationVersionId and value of a checkbox to LoadEvaluationsQuestionsEvaluationPillarsGridAjax in onVersionGridRowSelect. Thanks. 

[york]

Oops, I forget to attach 2 files. Here they are.

[Dimiter Madjarov]

Hello york,

The read method of the dataSource accepts a data object that could be used to pass additional parameter to the read action. I assume that you could utilize it in the current case too.

Regards,
Dimiter Madjarov
Telerik

[york]

Hi Dimiter,

I use read Data method named "onLoadEvaluationsQuestionsEvaluationPillarsGridData". You can find it (comment out) in the project in grid "Pillars". The code is:

        function onLoadEvaluationsQuestionsEvaluationPillarsGridData(e) {
            var evaluationVersionId = $('#evaluationVersionId').val();
            var showDeletedCheckbox = $('#Checkbox1').val();

            return { evaluationVersionId: evaluationVersionId, showDeleted: showDeletedCheckbox }
        }

But the grid "Pillars" can not be read. Can you find out why? Thanks.

 

[Dimiter Madjarov]

Hello york,

This Data() method is not added in the Pillars Grid dataSource configuration options. You should include it if this is the way the additional data should be send.

Regards,
Dimiter Madjarov
Telerik

[york]

Hi Dimiter,

I commented it out because it was not working. You can uncomment it and run it. But the grid "Pillars" can not be read. Can you find out why? Thanks.

[york]

Hi Dimiter,

This is solved. The reason is not due to Data method in Read.Action, but "$('#Checkbox1').val()" is not correct.