How to display multiple-tier grid in Kendo

18 posts, 4 answers
  1. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 18 Sep 2015 Link to this post

    Hi

    I want to display 3 level grid in Kendo, i.e. after clicking arrow on 1st grid row, it opens 2nd grid, and after clicking arrow on 2nd grid row, it opens 3rd grid. I use ClientDetailTemplateId to do it. Here is the code:

    1st Kendo Grid

            <% Html.Kendo().Grid<MaintenanceSportsGridSportViewModel>()
                .Name("Sports")
               .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(a => a.SportId))
                        .ServerOperation(true)
                        .Read(read => read.Action("MaintenanceSportsAjax", "Maintenance"))
                        .Update(update => update.Action("UpdateMaintenanceSports", "Maintenance").Data("onUpdateMaintenanceSports"))
                        .Events(a => a.RequestEnd("onMaintenanceSportsGridRequestEnd"))
                    )
    ...
                .ClientDetailTemplateId("DisciplinesTemplate")
                .Columns(columns =>
                {
                    columns.Bound(s => s.SportCode).Width(70);
    ...
                }).Render();
                
            %>

    2nd Grid

            <%: Html.Kendo().Grid<MaintenanceSportsGridDisciplineViewModel>()
                .Name("Disciplines_#=SportId#")
                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(a => a.DisciplineId))
                        .ServerOperation(false)
                        .Events(e => e.RequestEnd("onMaintenanceDisciplinesRequestEnd"))
                        .Create(create => create.Action("InsertMaintenanceDisciplines", "Maintenance", new { parentSportId = "#=SportId#" }))
                        .Read(read => read.Action("MaintenanceDisciplinesAjax", "Maintenance", new { sportId = "#=SportId#" }))
                        .Update(update => update.Action("UpdateMaintenanceDisciplines", "Maintenance").Data("onUpdateMaintenanceDisciplines"))
                        .Destroy(destroy => destroy.Action("DeleteMaintenanceDisciplines", "Maintenance").Data("onUpdateMaintenanceDisciplines"))
                    )
    ...
                .ClientDetailTemplateId("EventsTemplate")
                .Columns(columns =>
                {
                    columns.Bound(b => b.SportCode)
                        .Width(70);
    ...
                })

               .ToClientTemplate()         
          %>     
    3rd grid

            <%: Html.Kendo().Grid<MaintenanceSportsGridEventViewModel>()
                .Name("Events_#=DisciplineId#")
                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(a => a.EventId))
                        .ServerOperation(false)
                        .Events(e => e.RequestEnd("onMaintenanceEventsRequestEnd"))
                        .Create(create => create.Action("InsertMaintenanceEvents", "Maintenance", new { parentDisciplineId = "#=DisciplineId#" }))
                        .Read(read => read.Action("MaintenanceEventsAjax", "Maintenance", new { disciplineId = "#=DisciplineId#" }))
                        .Update(update => update.Action("UpdateMaintenanceEvents", "Maintenance").Data("onUpdateMaintenanceEvents"))
                        .Destroy(destroy => destroy.Action("DeleteMaintenanceEvents", "Maintenance").Data("onUpdateMaintenanceEvents"))
                    )
    ...
                .Columns(columns =>
                {
                    columns.Bound(b => b.SportCode)
                        .Width(60);
    ...
                })
                .ToClientTemplate()         
          %>     
    But the problem is that I can not open the 3rd grid. 2nd grid works fine. I need help on this.

    ​​

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Sep 2015 Link to this post

    Hello york,

    Please find attached a sample project that implements the desired scenario. 

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 28 Sep 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    After looking at your sample project "client-hierarchy-3-level.zip", I still have problem of opening the 3rd grid (2nd grid works fine). I attach a sample to show the problem. You can run it and find out where
    the problem is. Because 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.
    After launching the project, just click on "Display ​Benchmarks Info", which will go to ​Benchmarks.aspx.

    The project has everything it is needed. If you have any question, please let me know. Thanks.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 30 Sep 2015 Link to this post

    Hello york,

    I tried to run the provided example, but I am facing the following error: 

    Cannot open server 'pn20upwud6' requested by the login. Client with IP address '82.103.64.93' is not allowed to access the server.  To enable access, use the Windows Azure Management Portal or run sp_set_firewall_rule on the master database to create a firewall rule for this IP address or address range.  It may take up to five minutes for this change to take effect.
    Login failed for user 'OTPWebTest'.
    This session has been assigned a tracing ID of '3093bc5e-0edf-4e28-9994-d16cc777093c'.  Provide this tracing ID to customer support when you need assistance.

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 08 Oct 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    Sorry for the delay. I attach a modified version of MVC_Controls_Kendo. To reproduce it, follow instruction from previous post. 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. Then launch the project and click on "Display ​Sport page Info", which
    will go to SportPage.aspx. Current problem ​is that it can not open the 3rd grid (2nd grid works fine).

    The project has everything it is needed. If you have any question, please let me know. Thanks.

  7. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 12 Oct 2015 Link to this post

    Hello york,

     

    Please modify the following in your third level grid in order to work as expected: 

    columns.Bound(b => b.TeamSport)
                       .ClientTemplate("# if (data.TeamSport == true) { #" + "<div class='sprite sprite-tick'></div>" + "# } #")
                       .Width(60)
                       .HtmlAttributes(new { style = "text-align:center" });
                   columns.Bound(b => b.TeamSize)
                       .Width(70)
                       .HtmlAttributes(new { style = "text-align:center" });
                   columns.Bound(b => b.ResourceTracking)
                       .ClientTemplate("# if (data.ResourceTracking == true) { #" + "<div class='sprite sprite-tick'></div>" + "# } #")

     

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 12 Oct 2015 Link to this post

    Hi Boyan,

    After making the change, the 3rd grid can be displayed, but the problem is that the icon in TeamSport and ResourceTracking can not be displayed even if they are true. Another problem is that the Benchmark and MedalEvent columns in the 3rd grid always display icon even if they are unchecked after Edit. This also happens to the Benchmark column in the 2nd grid.

    Thanks

  9. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 12 Oct 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    After making the change, the 3rd grid can be displayed, but the problem is that the icon in TeamSport and ResourceTracking can not be displayed even if they are true. Another problem is that the Benchmark and MedalEvent columns in the 3rd grid always display icon even if they are unchecked after Edit. This also happens to the Benchmark column in the 2nd grid.

    Thanks

     

  10. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 14 Oct 2015 Link to this post

    Hello york,

     

    The problem is that the code is placed in the 3rd grid, so the code should be escaped in order to be executed against its model. Please modify the code for the ResourceTracking column as shown below:

     

    columns.Bound(b => b.ResourceTracking)
                        .ClientTemplate("\\\\# if (data.ResourceTracking == true) { \\\\#" + "<div class='sprite sprite-tick'></div>" + "\\\\# } \\\\#")
                        .Width(80)
                        .HtmlAttributes(new { style = "text-align:center" });

    Same logic should be applied for the other columns of the grid. 

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 14 Oct 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    \\\\ actually disable the ClientTemplate. It seems that in 3rd grid, the 3rd and following ClientTemplate is not working, why is that?

  12. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 15 Oct 2015 in reply to york Link to this post

    Hi Boyan,

    It looks like a bug because why from the 3rd ClientTemplate in 3rd grid, if (field == true) is not working. The 1st (if (Benchmark == true)) and 2nd (if (MedalEvent == true)) are working fine.

  13. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 16 Oct 2015 Link to this post

    Hello york,

     

    If your template includes a # character, which is part of a binding expression of a nested template, then this character must be escaped as well. In this way the character will be ignored by the outer template, but will be handled correctly by the inner template.

     

    In your case there are three nested templates, so the "\\\\" will escape the logic in the template. Eventually the logic in the template will be executed when the template of the 3rd grid is evaluated. Otherwise the data variable will contain model object for the second or first level grid. 

     

    Please check our Kendo UI Templates Overview article for more information and some samples. 

     

    Please refer to the modified version of your project. When the "COM" item is expanded it is shown only one record for the 3rd level grid. Benchmark, MedalEvent and ResourceTracking field values are true and the div element is rendered in the cell. The TeamSport is false and there is no div element in the cell. 

     

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 16 Oct 2015 Link to this post

    Hi Boyan,

    It's working fine. Thanks a lot. It seems that "data" in data.ResourceTracking is not used. What is the use of data?

  15. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 19 Oct 2015 Link to this post

    Hello york,

     

    The "data" variable is actually the current model object. When the template for the 3rd grid is evaluated the "data" is the model object for the current row. Please note that this happens if the template expression is properly escaped. Otherwise the "data" variable will be the model for the 1st or 2nd level grid model object. 

     

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  16. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 30 Oct 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    I have one more question ​on 2 tier grids. If ​we need to pass 2 parameters from 1st grid to 2nd grid, what should do? For example, 2nd grid is like:

            <%: Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarQuestionsGridViewModel>()
                .Name("Pillars_#=EvaluationMasterPillarId#")
                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(a => a.EvaluationVersionQuestionId))
                        .ServerOperation(false)
                        .Create(create => create.Action("InsertEvaluationVersionQuestion", "Evaluations", new { prevEvaluationVersionId = "#=EvaluationVersionId#", prevEvaluationMasterPillarId = "#=EvaluationMasterPillarId#" }))
                        .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationPillarQuestionsGridAjax", "Evaluations", new { evaluationVersionId = "#=EvaluationVersionId#", evaluationMasterPillarId = "#=EvaluationMasterPillarId#", showDeleted = false }))
    ...

    This is not working for only EvaluationMasterPillarId is passed. So I think we need to pass EvaluationVersionId too. How to do it?

    Thanks.

  17. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 02 Nov 2015 Link to this post

    Hello york,

     

    As far as I understand you want to use a value from the parent grid and a value from the child grid. I would suggest to review the Escaping Hash Literals article that shows how to escape property the expressions inside the template. 

     

    If your template includes a # character, which is part of a binding expression of a nested template, then this character must be escaped as well. In this way the character will be ignored by the outer template, but will be handled correctly by the inner template. If you want a binding expression to be handled by the outer template it should not be escaped. 

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 02 Nov 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    After reading the "Escaping Hash Literals", I still don't quite understand where to add escape in <%: Html.Kendo().Grid%>. There is no need to add escape in .Name("Pillars_#=EvaluationMasterPillarId#"), right? Then where to add escape in

    .Create(create =>
    create.Action("InsertEvaluationVersionQuestion", "Evaluations", new {
    prevEvaluationVersionId = "#=EvaluationVersionId#",
    prevEvaluationMasterPillarId = "#=EvaluationMasterPillarId#" }))
    .Read(read =>
    read.Action("LoadEvaluationsQuestionsEvaluationPillarQuestionsGridAjax",
    "Evaluations", new { evaluationVersionId = "#=EvaluationVersionId#",
    evaluationMasterPillarId = "#=EvaluationMasterPillarId#", showDeleted =
    false }))

    Thanks,

     

  19. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 03 Nov 2015 in reply to york Link to this post

    Hi Boyan,

     Please ignore the previous question on where to add escape. I fix it due to other causes. Thanks.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready