Trying to use jQuery addClass on check event

[cpopolo]

Hi, I'm evaluating Pro and trying to integrate certain jQuery methods into a Tree grid.

I have the following 'check' event function:

Code: [Select]

               
check: function( event, ui ) {
                    console.log('complete',event,ui);
                    donavchecks();
                    //this.addClass({rowIndx: ui.rowIndx,cls: 'selected'});
                },

The "donavchecks()" call looks like this.  You'll have to trust that I have classed grid elements appropriately, and in fact if I call "donavchecks()" at the console prompt it works fine...

Code: [Select]

function donavchecks() {
   var q = thetreenav.getCheckedNodes();
   console.log(q);
   $('.spanmeter').removeClass('selected')
   $.each(q, function(qi,qd) {
      $('span.trspan' + qd.meter).addClass('selected');
   })
}                   

So it seems to me that the "cls" definitions of the grid might be overwriting any classes that I assign in the check event.  How do I operate on the grid after it is completely quiet after a check event?

Thanks in advance.

[paramvir]

pqgrid is based on virtual rendering, means the cells and rows are created and destroyed continuously during scroll and other view changing operations.

So assigning of class to cells and other grid elements with jQuery don't persist in the DOM.

pqgrid has its own set of methods/API to add css classes, styles and html attributes to the cells/rows.

Hope it helps.

[cpopolo]

Thanks... Can you point me to the correct piece of documentation that might describe how to add a class to an element in a row when it is checked?  And to include the children rows as well?  Example: If I check a checkbox for a parent in a tree grid, I want to change the background color of the name, as well as the background color of all the children.

[paramvir]

There are getChildren, getChildrenAll, eachChild methods of Tree object.

https://paramquery.com/pro/api#method-Tree

There are also addClass, removeClass, hasClass methods:

https://paramquery.com/pro/api#method-addClass

You can use them together for your requirements.

[cpopolo]

Thank you - I now have this working as intended, but I'd like to ask if the code example below is best practice.  Upon checking a box with children, I first clear the 'selected' class from all checkboxes in the 'beforeCheck' event and then addClass back in the 'check'event.  This is seems to be the only way to clear the class when a box (and it's children) are unchecked.  Does this make sense or is there a simpler way?

Here is the code:

Code: [Select]

                beforeCheck: function(evt,ui) {
                    $.each(thetreenav.getCheckedNodes(), function(di,dq) {
                        thegridnav.removeClass({rowIndx: dq.pq_ri, dataIndx: 'name', cls: 'selected' });                           
                    })
                },
                check: function( event, ui ) {
                    console.log('check',event,ui,thetreenav.getCheckedNodes());
                    $.each(thetreenav.getCheckedNodes(), function(di,dq) {
                        thegridnav.addClass({rowIndx: dq.pq_ri, dataIndx: 'name', cls: 'selected' });                           
                    })


Here is a screen shot of the menu showing that the checked boxes have a dark background on the text that goes with the checkbox.

[paramvir]

Good question, apparently the proposed solution may work fine but it has some issues.

beforeCheck event may be cancelled by another event listener resulting in non-firing of check event and your checkboxes/classes getting out of sync.

check event fires in both cases: check and uncheck which can be detected by ui.check ( boolean )

Affected rows can be obtained from ui.getCascadeList()

https://paramquery.com/pro/api#event-check

So all the logic can reside in check event for your requirement.

[cpopolo]

Brilliant, thanks...  My revised code is much more concise and no longer depends on beforeCheck event:

Code: [Select]

                check: function( event, ui ) {
                   
                    var affected = ui.getCascadeList();
                    $.each(affected, function(di,dq) {
                        console.log(dq,dq.newRow.pq_tree_cb);
                        if (dq.newRow.pq_tree_cb==false) {
                            thegridnav.removeClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });                           
                        }
                        if (dq.newRow.pq_tree_cb==true) {
                            thegridnav.addClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });                           
                        }
                    })
                   
                },


If there's an improvement for the above, please let me know...  My next step is to Update a parallel grid with the same structure.  If you have a quick tip on how to Refresh the dataModel.data, I'd appreciate it.  My current code has a problem when it is called a second time with a different dataset.