Expanded rowdetail gets mixed up with custom sort

[aurelien.clergeot@elca.chParticipant]

Hello,

When expanding the row detail of a row that is not rendered programmatically + with custom sort, the id of the expanded row gets mixed up.
The problem only appears with custom sort, I didn’t manage to reproduce it without it.

Here’s a reproducible example : https://jsfiddle.net/ctnrjhmp/45/
1. Sort by FirstName asc
2. Filter on LastName in such a way that the row with id 10 (the one we want to expand) is hidden : e.g. “ful”
3. Click on the “Trigger row detail with id 10” button
4. Sort by FirstName desc
5. Erase the filter
6. See that the expanded row is not id = 10, but some other (seemingly random) row.

The same steps without the line source.sort = customSort does not exhibit the bug.

Thanks for your help,
Aurélien

[adminKeymaster]

Hi,

The problem is that the boundindex is not saved in this case due to the updating of the data source during the sort operation. As a workaround, try this updated version of your customSort function:

function customSort(column, direction) {
  let sorted = [...data];

  // Direction can be null, 'asc'/'desc', 'ascending'/'descending', 
  // or true/false depending on the context. 
  // Convert every case to null/bool
  if (typeof direction === 'string') {
    direction = direction.toLowerCase();
    if (direction.startsWith('asc')) direction = true;
    else if (direction.startsWith('des')) direction = false;
  }

  var tmpToString = Object.prototype.toString;
  Object.prototype.toString = 
    (typeof column === "function") ? column : function () { return this[column] };
  if (direction != null) {
    sorted.sort(compare);
    if (!direction) {
      sorted.reverse();
    }
  }
  source.localdata = sorted;
  
  grid.off('bindingcomplete');
  grid.on('bindingcomplete', () => {
	  
	  const rows = grid.jqxGrid('getrows');
	  rows.forEach((row) => {
		row.boundindex = row.id;
	  });
	  grid.jqxGrid('_postrender', 'sort');
  });
 grid.jqxGrid('updatebounddata', 'sort');
  
 Object.prototype.toString = tmpToString;
}

Best regards,
Peter Stoev

jqwidgets team
https://www.jqwidgets.com/

[aurelien.clergeot@elca.chParticipant]

Hello,
I’ve pasted your workaround in the example : https://jsfiddle.net/zcevpbsa/9/

Unfortunately it does not seem to work, and seems to break the grid :
After a new refresh, I cannot sort the grid anymore. And after trying to sort the grid once, I cannot expand rows manually by clicking on them anymore.

Thanks,
Aurélien

[adminKeymaster]

Hi Aurélien,

Yes, I see this. I tested the workaround using the next version which includes an additional change. Unfortunately, at present there is no workaround of this situation. We have a release planned for December so we will have a new version which will work with custom sorting and row details using the code provided in this post.

Best regards,
Peter Stoev

jqwidgets team
https://www.jqwidgets.com/

[aurelien.clergeot@elca.chParticipant]

Hey,

Got it, I’m looking forward to the update.

Just a point I’d like to make sure of: in the app I’m developping the ids will not start from 0 nor be sequential like in the reproducible example I first posted. They would start at e.g. 5000 and there could be holes in the ids, and so I’m guessing that simply mapping the ids to the boundindex would not work.
Could you please make sure that the demo will work in this case too ?

Thanks again,
Aurélien

[Author]

Posts