Aggregates with dynamic grouping

6 posts, 0 answers
  1. Bernd
    Bernd avatar
    83 posts
    Member since:
    Feb 2013

    Posted 15 Apr Link to this post

    Hi all.

    In den Kendo UI docs there is a sample which I would like to use with the MVC wrapper.

    But I have no idea how to tell a grid column to have aggregates. Like it is done in the docs.

    Any ideas?

    Kind regards

    Bernd

  2. Stefan
    Admin
    Stefan avatar
    1257 posts

    Posted 18 Apr Link to this post

    Hello Bernd,

    I can assume that due to a technical issue to linked sample is send to us only as text.

    Could you please share the mentioned example, so I can inspect it and try to provide a suggestion on how it may be achieved using the MVC wrappers.

    Thank you in advance.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Bernd
    Bernd avatar
    83 posts
    Member since:
    Feb 2013

    Posted 18 Apr in reply to Stefan Link to this post

    I am sorry. Try this link in your docs. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.aggregates
  4. Stefan
    Admin
    Stefan avatar
    1257 posts

    Posted 19 Apr Link to this post

    Hello Bernd,

    When using the Kendo UI for MVC the linked property is not required.

    Please check our demo of the Grid with aggregates using the MVC version:

    http://demos.telerik.com/aspnet-mvc/grid/aggregates

    I hope this is helpful.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Bernd
    Bernd avatar
    83 posts
    Member since:
    Feb 2013

    Posted 19 Apr Link to this post

    Hello Stefan.

    Thank you for the link. I tried it, but it doesn't work as expected. The grid groups but there are no headers or footers with sums. As you can see in the following code sample I tried it several ways.

    This is my grid definition:

    001.@(Html.Kendo().Grid<CalendarEventViewModel>()
    002.    .Name(componentName: "eventGrid")
    003.    .AutoBind(value: false) // will be bound manually
    004.    .Pageable(p => { p.PageSizes(enabled: true); p.Refresh(enabled: true); p.Enabled(value: true); })
    005.    .Scrollable(s => { s.Height(value: "auto"); s.Enabled(value: true); })
    006.    .Filterable(f => f.Mode(GridFilterMode.Row))
    007.    .Groupable()
    008.    .Selectable()
    009.    .Sortable(s => s.Enabled(value: true))
    010.    .Resizable(r => r.Columns(value: true))
    011.    .Reorderable(r => r.Columns(value: true))
    012.    .ColumnMenu(m => { m.Filterable(value: false); m.Enabled(value: true); })
    013.    .Editable(editable => { editable.TemplateName(templateName: "CalendarEventEditorTemplate"); })
    014.    .ToolBar(tb => tb.Excel())
    015.    .Columns(columns => {
    016.        columns.Bound(c => c.Operation.OperationIdFormatted)
    017.            .Filterable(f => f.Cell(c => c.Operator(defaultOperator: "contains")))
    018.            .Groupable(value: false)
    019.            .Sortable(value: false)
    020.            .Width(pixelWidth: 160)
    021.        columns.Bound(nameof(CalendarEventViewModel.Title))
    022.            .Filterable(f => f.Cell(c => c.Operator(defaultOperator: "startswith")))
    023.            .Width(pixelWidth: 250)
    024.        columns.Bound(c => c.Operation.WorkOrder.EndProduct.ArticleNumber)
    025.            .Width(pixelWidth: 160)
    026.            .Filterable(f => f.Cell(c => c.Operator(defaultOperator: "startswith")))
    027.            .ClientGroupHeaderTemplate(value: "Artikel: #=value# - zu produzieren: #=aggregates.QuantityToProduce.sum#")
    028.        columns.Bound(c => c.Operation.WorkOrder.EndProduct.Dimensions)
    029.            .Width(pixelWidth: 130)
    030.            .Filterable(f => f.Cell(c => c.Operator(defaultOperator: "startswith")))
    031.        columns.Bound(c => c.Operation.WorkOrder.EndProduct.Height)
    032.            .Width(pixelWidth: 100)
    033.        columns.Bound(c => c.Operation.WorkOrder.EndProduct.Width)
    034.            .Width(pixelWidth: 100)
    035.        columns.Bound(c => c.Operation.WorkOrder.EndProduct.Length)
    036.            .Width(pixelWidth: 100)
    037.        columns.Bound(c => c.Operation.TotalTimeSpan)
    038.            .Width(pixelWidth: 130)
    039.            .ClientTemplate(value: "#= formatTimeSpan(Operation.TotalTimeSpan)#")
    040.            .Sortable(value: false)
    041.        columns.Bound(c => c.QuantityToProduce).Format(value: "{0:n}")
    042.            .Width(pixelWidth: 100)
    043.            .Filterable(value: false)
    044.            .Groupable(value: false)
    045.            .ClientFooterTemplate(template: "zu produzieren: #=sum#")
    046.            .ClientGroupFooterTemplate(template: "zu produzieren: #=sum#")
    047.            .ClientGroupHeaderTemplate(value: "zu produzieren: #=sum#")
    048.        columns.Bound(c => c.Operation.WorkOrder.UnitOfMeasure.Label)
    049.            .Width(pixelWidth: 60)
    050.            .Filterable(value: false)
    051.            .ClientTemplate(value: "#:data.Operation.WorkOrder.UnitOfMeasure.Label.substr(0,data.Operation.WorkOrder.UnitOfMeasure.Label.indexOf(' '))#")
    052.        columns.Bound(c => c.Operation.AllowedWorkplaces)
    053.            .Width(pixelWidth: 230)
    054.            .Filterable(value: false)
    055.            .ClientTemplate(value: "#=workplacesTemplate(Operation.AllowedWorkplaces)#")
    056.        columns.Bound(c => c.Operation.WorkOrder.Customer.Name)
    057.            .Width(pixelWidth: 100)
    058.            .Filterable(value: false)
    059.            .ClientTemplate(value: "#=Operation.WorkOrder.Customer ? Operation.WorkOrder.Customer.Name : ''#")
    060.        columns.Bound(c => c.Operation.WorkOrder.MasterSystemCustomerOrderRef)
    061.            .Width(pixelWidth: 100)
    062.            .Filterable(value: false)
    063.        columns.Bound(nameof(CalendarEventViewModel.Start))
    064.            .Width(pixelWidth: 160)
    065.            .Format(value: "{0:g}")
    066.        columns.Bound(nameof(CalendarEventViewModel.End))
    067.            .Width(pixelWidth: 160)
    068.            .Format(value: "{0:g}")
    069.        columns.Bound(nameof(CalendarEventViewModel.Description))
    070.            .Width(pixelWidth: 200)
    071.            .Filterable(f => f.Cell(c => c.Operator(defaultOperator: "contains")))
    072.        columns.Bound(c => c.Operation.WorkOrder.OrderType.Id).Hidden()
    073.            .ClientTemplate(value: "#=Operation.WorkOrder.OrderType.Label#");
    074.    })
    075.    .DataSource(ds => ds
    076.        .SignalR()
    077.        .PageSize(pageSize: 10)
    078.        .Events(ev => ev.Push(handler: "onPush"))
    079.        .Filter(f => f.Add(ce => ce.Workplace.UnlimitedCapacity).IsEqualTo(value: true))
    080.        .Transport(tr => tr
    081.            .ParameterMap(handler: "addGridParameters")
    082.            .Promise(handler: "hubStart")
    083.            .Hub(handler: "schedulerHub")
    084.            .Client(c => c
    085.                .Read(method: "read")
    086.                .Create(method: "create")
    087.                .Update(method: "update")
    088.                .Destroy(method: "destroy"))
    089.            .Server(s => s
    090.                .Read(method: "unscheduledOperationEvents")
    091.                .Update(method: "updateWithScheduling"))
    092.            )
    093.            .Schema(schema => schema
    094.                .Data(data: "Data")
    095.                .Model(m => {
    096.                    m.Id(f => f.Id);
    097.                    m.Field(f => f.Id).Editable(enabled: false);
    098.                    m.Field(f => f.StartWeek);
    099.                    m.Field(f => f.EndWeek);
    100.                    m.Field(f => f.ActivityStatus);
    101.                    m.Field(f => f.Description);
    102.                    m.Field(f => f.End);
    103.                    m.Field(f => f.EndTimezone);
    104.                    m.Field(f => f.EventType);
    105.                    m.Field(f => f.IsAllDay);
    106.                    m.Field(f => f.Operation);
    107.                    m.Field(f => f.OperationId);
    108.                    m.Field(f => f.Recurrence);
    109.                    m.Field(f => f.RecurrenceException);
    110.                    m.Field(f => f.RecurrenceID);
    111.                    m.Field(f => f.RecurrenceRule);
    112.                    m.Field(f => f.Start);
    113.                    m.Field(f => f.StartTimezone);
    114.                    m.Field(f => f.Status);
    115.                    m.Field(f => f.Title);
    116.                    m.Field(f => f.Workplace);
    117.                    m.Field(f => f.WorkplaceId);
    118.                })
    119.            )
    120.            .Aggregates(agg => {
    121.                agg.Add(ce => ce.QuantityToProduce).Sum();
    122.            })
    123.            .Events(e => e.Error(handler: "scheduler_error"))
    124.    )
    125.    .ClientDetailTemplateId(id: "operationDetailTemplate")
    126.    .Events(e => {e.DataBound(handler: "onGridDataBound"); e.Change(handler: "dispatcher.onGridChange"); })
    127.    .Deferred()

    What am I missing?

    Kind regards

    Bernd

  6. Stefan
    Admin
    Stefan avatar
    1257 posts

    Posted 21 Apr Link to this post

    Hello Bernd,

    I noticed that the used syntax for the aggregates column is:

    .ClientFooterTemplate(template: "zu produzieren: #=sum#")

    As in the example, the syntax is:

    .ClientFooterTemplate("Sum: #= sum#</div>");

    Also, I can suggest using the aggregate method of the dataSource, to check if there are any aggregates currently set:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-aggregate

    Please check the required syntax and if the issue still occurs, please send a runnable example reproducing the issue, so I can investigate further.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top