Group renderer with dynamic data

[jahnvi25Participant]

I have Ajax loading data with group renderer..and I am loosing grouping after I set the
Source.localdata = data.. If I use static data .. Grouping works fine.. After setting data from Ajax response..If I drag column for grouping I header.. It works.. But my default initial grouping is lost..

I have following settings
groupable:true,
groups:[‘col1’]

Any idea what am I missing ?

[DimitarParticipant]

Hello jahnvi25,

You can re-apply your initial grouping on the bindingcomplete event (which will be triggered after the data has been changed):

$('#jqxgrid').on('bindingcomplete', function(event) {
    $('#jqxgrid').jqxGrid('addgroup', 'col1');
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[greynoldsParticipant]

We have a related problem where expanded groups collapse after we add data to source.localdata. Here’s a JSFiddle that illustrates the problem. Expand any group, then click the Add Rows button to add 15 more rows to the data. After the rows are added, any expanded groups are collapsed. We would like to have the ability to keep any groups the user has expanded expanded after new rows are added. My posted example is using an observable array, but the same thing happens if we use a regular array.

[DimitarParticipant]

Hello greynolds,

Please try the following approach: http://jsfiddle.net/Dimitar_jQWidgets/L700esxh/. We hope it is useful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[greynoldsParticipant]

Dimitar,

Thanks for your reply, it pointed me in the right direction. I had to keep track of the group names (instead of the row indexes as those aren’t the same as the group index…) and then figure out which group number each one is when I re-expand the groups in the binding complete event handler. I also had to add a group collapse handler to remove the group from the list when the group is collapsed. After moving this into our real solution, which doesn’t use observable array, it looks like we’ll have to update our solution to use observable array rather than a normal array to get this to work properly. Here’s the updated example.

On a somewhat tangential note, is there a reason why we can’t use concat to add all the new rows at once rather than using push to add each new row one at a time (see the commented out code in the addrowbutton click handler)? It seems as though using concat would be more efficient.

My next trick is going to be figuring out how to add group footer rows, if that’s even possible.

Geoff

[DimitarParticipant]

Hi Geoff,

1. With a normal array do you intend to add the new rows with addrow? It should be possible to restore the grouping immediately after the call to this method (no bindingcomplete event necessary).
2. The concat() method is part of the jqxObservableArray API.
3. I am not sure what exactly would these footer rows be, but I do not believe jqxGrid supports such a functionality.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[greynoldsParticipant]

Dimitar,

Sorry for the delay in getting back to you, but thanks for your reply. I’ll address your 3 points above and then I have 2 additional points:

1. It turns out that I was able to get the grouping functionality to work with a normal array using addrow as you suggested. This obviously eliminates the need for us to worry about using Observable Arrays.

2. Thanks, but since we don’t need to use Observable Arrays, I won’t need to worry about this.

3. We need to do custom pagination for the grid where we get the first 10 or 20 rows for each group and populate the grid with that data. We want to display summary counts along with “get more results” in a footer row for each group rather than having to display that data in the header row, which isn’t the natural place to display that data.

4. There’s a further requirement from our product team that when the user groups by time period (the groups are Today, Past, and Upcoming) we display group headers even when there isn’t any content for the group (this doesn’t make sense to me, but they’re pretty insistent on it).

5. The one problem that remains in our current implementation is that when we re-expand the previously expanded groups, the vertical scrollbar / current position always seems to jump to the top of the grid rather than maintaining the user’s previous position. I don’t see a way to get the current position so that I can restore it after we re-expand the groups. There’s a “scrollposition” method that returns the current scroll bar positions, but there doesn’t seem to be a corresponding function to set the scroll position and I’m not sure if the numbers would correlate after new rows have been inserted into the grid. Ideally what we would need is a method that gives us the first visible row in the grid and another that lets us set the first visible row in the grid (ensurerowvisible would likely work for setting the first visible row). Or for that matter, the grid would ideally maintain the current position and expanded status of each group when data is added to the grid with the addrow method or updated in a row with the updaterow method – it doesn’t make sense to collapse all the groups in either of those cases.

FYI, we’re currently using a customized version of JQX Widgets 3.1 (I haven’t been told exactly what the customizations are beyond styles, but that it would be non-trivial for us to duplicate the changes into a later version of the widgets), but have site licenses that allow us to use up to version 3.6. I tested our issues with the standard 3.6 widgets and a trial version of 3.8 and it didn’t change any of the above behaviors.

Thanks,
Geoff

[DimitarParticipant]

Hi Geoff,

3. Unfortunately, groups footer rows are not a functionality supported by jqxGrid.

4. As far as I am aware, this is not possible. Groups are created dynamically based on cell values. If there are no cells with value “Upcoming”, no such group will be created.

5. This behaviour is discussed in the following forum topic: http://www.jqwidgets.com/community/topic/grid-jumps-on-node-expand/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[greynoldsParticipant]

For item #3, is that something you guys could consider adding? It would definitely persuade us to upgrade our site license to the latest version.

For item #4, I understand why it isn’t possible (and have explained the reason to our product group), just conveying something our product group wants to be able to do.

For item #5, that other forum topic seems to be describing a different, more subtle, issue. I’ve got a jsfiddle that demonstrates the problem. To reproduce the issue I’m talking about, after loading the jsfiddle, do the following:

1) Expand a couple of groups (it doesn’t really matter which ones, the goal is to make the vertical scrollbar have some range).
2) Scroll to near the bottom and open another group.
3) Click on either the “Add Rows” (if you clear the edit box next to it, you’ll get a variety of names, otherwise you’ll get 200 more items with the name that’s in the edit box) or “Update Row” button to modify the grid contents using either the addrow or updaterow methods.

Observe that the grid scrolls all the way to the top. I would expect it to stay where it was before the new rows were added or the row was edited. I’m assuming this is a side effect of the groups all collapsing when the grid contents are modified.

Thanks,
Geoff

[DimitarParticipant]

Hi Geoff,

3. Such functionality is not in our current development plans.

5. Here is how to overcome this issue using the methods scrollposition and scrolloffset (I have implemented the fix only for the “Add Rows” button): https://jsfiddle.net/Dimitar_jQWidgets/2v0o29rv/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[greynoldsParticipant]

Hi Dimitar,

That workaround doesn’t seem to work – you had a typo in the call to scrolloffset (the selector was jqxGrid, with an uppercase G, instead of jqxgrid, with a lowercase g):

Uncaught Error: Invalid Selector – #jqxGrid! Please, check whether the used ID or CSS Class name is correct.

So the scroll position didn’t change because the rows weren’t actually getting added. After fixing that typo, the original problem returns.

Thanks,
Geoff

[DimitarParticipant]

Hi Geoff,

I am sorry for the erroneous example. Please check out the corrected and updated version here: https://jsfiddle.net/Dimitar_jQWidgets/2v0o29rv/2/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[greynoldsParticipant]

Thanks Dimitar. That solution should work for our case as long as we restrict the user to only adding rows to one of the expanded groups. If I add rows to random groups, the solution doesn’t work, because rows might be added to the grid above the current position, which screws up where the scroll bar needs to be.

[Author]

Posts