ClientGroupHeaderTemplate Custom Options

1 Answer 95 Views
Grid
Headygains
Top achievements
Rank 1
Veteran
Headygains asked on 19 Aug 2021, 05:28 PM | edited on 19 Aug 2021, 05:30 PM

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

Sort by
0
Eyup
Telerik team
answered on 24 Aug 2021, 03:04 PM

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.

Headygains
Top achievements
Rank 1
Veteran
commented on 25 Aug 2021, 04:15 PM

Thank you for your response, I'll get a visual design done today, gotta consult the analysts for their requirements.
Eyup
Telerik team
commented on 30 Aug 2021, 10:05 AM

Feel free to take your time and let us know if further assistance is required.
Headygains
Top achievements
Rank 1
Veteran
commented on 30 Aug 2021, 05:55 PM

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.

Eyup
Telerik team
commented on 02 Sep 2021, 09:03 PM

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.

Tags
Grid
Asked by
Headygains
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Share this question
or