We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

get summary info of grid with grouped columns on cell click

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



5 Replies

PS Pon Selva Jeganathan Syncfusion Team November 18, 2022 10:00 AM

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 




PG Patric Gehl replied to Pon Selva Jeganathan November 24, 2022 06:21 AM

Hi Pon Selva,

to your questions:

Part 1:

  1. At the moment i only need to group 3 columns at initial time, doing with
  2. <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


PS Pon Selva Jeganathan Syncfusion Team November 25, 2022 11:42 AM

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.





PG Patric Gehl November 30, 2022 05:49 AM

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
  2. 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?

  3. 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) {
  4.             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!

      

  5.  How can i select the values of several of these cells??
Thanks for your help so far
Patric


PS Pon Selva Jeganathan Syncfusion Team December 1, 2022 10:10 AM

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.





Loader.
Live Chat Icon For mobile
Up arrow icon