Changing rowGroup().dataSrc does not work

gmarshall

Hello:
In a React javascript class I am using "datatables.net-rowgroup-bs4": "^1.1.2". I implemented the Data source change event as demonstrated at:
[https://datatables.net/extensions/rowgroup/examples/initialisation/event.html]

I implemented the code as shown there. I had to set my dataSrc as follows:
const myTable = $('mytable').DataTable({
...
...
rowGroup: {
dataSrc: 'userId', //2nd colum in my table (col 1)
},
...
});

I also implemented a disable rowGroup on a click of a link with this code in a function:
myTable.rowGroup().disable().draw();

Now here is my scenario:
1. Web page with my table renders fine and grouping is correct by "userid".
2. I click my link to disable rowGroup. All of the rows in the table that show the "userid" break disappear.
3. I click on another link to group the table again by "userid". There is no change to the table. No "userid" breaks display..
I figure the reason for this is because I disabled rowGroup in step 2. So in my click function to add back the rowGroup by "userid" I enabled rowGroup() and then set the rowGroup().dataSrc value. Here is my code:

        $('a.group-by').on('click', function (e) {
            e.preventDefault();
            if (!jqMapsTable.rowGroup().enabled()) { // RowGroup is NOT enabled - disabled in step 2...
                jqMapsTable.rowGroup().dataSrc($(this).data('column')); //..set the dataSrce column (contains 1)
                jqMapsTable.rowGroup().enable().draw();  //... and enable rowGroup
            }
        });

When this function completes the result is the row under the table header row that typically shows the first "userid" group instead shows "No group". I then tried to set the dataSrc by using the same string value that I used in the rowGroup parameter in the table definition:

jqMapsTable.rowGroup().dataSrc('userId')
.. This throws this error:
jquery.dataTables.js:5928 Uncaught TypeError: Cannot read property 'aDataSort' of undefined

What I am trying to do is offer the capability for my users to turn on and off the rowGroup-ing. Am I doing this wrong or is there perhaps a bug in the datatables code? Please advise and thank you for your time.

kthorngren

jqMapsTable.rowGroup().dataSrc($(this).data('column')); //..set the dataSrce column (contains 1)

Since you are using objects your call to rowGroup().dataSrc() needs to contain the property name. You can't use indexes as this is for array based data. Presumably you are using something like the example:

<a class="group-by" data-column="1">Group by Position</a>

You will need to change data-column to be data-column="userId".

If this doesn't help please provide a link to your page or a test case showing the problem so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

gmarshall

Kevin:
Thank you for taking the time here. In order to debug this issue I have deployed this app in AWS. Here is what you can do to reproduce the issue. BTW: I have been able to reproduce this issue in Chrome, FF and Edge. My program does not work yet in IE. I have not put in the required polyfills yet. I will provide my scenario with the assumption that you will be using Chrome:

1. In Chrome go to http://3.94.8.211/
2. When the web page renders click on "Get Posts" button
3. When the table renders click on the "Show x Entries" download and select 50 rows. Notice the grouping identifier row in the table ("1", "2", "3", etc). Works as expected
4. Click on the link above the table that says "Disable Grouping". Notice the grouping identifier rows are removed from the table. Works as expected
5. Click on the link above the table that says "Group by User ID". You will see no changes made to the table. Now open Chrome developer tools -> Console and notice first the console message:
   "in a.group-by click... columne: userId"
   ... followed by the error being thrown:
   Uncaught TypeError: Cannot read property 'aDataSort' of undefined

So I have changed the code as you suggested so that the line you referenced now reads

<a className="group-by selected" data-column="userId">Group by User ID</a>

... but the issue still exists.

When time permits can you please advise and thanks again for your time.

BTW If you want to view the javascript the file is called
post.componentsBootStrapJQueryDT2.js

Thank you

kthorngren

That was fun to track down

The problem isn't with this statement:

                    jqMapsTable.rowGroup().dataSrc($(this).data('column'));

But with this:

                jqMapsTable.order.fixed({ pre: [[val, 'asc']] }).draw();

val is the userId but it should be the column index.

The code and the example in the rowgroup-datasrc docs works if you have array based data. The order.fixed() API expects the first parameter to be the column number.

One option might be to add columns.name with the same name as the data property. Use that as the column().index() column-selector to get the index to use for order.fixed(). Something like this:

               var colIndex = jqMapsTable.column( val + ':name' ).index();
                jqMapsTable.order.fixed({ pre: [[colIndex, 'asc']] }).draw();

Kevin

gmarshall

UPDATE: Please use URL: http://54.87.168.10. Thank you

kthorngren

Do you still have questions? Did you try my suggestions?

Kevin

gmarshall

Good morning... I just noticed your responses and thank you. Isn't this forum supposed to send me an email when somebody leaves comments? I will be making your suggested changes in just a few..

kthorngren

Isn't this forum supposed to send me an email when somebody leaves comments?

Verify your settings by editing your profile and clicking on Notification Preferences. If they look correct then PM Colin or Allan to take a look.

Kevin

gmarshall

Kevin:
Your suggested code:
var colIndex = jqMapsTable.column( val + ':name' ).index();
.. returns "undefined".
Should we be using jqMapsTable.columns perhaps?
Thank you

kthorngren

returns "undefined"

Did you define columns.name? And use the same name as columns.data?

Should we be using jqMapsTable.columns perhaps?

No. You want to return only one column, correct?

Kevin

gmarshall

Kevin:
Its working like a champ. I'm new with React js so It took me some time to figure out how to set up the string to hold the column name and the ":name" literal without Linter getting mad.

Thanks for your assistance. In case you would like to see it working you can go to 3.93.153.94. I'll leave it up for the rest of the business day then I'll take it down. AWS charges for everything, as I'm sure you know! :>)

kthorngren

Good, glad its working. I haven't used react either. Somehow I managed to pull up the source code yesterday to debug, think I clicked on an error. But I'm not able to find the page now. Please post the change you made for others to see, if they have the same issue.

Kevin

gmarshall

Kevin:
Sure thing. In addition to adding the "name" attribute (property?) to each column defined in the "columns:[]" array I updated the code from what is shown in the rowGroup documentation example to (this is React.js):

` // Change the fixed ordering when the data source is updated:

        jqMapsTable.on('rowgroup-datasrc', (e, dt, val) => {
            const columnLiteral = ':name';
            const colummName = val;
            const columnNbrRequested = `${colummName}${columnLiteral}`;
            const colIndex = jqMapsTable.column(columnNbrRequested).index();
            jqMapsTable.order.fixed({ pre: [[colIndex, 'asc']] }).draw();
        });`

JúniorSiqueira

Hello Goodnight. The expression
var colIndex = worklist.column( val + ':name' ).index();
it's always returning me undefined. What can it be??

kthorngren

@JúniorSiqueira Without seeing what you are doing its hard to say. Use the browser's debugger and put a breakpoint on that line. From there you should be able to see what is undefined. If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

JúniorSiqueira

So, I'm using the example from the rowgroup's own documentation and added the line you indicated above to capture the column index since I'm using it with an object and not with an array.

In the view I have the code

<ul>
    <li>
        <a class="group-by" data-column="unity">Unidade</a>
   </li>
   <li>
        <a class="group-by" data-column="mods_in_study">Modalidade</a>
    </li>
</ul>

and in .js I have this code:

"rowGroup": {
    "dataSrc": "mods_in_study"
},

  worklist.on( 'rowgroup-datasrc', function ( e, dt, val ) {
    var colIndex = worklist.column( val + ':name' ).index();
    console.log(colIndex);
    worklist.order.fixed( {pre: [[ colIndex, 'asc' ]]} ).draw();
} );

$('a.group-by').on( 'click', function (e) {
  e.preventDefault();

  worklist.rowGroup().dataSrc( $(this).data('column') );
} );

In the console.log that I put the value is undefined, I could not capture the column index.

kthorngren

Nothing obvious stands out as an issue from your code snippets. Please provide a running test case showing the issue. This way we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin