ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: EPM Solutions on October 25, 2017, 09:41:20 am

Title: On Check Box Check/UnChecked Change CSS
Post by: EPM Solutions on October 25, 2017, 09:41:20 am

Hello Team,

Want to change color of records based on condition on click of checkbox checked/unchecked.

Here is my code for Checkbox.
  var gridOverges = $(".pq-slider-icon")[0];
        $(gridOverges).prepend("<span class='ui-widget-header pq-ui-button'>
                                               <input type='checkbox' checked='checked' id='grid_Overages'>
                                             </span>
                                             <label for='grid_Overages' style='margin-bottom:7px'>Overages</label>");


I want to change color of row where total is < 0.
            $('#grid_Overages').change(function() {
          if ($(this).is(':checked')) {
            console.log('checked');
          } else {
            console.log('unchecked');
          }
        });
 
Please find screenshot for understand requirement.

Title: Re: On Check Box Check/UnChecked Change CSS
Post by: paramvir on October 25, 2017, 12:32:57 pm

Use conditional formatting by adding styles in rowInit callback. Example: https://paramquery.com/pro/demos/condition_style

Code: [Select]

rowInit: function( ui ){
  var $chk = $('#grid_Overages');
  if($chk.is(":checked" && row_condition_is_true ){
    return {style: "color:red;"}
  }
},


Code: [Select]

$('#grid_Overages').change(function() {
  grid.refresh();
})


Title: Re: On Check Box Check/UnChecked Change CSS
Post by: EPM Solutions on October 25, 2017, 05:21:34 pm

Thanks Support Team it working fine....Thanks for your quick responce... :)

Title: Re: On Check Box Check/UnChecked Change CSS
Post by: EPM Solutions on October 26, 2017, 09:43:44 am

Hello Team,

Above given suggestion is working fine but also i want to change color of row groups where condition match.
Please suggest me how to change color for row group also.

Please find below attached screenshot also.

Title: Re: On Check Box Check/UnChecked Change CSS
Post by: paramvir on October 26, 2017, 04:09:05 pm

rowInit is called for every row including group title and summary rows.

So the same solution should work.

Title: Re: On Check Box Check/UnChecked Change CSS
Post by: EPM Solutions on October 27, 2017, 01:33:06 pm

But its not working because the value for groups are coming in string format also with the $ sign so not able to perform condition on the .

  For Group Total the values are like : $1,000 , -$2,500

  For Other Values are like : 1000 , -2500

 And also i try to replace $ sign and as well try to convert string into number but it is showing val.replace() is not a function.
 
  For Example :
   
        rowInit: function(ui) {
         var _pov = ui.rowData.projected_value;
           console.log(parseFloat(_pov));
           // For group its coming in string with $ sign so i tried to replace $
           var new_pov = _pov.replace("$","");
          // here it gives error that replace is not a function
        console.log("---------------");
        var $chk = $('#grid_Overages');
        if ($chk.is(":checked") && ui.rowData.projected_value < 0) {
          return {
            style: "color:red"
          }
        }
      },

Please give your suggestion...

Title: Re: On Check Box Check/UnChecked Change CSS
Post by: paramvir on October 27, 2017, 03:49:07 pm

They are supposed to be numbers and for good reason. Formatting is applied at the time of display by the grid.

It can be verified by placing this code:

Code: [Select]

rowInit: function(ui){
if(ui.rowData.Freight > 50){
debugger;
return {style: "color:red;"};
}
},

in any row grouping example: https://paramquery.com/pro/demos/group_rows

https://paramquery.com/pro/demos/group_rows_single_column


Have you applied formatting to data in group rows somewhere in your code?

Title: Re: On Check Box Check/UnChecked Change CSS
Post by: EPM Solutions on October 27, 2017, 04:00:58 pm

Hello Team,

I change my code now for replace the "$" sign and "," and after changing the character i am able to change the color of row group also,

Please check the below given code:

      rowInit: function(ui) {
        var _pov = ui.rowData.Projected_value;
        var number = _pov.toString().replace(/,/g, "");
        var n = number.replace("$", "");
        var $chk = $('#grid_Overages');
        if ($chk.is(":checked") && n < 0) {
          return {
            style: "color:red"
          }
        }
      },

Using this code it works fine now.

Thanks :)