Display total count instead of count

[BERNARD Ludovic]

Dear Support,

How can I display the total count of items instead of the subitem count?

I want something like this :

    

- [Column Name]: [element text] - 1 item 

     o my item

- [Column Name]: [element text] - 12 items

     - [Column Name]: [element text] - 10 items

     - [Column Name]: [element text] - 2 items

          o my item

          o my item

Thank you in advance,

Best Reagards,

Ludovic

[Thavasianand Sankaranarayanan]

Hi Bernard, 

Thanks for contacting Syncfusion support. 

Before proceeding to your query we need the following clarifications. 

1. Are you want to show only total items for multiple grouped columns captions ?
2. In the below screen shot we have grouped two columns and it will show that hierarchy level.

Refer the screen shot. 

 

 

3. What is your expectation on this grouped columns ? Share your pictorial representation of your requirement.
4. Share the complete Grid code example.
5. Share the Essential studio version details.

Regards, 

Thavasianand S. 

[BERNARD Ludovic]

Hello,

Thank you for your response, I am using syncfusion 16.1.0.24

here is a screen of what I want based on your previous screen:

you can see the 13 is the sum of the number of items inside ERNSH and PICCO (there is only 2 subitems with 10 items in one and 3 items in the other)

and here the initialization of the groupSettings:

groupSettings:

            {

                groupedColumns: [

                    "obj.name",

                    "obj.age",

                    "obj.email"],

                showToggleButton: true,

                captionFormat: "{{:headerText}} : {{:key}}"

            },

[Thavasianand Sankaranarayanan]

Hi Bernard, 

We have analyzed your query and the count for the group caption is set based on the sublevel count of immediate base level which is the default behavior of ejGrid control. If we want to set the count based on the items count, we need to manually calculate the items count for each caption by using “actionComplete” event of Grid control.  

Please refer to the below code example. 

  <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

                allowGrouping: true, 

                actionComplete: "onActionComplete", 

                groupSettings: { groupedColumns: ["ShipCountry"] }, 

                columns: [ 

                         { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 65 }, 

                         { field: "CustomerID", headerText: "Customer ID", width: 90 }, 

                         { field: "ShipCity", headerText: "Ship City", width: 90 }, 

                         { field: "ShipCountry", headerText: "Ship Country", width: 90 }, 

                         { field: "Verified", width: 70 } 

                ] 

            }); 

        }); 

    function onActionComplete(args){  

        if(args.requestType == "grouping" || args.requestType == "ungrouping" || args.requestType == "paging"){  

            var grpCol = this.model.groupSettings.groupedColumns, len = grpCol.length, prevCaption, val=0;  

            if(len > 1){  

                for(var i=len-2;i>=0;i--){  

                    prevCaptions = $("td[data-ej-mappingname="+grpCol[i]+"]").next();  

                    for(var j=0;j<prevCaptions.length;j++){  

                        curCaptions = $(prevCaptions[j]).closest("tr").next().find("td[data-ej-mappingname="+grpCol[i+1]+"]").next();  

                        for(var k=0;k<curCaptions.length;k++)  

                            val += parseInt($(curCaptions[k]).text().match(/\d+/)[0]);  

                            $(prevCaptions[j]).text(function(i,txt) {return txt.replace(/\d+/,val); });   

                            val = 0;  

                    }  

                }                          

            }  

        }  

    }  

    </script> 

Refer to the sample Link:- 

http://jsplayground.syncfusion.com/1znabhea 

Refer to the API Link:- 

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

Regards, 

Thavasianand S.