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.
17 Answers, 1 is accepted
Hello york,
Please find attached a sample project that implements the desired scenario.
Regards,Boyan Dimitrov
Telerik
Rank 1
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.
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
Rank 1
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="data source=ZHANG-PC\SQLEXPRESS;initial catalog=OTPTEST;integrated security=True;multipleactiveresultsets=True;App=EntityFramework"" 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.
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
Rank 1
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
Rank 1
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
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
Rank 1
Hi Boyan,
\\\\ actually disable the ClientTemplate. It seems that in 3rd grid, the 3rd and following ClientTemplate is not working, why is that?
Rank 1
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.
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
Rank 1
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?
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
Rank 1
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.
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
Rank 1
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,
Rank 1
Hi Boyan,
Please ignore the previous question on where to add escape. I fix it due to other causes. Thanks.