This is a migrated thread and some comments may be shown as answers.

Grid Server Binding with Detail Template

5 Answers 65 Views
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 23 Mar 2020, 05:41 PM

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="serviceLine_@dentalServiceLine.LineNumber">
    <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")
    )
}

 

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 25 Mar 2020, 02:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Steven
Top achievements
Rank 1
answered on 30 Mar 2020, 07:06 PM

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.

0
Viktor Tachev
Telerik team
answered on 01 Apr 2020, 11:55 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Steven
Top achievements
Rank 1
answered on 03 Apr 2020, 03:00 PM

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.

0
Viktor Tachev
Telerik team
answered on 07 Apr 2020, 11:59 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Steven
Top achievements
Rank 1
Share this question
or