TabStrip contain Expand Detail Rows in Grid

[Gaysorn]

Hello,

I have kendo TabStrip contain 2 tabs, each tab has kendo Grid with 2 groups and details (layout below). Tab one is active and has layout with expand detail rows but when the tab two is active, the second group and detail rows not expand. Both tabs have the same setting. I want both tabs to expand detail rows when selected. 

Grant Name: xxxx
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Grant Name: oooooo
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx

My TabStrip coding

@(Html.Kendo().TabStrip()
        .Name("ReimbusementDetails")
        .Items(x =>
        {                
        x.Add().Text("Submitted")
        .Selected((AuthorizationService.AuthorizeAsync(User, "InternalUser")).Result.Succeeded)
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentSubmitted")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentSubmitted')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");
                    column.Bound(c => c.ProcessedDate).Title("Submitted Date").Format("{0:d}").Width(130);
                })
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement Submitted.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )               
                .DataSource(ds => ds
                    .Ajax()                    
                    .GroupPaging(true)
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);
                    })
                    .Aggregates(ag =>
                    {
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementSubmitted", "ProjectReimbursement"))
                )
            )
            </text>
        );

        x.Add().Text("In Progress")            
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentInProgress")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentInProgress')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");                        
                    column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
                })                    
                .Pageable()
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()  
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement In Progress.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )
                .Events(ev => ev.DataBound("ExpandProgress"))
                .DataSource(ds => ds
                    .Ajax()                                    
                    .GroupPaging(true)                    
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);                                
                    }) 
                    .Aggregates(ag =>
                    {                            
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
                )
            )
            </text>
        );
        })
    )

function ExpandProgress(e) {        
        grid = $("#ReimbursmentInProgress").data("kendoGrid");
        $(".k-master-row").each(function (index) {
            grid.expandRow(this);
        });        
    }

I have tried with Event DataBound("ExpandProgress") javascript but still not working.

Any advice to achieve this. Thank you.

[Anton Mironov]

Hello Gaysorn,

Thank you for the code snippet and details provided.

I invested time in order to replicate the described behavior. Here is a REPL example with jQuery Details Grids. The MVC wrappers are actually wrappers of the jQuery widgets, so the behavior should be the same. Feel free to make the needed tests with the example below:

• https://netcorerepl.telerik.com/QdYovNPm12kGlswD52

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik

[Gaysorn]

Thank you for your help.

In the  event DataBound function, I switched k-master-row to  k-grouping-row and expandRow to expandGroup. It looks like the row expand to show details now.

function ExpandProgress(e) {        
        grid = $("#ReimbursmentInProgress").data("kendoGrid");
        $(".k-grouping-row").each(function (index) {
            grid.expandGroup(this);
        });        
    }

[Anton Mironov]

Hi Gaysorn,

Thank you for sharing the solution with the community.

If further information or assistance is needed, do not hesitate to contact me and the team.

Best Regards,
Anton Mironov