Rank 1
Veteran
Hello,
I'm currently working on adding content to a ClientGroupHeaderTemplate and I run into some issues regarding aggregate functions and what type of logical expressions I can use within the template itself.
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/group-templates
I cannot seem to use if{}else{} statements as I normally do in Telerik component templates. And I was wondering if I could utilize a version of the aggregate functions but on other columns in the same group instead of the actual column, the group by is being done on.
For Example:
trip.Add().Text("New").Selected(true).Content(@<text>
<div class="row">
@(Html.Kendo().DataSource<OrderSearchBindingModel>().Name("newDataSource").Ajax(t =>
{
t.Read(read => read.Action("GetOrderSearch", "Fulfillment", new { status = "New"}));
t.PageSize(300);
t.ServerOperation(true);
t.Group(p => p.Add("KitControl", typeof(string)));
t.Aggregates(agg =>
{
agg.Add(field => field.InternalOrderId).Count();
});
t.Events(events => events.Error("error_ajax"));
}))
<div class="col-2">
@(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("newFilter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
{
f.Add(p => p.InternalOrderId).Label("Internal Order ID");
f.Add(p => p.ExternalOrderId).Label("External Order ID");
f.Add(p => p.KitControl).Label("Kit Control");
f.Add(p => p.Department).Label("Department");
f.Add(p => p.WorkCenter).Label("Work Center");
}).FilterExpression(fe =>
{
fe.Add(p => p.InternalOrderId);
}).DataSource("newDataSource"))
</div>
<div class="col-9">
@(Html.Kendo().Grid<OrderSearchBindingModel>().Name("newOrderGrid").Columns(columns =>
{
columns.Bound(p => p.InternalOrderId).Width(95).ClientGroupHeaderColumnTemplate("Total Orders: #= sum #");
columns.Bound(oi => oi.ExternalOrderId).Width(110);
columns.Bound(p => p.CreatedDate).Format("{0:MM/dd/yyyy HH:mm tt}").Width(120);
columns.Bound(oi => oi.DueDate).Width(120);
columns.Bound(oi => oi.KitControl)
.ClientGroupHeaderTemplate("#= value != null ? value : 'Non-Kitted' || value != ' ' ? value : 'Non-Kitted' || value != undefined ? value : 'Non-Kitted' # <button type='button' class='manifest-btn btn btn-sm btn-info d-inline'>Manifest</button>").Width(190);
columns.Bound(oi => oi.Department).Width(95);
columns.Bound(oi => oi.WorkCenter).Width(95);
columns.Command(command =>
{
command.Custom("View").Click("order_view").HtmlAttributes(new{@class="btn btn-sm btn-info d-block text-white"});
command.Custom("Packing Slip").Click("order_packing_slip").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
command.Custom("Pick Ticket").Click("order_pick_ticket").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
command.Custom("Reprint").Click("order_reprint").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
}).Width(125);
}).ClientDetailTemplateId("order-detail")
.HtmlAttributes(new {style = "height: 750px"})
.Scrollable()
.Groupable()
.Filterable()
.Resizable(r => r.Columns(true))
.Sortable()
.Pageable()
.Events(events => events.DataBound("on_bound"))
.DataSource("newDataSource"))
</div>
</div>I cannot even get the evaluation correct with the current group header template to replace empty text with a "No Kit Control" placeholder it just shows up empty still. As well as the Aggregate of the internal order id not showing up in the header as well, that is something I made an attempt at but I couldn't seem to get a reference to work properly in the ClientGroupHeaderTemplate.
I had attempted to apply some if{}else{} conditional logic to not display the KitControl Manifest button however that would just give me script/tag errors on page render.
Is there a more comprehensive description of the template capabilities I am missing? Or am I just trying to push this template too far?
1 Answer, 1 is accepted
Hi,
Thank you for writing to us.
Yes, generally, if statements are allowed in templates:
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq#how-can-i-apply-conditional-logic-to-client-column-templates
But it may be more specific in this case. Could you send me some sample images or drawings to demonstrate how you prefer the end result to look like? I can then prepare a sample project with the solution and send it to you.
Regards,
Eyup
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Veteran
Rank 1
Veteran
Here's a sample design of the GroupHeader: imgur
The text is supplied by property named "KitControl".
The buttons are dynamically displayed based upon underlying properties.
Manifest is only when KitControl != string.Empty;
Mark Complete only when Status != x
Pill left of KitControl Display is the number of OrderItems. (the sum of the number of orderitems that share the same kitcontrol) The count of records in the grouping.
I've created a full working sample to demonstrate how you can achieve this requirement.
Feel free to download and run the attached project and let me know if it helps you.