Aspnet Core Nested Grid aggregates not working

2 posts, 0 answers
  1. Matt Bowser
    Matt Bowser avatar
    8 posts
    Member since:
    Sep 2006

    Posted 03 Nov 2020 Link to this post

    Good morning, 

    I'm new to Telerik and doing a POC evaluation using the Aspnet Core Grid control to see if it will work for our situation.  I've worked through most issues along the way, but I'm unable to get aggregates to work on the grid so far and I'm hoping it's something simple I'm missing and not a limitation of aggregates within a nested grid hierarchy. 

    Here is the scenario:

    I am trying to do a simple count of items in the nested grid and place them using the .ClientGroupHeaderColumnTemplate.  I'm also adding the .Aggregates to the DataSource call.  When I do so, I am unable to access the grid and get the following javascript error:  "Uncaught ReferenceError: count is not defined"

    I believe I have followed all the demos/examples/threads that I've found online correctly, but the difference is that this grid is nested within 2 other grids. I have also tried several of the other ClientTemplates (footer, header, etc...) with the same result.  Thanks in advance for any help you can give and let me know if you need additional information.

    Here is the code I'm calling for this grid:

    <script id="agents" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<TLCAgentSchedulerT.Models.AgentViewModel>
        ()
        .Name("agent_#=SubPodId#")
        .Columns(columns =>
        {

            columns.Bound(o => o.AgentName).Width(50);
            columns.Bound(o => o.Block1).Width(4)
                .ClientGroupHeaderColumnTemplate("Sum: #= count#")
                .ClientTemplate(@"<div class='agentStatus' style='background-image: url(" + @Url.Content("~/images/\\#:data.Block1\\#.png") + ");'></div>").ClientHeaderTemplate("<span data-toggle='tooltip' data-placement='top' title='6:00 AM EST'>B1</span>");
            columns.Bound(o => o.Block2).Width(4).ClientTemplate(@"<div class='agentStatus' style='background-image: url(" + @Url.Content("~/images/\\#:data.Block2\\#.png") + ");'></div>").ClientHeaderTemplate("<span data-toggle='tooltip' data-placement='top' title='6:00 AM EST'>B2</span>");
            columns.Bound(o => o.Block3).Width(4).ClientTemplate(@"<div class='agentStatus' style='background-image: url(" + @Url.Content("~/images/\\#:data.Block3\\#.png") + ");'></div>").ClientHeaderTemplate("<span data-toggle='tooltip' data-placement='top' title='6:00 AM EST'>B3</span>");
            columns.Bound(o => o.Block4).Width(4).ClientTemplate(@"<div class='agentStatus' style='background-image: url(" + @Url.Content("~/images/\\#:data.Block4\\#.png") + ");'></div>").ClientHeaderTemplate("<span data-toggle='tooltip' data-placement='top' title='6:00 AM EST'>B4</span>");
            //Add Additional Blocks

            columns.Command(command =>
            {
                command.Edit().Text("Edit Agent");
            }).Width(25);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            //.Read(read => read.Action("EditAgent", "Grid"))
            .Update(update => update.Action("EditAgent", "Grid"))
            .Events(events => events.Error("error_handler"))
            .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.Block1).Count();
            })
            .Group(groups => groups.Add(p=> p.Block1))
            .PageSize(5)
            .Read(read => read.Action("GetAgents", "Grid", new { subPodId = "#=SubPodId#" }))
            )
            //.ToolBar(toolbar => toolbar.Create()) //Adds 'Add New Record' button to toolbar
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Scrollable()
            //.Sortable()
            .ToClientTemplate()
        )
    </script>

     

     

     

     

  2. Eyup
    Admin
    Eyup avatar
    4074 posts

    Posted 06 Nov 2020 Link to this post

    Hi Matt,

     

    Thank you for your interest in the Kendo Grid for Core.

    Aggregates are supported and provided built-in:
    https://demos.telerik.com/aspnet-core/grid/aggregates

    What I can suggest you do is the following:

    1. Set this property to false:

        .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(false)
    2. If the issue remains, bring the grid temporarily outside any templates and put it directly on the page. Then, remove the .ToClientTemplate() method and ensure that the grid is working as expected.

    3. If the issue remains even after step 2, send me the definition of all the three grids and I will prepare a working solution and send it to you.

     

    Regards,
    Eyup
    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/.

Back to Top