Grid Server Binding with Detail Template

[Steven]

I have a MVC page with a kendo grid.  The data is already available so I am using server binding.  What I am trying to accomplish is in presenting all of the data needed in the DetailTemplate option.  I am trying with no success to display multiple layers of grids in the DetailTemplate.

I first have a grid on the page showing the data for a ServiceLine.  This grid has a DetailTemplate with a tabstrip.  The first tab strip shows service line data and the second tab strip shows data for other insurance (which is a grid).  This displays correctly for the user when selecting the detail icon.  Both the service line data and the other insurance grid is displayed.

The grid showing other insurance also has a Detail Template showing a grid of adjustments.  This is where the problems resides.  The other insurance grid does show the icon for the detail but the third grid for adjustments does not show when the user clicks on the detail icon.  I am not sure what is incorrect in defining the DetailTemplate for the adjustments grid. 

If you have any ideas or samples of server binding grid details for multiple layers deep would be helpful.  If not I will have to look at other methods (ClientTemplates?) to solve this issue.

Here is the MVC cshtml page:

@inherits BaseRazorView<List<DentalServiceLineModel>>
    @{ Html.Kendo().Grid(Model)
        .Name("DentalServiceLinesGrid")
        .HtmlAttributes(new { @class = "editor-grid" })
        .Columns(columns =>
        {
            columns.Bound(e => e.LineNumber).Title("#").Width("8%");
            columns.Bound(e => e.FromDate).Title("From Date").Width("8%");
            columns.Bound(e => e.ProcedureCode.FormattedText).Title("Procedure Code");
            columns.Bound(e => e.ToothNumber.FormattedText).Title("Tooth Number");
            columns.Bound(e => e.Units).Title("Units").Width("10%");
            columns.Bound(e => e.ChargeAmount).Title("ChargeAmount").Width("15%");
        })
        .Scrollable()
        .DetailTemplate(e =>
        {
            Html.Kendo().TabStrip()
                .Name("slTabStrip_" + e.LineNumber)
                .SelectedIndex(0)
                .Items(items =>
                {
                    items.Add().Text("Service Line Details").Content(@<text>
                        @RenderServiceLineInformation(e)
                    </text>);
                    items.Add().Text("Other Insurance").Content(@<text>
                        @RenderServiceLineOtherInsurances(e.LineNumber, e.OtherInsurances)
                    </text>);
                })
            .Render();
        })
        .DataSource(dataSource => dataSource.Server())
        .NoRecords("No Data")
        .Render();
    }

@helper RenderServiceLineInformation(DentalServiceLineModel dentalServiceLine)
{
<div id="[e-mail]">
    <div class="row">
        <div class="col-md-5 editor-col">
            <div class="editor-label">Procedure Code</div>
            <div class='editor-field font-weight-bold editor-clear'>@dentalServiceLine.ProcedureCode.FormattedText</div>
        </div>
        <div class="col-md-5 editor-col">
            <div class="editor-label">Additional Procedure Code Description</div>
            <div class='editor-field font-weight-bold editor-clear'>@dentalServiceLine.ProcedureCodeAdditionalInfo</div>
        </div>
    </div>
</div>
}

@helper RenderServiceLineOtherInsurances(int serviceLineNumber, List<OtherInsuranceServiceModel> serviceLineOtherInsurances)
{
    @(Html.Kendo().Grid(serviceLineOtherInsurances)
        .Name("DentalServiceLinesGrid_OtherInsurances_" + serviceLineNumber)
        .Columns(columns =>
        {
            columns.Bound(o => o.LineNumber).Title("#").Width("3%");
            columns.Bound(e => e.Carrier.Name).Title("Other Carrier");
            columns.Bound(e => e.PaidAmount).Title("Paid Amount").Width("15%");
            columns.Bound(e => e.PaidDate).Title("Paid Date").Width("10%");
            columns.Bound(e => e.Units).Title("Units").Width("10%");
            columns.Bound(e => e.PatientLiabilityAmount).Title("Patient Liability").Width("20%");
        })
        .Scrollable()
        .DetailTemplate(soi =>
        {
            Html.Kendo().Grid(soi.Adjustments)
                .Name("DentalServiceLinesGrid_OtherInsurances_Adjustments_" + soi.Adjustments)
                .Columns(columns =>
                {
                    columns.Bound(c => c.LineNumber).Title("#").Width("3%");
                    columns.Bound(c => c.GroupCode.Name).Title("Group Code");
                    columns.Bound(c => c.ReasonCode.Name).Title("ReasonCode");
                    columns.Bound(c => c.Amount).Title("Amount").Width("14%");
                    columns.Bound(c => c.Units).Title("Units").Width("14%");
                })
                .Scrollable()
                .NoRecords("No Data");
        })
        .Scrollable()
        .NoRecords("No Data")
    )
}

 

[Viktor Tachev]

Hello Steven,

 

I examined the code and noticed that the innermost Grid is using the Adjustments property in its Name. And that appears to be a collection. Would you modify the code so an unique primitive value is used in the name of the Grid? For example LineNumber if applicable:

 .Name("DentalServiceLinesGrid_OtherInsurances_Adjustments_" + soi.LineNumber)

 

Give the modification a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Steven]

Thanks for the reply.  You are correct that the adjustments is a list.  I missed that.  I changed it to the following: .Name("dentalServiceLinesGrid_OtherInsurances_Adjustments_" + soi.LineNumber)

This still did not work.  The adjustments grid will not display when i click on the detail expand icon on the Other Insurance grid row.  I have attached a screen shot.  The yellow arrow should be where the adjustment grid should appear for the Other Insurance row.

[Viktor Tachev]

Hi Steven,

 

Would you check the browser console and see if there are any errors listed there? In case there are that can point us in the right direction.

That said, can you send us a runnable sample where the behavior is replicated? This will enable us to examine it locally and look for its cause.

 

Regards,
Viktor Tachev
Progress Telerik

[Steven]

I checked the browser console using IE and using Chrome and found no errors.  I will look at creating a sample.

But if i could suggest, I have been using the grid demo (https://demos.telerik.com/aspnet-mvc/grid/serverdetails) as my guide in implementing the Server Detail Template.  Can you show how to display an additional server detail template for the Orders grid by adding a server detail template to the Order's grid.  It could show the items on the order?  That would give the user capability to drill down to three levels of grids using the server detail template.  That is basically what i am trying to accomplish.

I appreciate any help understanding how to accomplish this feature.

[Viktor Tachev]

Hi Steven,

 

In order to show a third level grid it is recommended to use a helper. Check out the thread below that describes the approach:

https://www.telerik.com/forums/three-four-or-more-level-of-hierarchy-on-a-grid#KmiOBdURDk6I5Wq06k6wKg

 

Regards,
Viktor Tachev
Progress Telerik