Button on the right side of a Group Header

[Michael Kroeschel]

Hi Support

I'm using the ASP.NET MVC Grid => @(Html.EJ().Grid<object>("FlatGrid")  and I need a Button in Header of a grouped column like in the following picture =>

I have three level of grouped columns and I need the Button only in the one in the middel

How can I archieve this?

Regards

Michael

[Prasanna Kumar Viswanathan]

Hi Michael, 

Thanks for contacting Syncfusion support. 

To display a button in header of a grouped column use summaryTemplate feature of ejGrid. The summary template is used to render any type of JsRender templates or customizing the summary value. Instead of displaying summary value we displayed button in Group header.  

 

Find the code example: 

 

@(Html.EJ().Grid<DataContainer.DCPart>("HeaderTemplate") 

     .Datasource((IEnumerable<object>)ViewBag.datasource) 

    ------------------- 

    .SummaryRow(row => 

              { 

                  row.ShowCaptionSummary(true) 

                     .ShowTotalSummary(false) 

                     .SummaryColumns(col => 

                     { 

                         col.SummaryType(SummaryType.Average) 

                            .DisplayColumn("Freight") 

                            .DataMember("Freight") 

                            .Format("{0:C}") 

                            .Template("<button id='button'>Click</button>") 

                            .Add(); 

                     }).Add(); 

              }) 

     .Columns(col => 

     { 

         ----- 

     }) 

) 

Sample: http://www.syncfusion.com/downloads/support/forum/136461/ze/Sample145862-702446283 

Refer the Help document for summary Template.  

https://help.syncfusion.com/js/grid/summary#summary-template 

Regards, 

Prasanna Kumar N.S.V 

[Michael Kroeschel]

Hi Prasanna 

I tested this and I can see the Button, but the Button is now on all three level of the Grouping and I need it only on the secound level!?!?

Regards

Michael

[Vignesh Natarajan]

Hi Michael, 

Thanks for the update. 

Query: “but the Button is now on all three level of the Grouping and I need it only on the second level!?!?” 

We have analyzed your query and we are able to reproduce the reported behavior at our end. We have achieved your requirement using ActionComplete Event of Grid when requestType is grouping.  

Refer the below code snippet 

.ClientSideEvents(e=>e.ActionComplete("complete")) 

) 

<script type="text/javascript"> 

    function complete(args) { 

        if (args.requestType == "grouping") 

            $(".e-recordplusexpand[data-ej-mappingname!='Freight']").siblings(".e-groupcaptionsummary").text("") 

        } 

</script> 

Note: Summary template will be shown only when grouped Column is Freight other wise it wont show.  

For your convenience we have prepared a sample which can be downloaded from below link 

Sample:  http://www.syncfusion.com/downloads/support/forum/136461/ze/Sample145862535940036.zip  

Refer the below screenshot for the output 

 

Regards, 

Vignesh Natarajan