ToolBar columns does not work on Detail template grid

[Ramandeep]

Hi, I am using Telerik grid in Razor pages applications. I have main grid and Detail grid.

<script id="orderItemsTemplate" type="text/kendo-tmpl">
    @(
        Html.Kendo().Grid<OrderItemInfo>()
                        .Name("OrderItemsGrid_#=RowId#")  // Unique grid name using rowid
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.ItemDescription).Title("Item Description").Width("20%");                           
                            columns.Bound(o => o.QtyDelivered).Title("Qty Delivered").Width(50).Hidden();
                            columns.Bound(o => o.OrderNo).Title("Order No").Width(90);
                          
                    })
                    .ToolBar(tb => tb.Columns())
                    .AllowCopy(true)
                    .Selectable(s => s.Enabled(true))
                    .Sortable()
                    .Events(events =>
                    {
                        events.DataBound("onOrderItemsGridDataBound");
                    })
                    .Size(ComponentSize.Small)
                    .Resizable(resize => resize.Columns(true))
                    .DataSource(dataSource => dataSource.Custom()
                        .ServerGrouping(false)
                        .ServerPaging(false)
                        .ServerFiltering(false)
                        .ServerAggregates(false)
                        .ServerSorting(false)
                    )
                    .ToClientTemplate()
            )
</script>

Problem:   .ToolBar(tb => tb.Columns()) is not working on Detail grid template. 

[Mihaela]

Hello Ramandeep,

Thank you for sharing the detail Grid configuration.

 To display the column menu globally through the toolbar command, you need to enable the ColumnMenu() option of the Grid:

<script id="orderItemsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<OrderItemInfo>()
           .Name("OrderItemsGrid_#=RowId#")  // Unique grid name using rowid
           .ToolBar(tb => tb.Columns())
           .ColumnMenu()
           ...
           .ToClientTemplate()
        )
</script>

If you want to disable the column menu on a column level and use only the global column menu, set the ColumnMenu(false) to each column:

<script id="orderItemsTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<OrderItemInfo>()
                        .Name("OrderItemsGrid_#=RowId#")  // Unique grid name using rowid
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.ItemDescription).Title("Item Description").Width("20%").ColumnMenu(false);                           
                            columns.Bound(o => o.QtyDelivered).Title("Qty Delivered").Width(50).Hidden();
                            columns.Bound(o => o.OrderNo).Title("Order No").Width(90).ColumnMenu(false);
                        })
                       .ColumnMenu()
                       .ToolBar(tb => tb.Columns())
                      ...
)
</script>

Here is a REPL sample for your reference:

https://netcorerepl.telerik.com/wyFOYdla06f6zRrv47

I hope that helps.

 

Regards,
Mihaela
Progress Telerik

[Ramandeep]

Hi Mihaela,

Thank you so much! it works perfectly fine. I am new to Telerik. Another question is that I am not able to export (excel) Detail Grid data with main grid.  I would appreciate if you could help me with this too. This is how i did on main grid and it only exports main Grid's Data.

.Excel(excel => excel
.FileName("OrderInfo.xlsx")
.Collapsible()
.Filterable(true)
.AllPages(true)
)

[Mihaela]

Hi Ramandeep,

Thank you for letting me know that the global column menu is now available for the detail Grid at your end.

I took notice of the fact that currently there is no license associated with your account. This inevitably limits our support service that can be provided, regardless of whether the inquiry resides within a public forum or private thread. Thus, my personal advice here would be to take a look at the following Support Plans. In case you want to see what each of the tiers brings to the table:

• Support Plans

Regardless, please allow me to still cover the inquiry you have raised.

We have a dedicated KB article that describes how to export both parent and child Grids:

https://docs.telerik.com/aspnet-core/knowledge-base/grid-export-parent-and-all-detail-grids-to-excel

I have highlighted the sections you need to replace based on the Grid Model at your end within the JavaScript logic:

• Update the yellow highlights with the unique Model Id of the master Grid.
• Update the green highlights with the column fields of the child Grid that must be exported in Excel.
• Update the blue highlights with the child Grid Read() remote endpoint.

<script>
     // used to wait for the children to finish async export
    var detailExportPromises = [];


    function excelExport(e){
        e.preventDefault();
        var workbook = e.workbook;
        detailExportPromises = [];
        var masterData = e.data;
        for (var rowIndex = 0; rowIndex < masterData.length; rowIndex++) {
            exportChildData(masterData[rowIndex].EmployeeID, rowIndex);
        }
        // wait for all detail grids to finish exporting
        $.when.apply(null, detailExportPromises)
        .then(function () {
            // get the export results
            var detailExports = $.makeArray(arguments);
            // sort by masterRowIndex
            detailExports.sort(function (a, b) {
                return a.masterRowIndex - b.masterRowIndex;
            });
            // add an empty column
            workbook.sheets[0].columns.unshift({ width: 30 });
            // prepend an empty cell to each row
            for (var i = 0; i < workbook.sheets[0].rows.length; i++) {
                workbook.sheets[0].rows[i].cells.unshift({});
            }
            // merge the detail export sheet rows with the master sheet rows
            // loop backwards so the masterRowIndex doesn't need to be updated
            for (var i = detailExports.length - 1; i >= 0; i--) {
                var masterRowIndex = detailExports[i].masterRowIndex + 1;
                var sheet = detailExports[i].sheet;
                // prepend an empty cell to each row
                for (var ci = 0; ci < sheet.rows.length; ci++) {
                    if (sheet.rows[ci].cells[0].value) {
                        sheet.rows[ci].cells.unshift({});
                    }
                }
                // insert the detail sheet rows after the master row
                [].splice.apply(workbook.sheets[0].rows, [masterRowIndex + 1, 0].concat(sheet.rows));
            }
            // save the workbook
            kendo.saveAs({
                dataURI: new kendo.ooxml.Workbook(workbook).toDataURL(),
                fileName: "Export.xlsx"
            });
        });
    }

    function exportChildData(EmployeeID, rowIndex) {
        var deferred = $.Deferred();
        detailExportPromises.push(deferred);
        var rows = [{
            cells: [
                { value: "OrderID" },
                { value: "ShipCountry" },
                { value: "ShipAddress" },
                { value: "ShipName" }
            ]
        }];

        var baseUrl = "@Url.Action("HierarchyBinding_Orders", "Grid")";
        baseUrl+= "?employeeID="+EmployeeID
        var exporter = new kendo.ExcelExporter({
            columns: [
                { field: "OrderID" },
                { field: "ShipCountry" },
                { field: "ShipAddress" },
                { field: "ShipName" }
            ],
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: { 
                        url: baseUrl 
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    error: "Errors"
                }
            }
        });
        exporter.workbook().then(function (book, data) {
            deferred.resolve({
                masterRowIndex: rowIndex,
                sheet: book.sheets[0]
            });
        });
    }
</script>

If you face any difficulties or issues, don't hesitate to let me know.

Best,

Mihaela