get summary info of grid with grouped columns on cell click

[Patric Gehl]

Hello,

in a ASP.Net Webform i use a ej:Grid with a asp:SqlDataSource bound to the DataSourceID of the grid. I also have an intial grouping via

<GroupSettings ShowGroupedColumn="True" GroupedColumns="Band,TagText,MaterialDescription" ShowToggleButton="True"></GroupSettings>

I summarize the data of the grouped columns via

<SummaryRows>

 <ej:SummaryRow Title="Quadratmeter" ShowCaptionSummary="True" ShowTotalSummary="False">

   <SummaryColumn>

     <ej:SummaryColumn SummaryType="Sum" Format="{0:N0}" DisplayColumn="Quantity"          

         DataMember="Quantity" />

  </SummaryColumn>

 </ej:SummaryRow>

</SummaryRows>

I also collapse the groups via 

<ClientSideEvents ToolbarClick="onToolBarClick" DataBound="dataBound" ActionComplete="complete" CellSelected="OnCellSelected" />

and 

       function dataBound(args) {

            this.collapseAll();

        }

Works all perfect.

But

1. How can i expand the groups to the 3.th level ( MaterialDescription) in the initial JS-function?
2. How can i get the summary value(s) of some selected 'Group-row'?

My first try was a unbound column of type 'checkbox'. But the checkboxes are not shown in the  'Group-row'.

I need to add and display the values of some user selected summary-cells of the  'Group-rows'.

So i want to catch the selected cells or rows and the  summary-values and present them in a field of the page.

But bette where a summary row at the end oft the grid with autoupdate

Any idea or any example available?

Thanks

Patric

[Pon Selva Jeganathan]

Hi Patric Gehl,

Query: How can i expand the groups to the 3.th level ( MaterialDescription) in the initial JS-function?

Before we start proceeding with your query, we request you to share with us the details below to provide you with the solution as early as possible. 

1. We can see from your code snippet that you are grouping the three columns. Confirm whether you are grouping more than three columns or only three columns.
2. Detailed explanation of your requirement.
3. Video demo /screenshot of your requirement.

Query: How can i get the summary value(s) of some selected 'Group-row'?

We are unclear about this query. We need some more additional details. Please share the below details.

1. Confirm whether you want to display the summary row based on a single row or cell, or all row values from a single group.
2. How did you select the group-row? confirm Whether you use cell or row selection,
3. Code example of your requirement.
4. Detailed explanation of your requirement.
5. Video demo /screenshot of your requirement.

Regards, 

Pon selva 

[Patric Gehl]

Hi Pon Selva,

to your questions:

Part 1:

1. At the moment i only need to group 3 columns at initial time, doing with
   

<GroupSettings ShowGroupedColumn="True" GroupedColumns="Band,TagText,MaterialDescription" ShowToggleButton="True"></GroupSettings>
So in future, more than 3 groups are possble.

Since this is an initial grouping, the grid opens with the grouped columns expanded. I need the grid only open to level 2 so that i see the first, the second level 'expanded' but the 3th level collapsed. (See the screenshot in the attached pdf).



1.  

Attachment: Grid_Question_2bbfa86e.zip

[Pon Selva Jeganathan]

Hi Patric Gehl,

Query: Since this is an initial grouping, the grid opens with the grouped columns expanded. I need the grid only open to level 2 so that i see the first, the second level 'expanded' but the 3th level collapsed.

We achieved your requirement by using the expandCollapse method and dataBound event of the grid. Using this method, you can expand or collapse the row based on the row state in grid.

Please refer to the below code example,

<ej:Grid ID="Grid1"  AllowSorting="true" AllowPaging="True" AllowGrouping="true"

         AllowSelection="true" Selectiontype="Multiple"

            ShowSummary="True"  runat="server">

 

 

…..

 

  <ClientSideEvents   DataBound="dataBound"/>

 

…

 

function dataBound(args) {

            var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0];

            var obj = $("#Grid1").ejGrid('instance');

            obj.collapseAll();

         

          //for expand first level

            var level1 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").length;

            for (var i = 0; i < level1; i++) {

                obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").first());

            }

            //for expand second level

            var level2 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").length;

            for (var i = 0; i < level2; i++) {

                obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").first());

            }

      

        }

 

In the above code snippet, in the databound event, first collapse all rows using the collapseAll method. and collect the length of the first and second group level. Based on the value, we expand the row using the expandCollapse method.

Please refer to the below screenshot,

Please refer to the below API documentation,

https://help.syncfusion.com/aspnet/grid/toolbar#custom-toolbar-items

https://help.syncfusion.com/api/js/ejgrid#methods:expandcollapse

Query: How can i get the summary value(s) of some selected 'Group-row'?

We achieved your requirement by using the custom toolbar feature and cellSelected event and clearCellSelection method of the grid.

Please refer to the below code snippet,

 

<input type="button" onclick="clicked" value="click" />

        <ej:Grid ID="Grid1"  AllowSorting="true" AllowPaging="True" AllowGrouping="true"

         AllowSelection="true" Selectiontype="Multiple"

            ShowSummary="True"  runat="server">

 

<ClientSideEvents   DataBound="dataBound" CellSelected="selecting" ToolbarClick="onToolBarClick"/>

            <SelectionSettings SelectionMode="cell" />

            <ToolbarSettings ShowToolbar="true">

                    <CustomToolbarItem>

                        <ej:CustomToolbarItem TemplateID="#SelectedRecord" />

                        <ej:CustomToolbarItem TemplateID="#Clear" />

                         <ej:CustomToolbarItem TemplateID="#Result" />

                       

                    </CustomToolbarItem>

                </ToolbarSettings>

 

 

<script id="Result" type="text/x-jsrender">

       <div>

                    Result:   <input type="text" id="total" value="0"/>        

                 

                </div>

    </script>

  

     <script id="SelectedRecord" type="text/x-jsrender">

       <div>

                    SelectedRecord Count

                </div>

    </script>

   

     <script id="Clear" type="text/x-jsrender">

       <div>

                  Clear Selection

                </div>

    </script>

 

function selecting(args) {

         

            if (args.cellIndex == 3) {

 

                selected_val += args.selectedData.Freight;//calculate the selected cell value

            }

        }

        function onToolBarClick(args) {

            var obj = $("#Grid1").ejGrid('instance');

            var total_obj = document.getElementById('total');

            if (args.itemName == "SelectedRecord")

            {

 

                total_obj.value = selected_val;//set the selected value

 

            }

            else if (args.itemName == "Clear")

                obj.clearCellSelection(); //clear the selection

            total_obj.value = 0; // set the initial value

          

        }

In the above code snippet, we calculate the value in the cellSelected event while selecting the summary cell value. We set the value in the toolbar click event based on the text value of the toolbar. And then use the clearCellSelection method to clear the selection.

Please refer to the below screenshot,

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/webform_-sample-699144457

Please refer to the below API documentation,

https://help.syncfusion.com/api/js/ejgrid#methods:clearcellselection

https://help.syncfusion.com/api/js/ejgrid#events%3Atoolbarclick

https://help.syncfusion.com/api/js/ejgrid#events:cellselected

Please refer to the below help documentation,

https://help.syncfusion.com/aspnet/grid/toolbar#custom-toolbar-items

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Patric Gehl]

Hi Pon Selva,

thanks for your quick reply and the code. But in my solution are some problems:

1. The dataBound-event is never fired! Maybe this is a problem with the datasource

DataSourceID="SQL_DS_ZPPR" that is a ASP.Net SqlDataSource!

<asp:SqlDataSource ID="SQL_DS_ZPPR" runat="server" ConnectionString="<%$ ConnectionStrings:NSG_PRODAT_Con %>" SelectCommand="Proc_Sel_ZPPR" SelectCommandType="StoredProcedure">

                <SelectParameters>

                    <asp:ControlParameter ControlID="hf_Von" DefaultValue="01.08.2022 00:00:00" Name="Von" PropertyName="Value" Type="DateTime" />

                    <asp:ControlParameter ControlID="hf_Bis" DefaultValue="01.08.2022 23:59:59" Name="Bis" PropertyName="Value" Type="DateTime" />

                    <asp:ControlParameter ControlID="hf_L1" DefaultValue="3" Name="Band" PropertyName="Value" Type="Int32" />

                </SelectParameters>

</asp:SqlDataSource>


But your code for collapse to 2. level workes perfect!! So i use a button and call a function on click!



function MyExpand() {

            var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0];

            var obj = $("#grd_ZPPR").ejGrid('instance');

            obj.collapseAll();

            //for expand first level


            var level1 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").length;

            for (var i = 0; i < level1; i++) {

                obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").first());

            }

            //for expand second level


            var level2 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").length;

            for (var i = 0; i < level2; i++) {

                obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").first());


            }

        }

But i have one question:

The item     var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0];

val is never used in the codeblock; so why is it needed?



2. The selection and summation of the cells didn't work because the  ' selected_val '  is not available.
   I changed it like that
   function OnCellSelected(args) {
   

            var total_obj = document.getElementById('total');  //get the input field

            var summe = parseInt(total_obj.value);           //change the text to int

            if (args.cellIndex == 9) {       //this is the cell of my summary

                summe += parseInt(args.selectedData.Quantity); //calculate the selected cell value as int

                total_obj.value = summe;        // calculated value/int to the input field

            }

        }

This works for the selection of cell-values in the grid. But the 'cell-click event' is not fired for summary values in collapsed group-rows!! And i need the values in this cells!

  

3.  How can i select the values of several of these cells??
   

Thanks for your help so far

Patric

[Pon Selva Jeganathan]

Hi Patric Gehl,

Query: The dataBound-event is never fired! Maybe this is a problem with the datasource

We checked your query by preparing sample(using sql datasource) based on your code snippet, but we were unable to reproduce the problem.

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/webform_-sample-932964669

Please refer to the below video demo,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/VIDEOD~2-524882308

If you still facing issue, please provide the following information

1. Complete grid code example
2. Package version details.
3. Video demo / screenshot of the issue
4. Stacktrace details(if face any)
5. If possible, try to reproduce the reported issue in the provided sample or share the reproducible sample.

The requested information will be helpful to proceed further.

Query: But i have one question: The item     var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0]; val is never used in the codeblock; so why is it needed?

There is no need to use the val property. You can remove this code.

Query: But the 'cell-click event' is not fired for summary values in collapsed group-rows!! And i need the values in this cells!

Query: How can i select the values of several of these cells??

Currently, we don’t have support for selecting the summary cells or rows. You can select the "grouped rows /cells" value in the grid.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Patric Gehl]

Hi Pon Selva,

i have no idea why some events (like dataBound) are not fired! But i found a working solution for me: I use the document.ready event! Here i collaps the grid to my wished level and bind a click-event on the grid and the cell!

I identify the group summary cell by the css " e-scroller e-groupcaptionsummary", catch the value and change the backround (so i see what was clicked) .

$(document).ready(function () {

  MyExpand();

  $("#grd_ZPPR_Delta").click(function (args) {

         if (args.target.className == "e-scroller e-groupcaptionsummary") {

                    var clickedCell = $(args.target).closest("td");

                    clickedCell.css("background", "red");

                    var total_obj = document.getElementById('total'); //get the input field

                    var summe = parseInt(total_obj.value); //change the text to int

                    summe += parseInt(clickedCell.text().replace(',', '').replace('.', '')); //calculate 

                    total_obj.value = summe; // calculated value/int to the input field

                }

            });

        });

I then use a button outside the grid that trigger the 'Reset-function'

 <button onclick="MyClear()">Löschen</button>

function MyClear() {

            var total_obj = document.getElementById('total');

            total_obj.value = 0; // set the initial value

            $("#grd_ZPPR_Delta").find("tr").each(function () { //get all rows in table

                var ratingTd = $(this).find('td');//Refers to TD element

                if (ratingTd.css("background") == "red") {  // is this a 'red-one'?

                    ratingTd.css("background", "#c8c8c8"); // so change it back!

                }

            });

        }

This works for me; but your first reply pushed me in the right direction.

So thanks for your time and support!

Do you see some problems or possible optimizations on my code?

Thanks

Patric 

[Pon Selva Jeganathan]

Hi Patric Gehl,

Query: Do you see some problems or possible optimizations on my code?

We have checked your query by using your shared code snippet. You can use your code snippet to calculate the group summary.

Please get back to us, if you are facing any difficulties.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly