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

Grid Detail Template TabStrip Aggregates

3 Answers 157 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 16 Feb 2021, 09:28 PM

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>
);

3 Answers, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 19 Feb 2021, 11:28 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Lee
Top achievements
Rank 1
Veteran
answered on 20 Feb 2021, 12:40 AM

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?

0
Accepted
Georgi Denchev
Telerik team
answered on 22 Feb 2021, 03:26 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Georgi Denchev
Telerik team
Lee
Top achievements
Rank 1
Veteran
Share this question
or