Grid Detail Template TabStrip Aggregates

[Lee]

Hi,

I'm using this example: https://demos.telerik.com/aspnet-core/grid/detailtemplate

I'm using the same apart from the "Orders" Tab i have called it "Notes", everything is working as expected. But i'd like to put the count of Notes also in the Tab Text i.e.

Text("Notes (#=kendo.format('{0:N}', data.aggregates.Note.count)#)")

 

I added the aggregate in the DataSource:

.Aggregates(aggregates =>
{
    aggregates.Add(p => p.Note).Count();
})

 

But i get the following console error:

Uncaught TypeError: data.aggregates is undefined

 

Is there anyway to achieve what i'm after?

 

 

--- Complete Tab Code:

items.Add().Text("Notes (#=kendo.format('{0:N}', data.aggregates.Note.count)#)").Content(
    @<text>
    @(Html
        .Kendo()
        .Grid<TaskReportLineNote>()
        .Name("grid_#=JobNumber#")
        .Columns(columns =>
        {
            columns.Bound(o => o.Posted).Width(150).Format("{0:dd/MM/yyyy HH:mm:ss}");
            columns.Bound(o => o.Poster).Width(250);
            columns.Bound(o => o.Note);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Sort(sort => sort.Add(p => p.Posted).Descending())
            .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.Note).Count();
            })
            .Read(read => read.Action("GridNotes", "TaskReport", new { TaskId = "#=TaskId#" })))
        .Pageable()
        .Sortable()
        .ToClientTemplate())
    </text>
);

[Georgi Denchev]

Hello Lee,

Thank you for the provided code snippets.

You can utilize the DataBound event of the grid to get the aggregate count after the grid has finished loading the data and then use JQuery to append the result to the TabStrip Text.

.Events(e => e.DataBound("onChildBound"))

<script>
    function onChildBound(e) {
        let grid = this;
        let tabStrip = grid.element.closest(".k-tabstrip").data("kendoTabStrip"); // Get the tabstrip widget.

        let firstTab = tabStrip.items()[0]; // Get the first tab.
        let aggregateCount = grid.dataSource.aggregates().Note.count; // Get the aggregate for the Note field.
        let text = kendo.format('Notes {0:N}', aggregateCount); // Format the aggregate.

        $(firstTab).find(".k-link").text(text); // Change the current Text of the Tab with the new one.
    }
</script>

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Lee]

Thank you Georgi, That works as expected.

I only have one issue when enabling the Aggregates it turns on/displays the tfooter in the grid. I don't want to show it for this specific table. I don't want to use generic css:

<style>
.k-grid-footer{
    display: none;
}
</style>

 

Because i have other Grids on the same page that do use the footer.

Is there a way in the options for the Grid to turn off footer, for that specific grid?

[Georgi Denchev]

Hello Lee,

The DataBound event should work for this requirement as well:

function onChildBound(e) {
        let grid = this;
        // Get the k-footer-template class in the current child grid only and hide it.
        grid.element.find(".k-footer-template").hide();
    }

Let me know if further assistance is needed.

Best Regards,
Georgi Denchev
Progress Telerik