ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: Sunny on August 07, 2015, 10:20:50 pm

Title: Pro 3.1.0: addClass not working properly when used in column render
Post by: Sunny on August 07, 2015, 10:20:50 pm

Hi,

I upgraded from 2.4.1 to 3.1.0. After upgrade, one feature is not working in upgrade which used to work in earlier version.

I had a column with editor as select dropdown and render as to add/remove class. When user changes options in that dropdown, row css would be changed accordingly.
Here is my column I had, which was working in 2.4.1 version:


                                 ^{editor : {
                  type: 'select',
                  labelIndx:'status',
                  valueIndx:'statusCd',
                  options: function (ui) {
                styleStatus = ui.rowData.styleStatus;
                     if (styleStatus) {
                                    return statusList[styleStatus];
                      }
                      return [];
                 }   
              },
      render : function (ui) {
         var cellData = ui.cellData;
         var $grid = $(this);
         if (ui.rowData.statusCd == 'A'){
            $grid.pqGrid("removeClass", {rowIndx: ui.rowIndx, cls: 'pq-row-red' });                                               $grid.pqGrid("removeClass", {rowIndx: ui.rowIndx, cls: 'pq-row-grey' });
            $grid.pqGrid("addClass", {rowIndx: ui.rowIndx, cls: 'pq-row-white' });
         }
         else if(ui.rowData.statusCd == 'H'){
            $grid.pqGrid("removeClass", {rowIndx: ui.rowIndx, cls: 'pq-row-white' });
            $grid.pqGrid("removeClass", {rowIndx: ui.rowIndx, cls: 'pq-row-grey' });
            $grid.pqGrid("addClass", { rowIndx: ui.rowIndx,dataIndx:null, cls: 'pq-row-red' });
         }else if(ui.rowData.statusCd == 'C'){
            $grid.pqGrid("removeClass", {rowIndx: ui.rowIndx, cls: 'pq-row-white' });
            $grid.pqGrid("removeClass", {rowIndx: ui.rowIndx, cls: 'pq-row-red' });
            $grid.pqGrid("addClass", { rowIndx: ui.rowIndx, cls: 'pq-row-grey' });
         }
         return cellData;
      }}



and now in 3.1.0, I am having below javascript error:
^{TypeError: a is undefined
pqgrid.min.js
Line 57
Col 373}

Title: Re: Pro 3.1.0: addClass not working properly when used in column render
Post by: paramvir on August 07, 2015, 11:57:49 pm

rowInit should be used to add conditional classes to the rows. http://paramquery.com/pro/api#option-rowInit

If you are not using any other classes for the rows, JSON notation would be even easier.

         var rowData = ui.rowData;
         if ( rowData.statusCd == 'A' ){
                rowData.pq_rowcls = 'white'; //this replaces any previous classes of the row, so there is no need to call removeClass.
         }
         else if( rowData.statusCd == 'H' ){
                rowData.pq_rowcls = 'red';
         }else if( rowData.statusCd == 'C' ){
                rowData.pq_rowcls = 'gray';
         }


column.render callback can be used to add classes to current cell but shouldn't be used to add classes to the rows. Reason is that the view is constructed from top to bottom and left to right. So any class added to row from column.render is actually added to view in the next refresh cycle.