jqGrid Group Renderer not working

[prashant.srivastava@intel.comParticipant]

We are trying to implement jqxGrid with Group Renderer (having group and sub group). Below is the problem statement for which we need your input.

Problem Statement:-
We have Parent component in Angular (version 14) which has a child component. Data is passed a BehaviourSubject to the Child Component and that has jqxGrid control. We are trying to pass GroupsRenderer function as an input to Child Component and then in Child Component it is set to GroupsRenderer property of jqxGrid. But, unfortunately, that function is not triggered when our grid renders.

Help needed:-
How can we trigger GroupsRenderer function present in Parent Component for our jqxGrid control present in Child Component ?

[prashant.srivastava@intel.comParticipant]

Thanks ! With the help of your Sample. I was able to trigger GroupsRenderer function present in Parent Component for our jqxGrid control present in Child Component.
But, what I noticed is onGroupschanged is called after groupsrenderer event (if you have just drag one column to group).

Use case:-
I have to show the data in Grid and have multi level grouping concept. I.e. It can be grouped based on one or multiple fields.
Here, grouping header will be custom. I.e. I have to show the rollup percent of records and their total count in that group.

Ex:
|- Group Level 1 35% (Total records:- 5)
|- Group Level 1.2 20% (Total records:- 2)
|- Group Level 1.2.1 20% (Total records:- 1)
|- Group Level 1.2.2 20% (Total records:- 1)
|- Group Level 1.3 10% (Total records:- 2)
|- Group Level 1.3.1 20% (Total records:- 1)

In this the percent calculation is done on whole data we have (Please note:- in grid not all the data shown. It will display only what user applier filter for on screen).

Problem Statement:-
In onGroupschanged event we build an object which will have overlapper Array chunk and that will tell details about percent complete and total records for each group level. And, later in the groupsrenderer we just filter that object and use respective property to render the details.
We are doing this so that for each group we do not end up computing percent complete and total records everytime.
Intent is to build once and use it for rendering all the groups.

This works fine when we drag multiple fields for grouping. But, when we just group by one field then it fires groupsrenderer function first then goes to onGroupschanged . Since the object is built in onGroupschanged and then is supposed to be used in groupsrenderer. So, in groupsrenderer that object is null and this in turn does not render the customize content in grouping header.

Question here is:-
is there a way we trigger groupsrenderer after onGroupschanged ?

[svetoslav_borislavovParticipant]

Hi,

Could you create this object inside groupsrenderer with the help of the grid’s methods and properties?
I am looking forward to hearing from you!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[prashant.srivastava@intel.comParticipant]

Hi,

Unfortunately I cannot build that object inside the groupsrenderer because- That object is based of what groups have been applied. As percent rollup for groups work based the group fields applied on the Grid.

And, in groupsrenderer function do not have a way to know what fields are used for grouping. Also, the other demerit of creating that object inside the groupsrenderer is it will fire for each row. However, onGroupschanged will fire once and that too only when there is a change in the list groups.

Here is use case which might help you to visualize my problem statement:-
1. There is a screen which have search filter (dropdown lists and checkbox). Ex: “Department”, “Team” and “Items completed”. Here, “Items completed” is checkbox.
2. Here, we have whole data called report data and then based on “Items completed” checkbox value we filter on top of that data to display in Grid.
3. On selection of values from filters the results is shown on Grid (jqGrid).
4. If user applies grouping then what we have to do is calculate the percent rollup for a group based below formula:
4.1 Get total records for that group.
4.2 Get total records for that group which are status “routed”.
4.3 Then, percent is = ROUND((total records for that group which are status routed) / (Get total records for that group) * 100)

Question here is:-
Isn’t there a event which grs triggered before groupsrenderer event fires ? I was assuming therotically- everytime there is a change in Group that has to be renderer. So, that way- onGroupschanged should be called first and then should be groupsrenderer

Please advise.

[ivanpeevskiParticipant]

Hi Prashant,

Unfortunately it’s not possible to switch the order of the events.
However if I understood you correctly, this sounds like something that could be done using just the groupsrenderer, since the data argument provides all records in the group

Please have a look at the example here: jsfiddle
Each group row will display the percentage of rows with routed==true out of the total rows in the group

Please let me know if this works for you!

Best regards,
Ivan Peevski

jQWidgets Team
https://www.jqwidgets.com/

[prashant.srivastava@intel.comParticipant]

Hi,

Well that’s not the case. The data object of jqGrid will have the details pretaining the “localdata” object of the “dataAdapter._source”.
Which actually is the filtered data. Because what we show on grid is the result based on the selection made by the user on the screen in search controls (controls which are not part of grid).

It’ s not the whole data (the one which does not have records filtered out). And, percent completion rollup here is based of total data vs the data shown on screen for specific status. So, in a nutshell counting the number of rows from each group would not suffice the need as it is the filtered (data bind to Grid)

In between, what is the sequence behaviour of groupsrenderer and onGroupschanged event. I do see that- when I load the grid by applying 2 fields in group by property (i.e. set an array with 2 elements to it for group by) then It loads perfectly fine. Here, onGroupschanged is fired first and then groupsrenderer is fired.

However, If I manually, drag and drop one column to group then that is where the sequence of event changes. I.e. groupsrenderer is fired first and then onGroupschanged is fired.

To conclude this does not seems to have a consistent behavior.
Could you please suggest anything on this?

[ivanpeevskiParticipant]

Hi Prashant,

Thanks for the feedback.

If the main benefit of the ‘groupchanged’ Event is the groups array, you can also get the same array in the groupsrenderer with $('#jqxGrid').jqxGrid('groups'); or this.myGrid.groups(for Angular)

The second issue is avoiding recalculations in each function call – you can check whether the groups array is different from the previous time the function was called and use this as a new ‘groupchanged’ event.

I have attached an Angular demo here: stackblitz

I have also opened a work item for that and we will consider if we can make the order of the event and the renderer more consistent.

Best regards,
Ivan Peevski

jQWidgets Team
https://www.jqwidgets.com/

[avidsonollinsParticipant]

jqGrid Group Renderer is a feature that allows users to group data in jqGrid based on certain criteria. This feature is not working when the data is not properly formatted. This could be due to incorrect data types, missing data, or data that is not properly sorted. Additionally, Group Renderer may not work if the data is too large or if the grid has too many columns. To fix these issues, users should ensure that the data is properly formatted and sorted, and that the grid is not too large.

[Author]

Posts