Author Topic: how to render css full cell background  (Read 2146 times)

alonewolf149

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 56
    • View Profile
how to render css full cell background
« on: August 31, 2020, 09:37:42 pm »
Hi,

i make a condition and dynamic color, but color is not showing full.
http://prntscr.com/u92ppb

can u guide how to render css background, currently i insert more DIV, so it has some padding area.
http://prntscr.com/u92q61

how can i do style background full cell ex: http://prntscr.com/u92qpx

Thanks

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: how to render css full cell background
« Reply #1 on: August 31, 2020, 09:56:25 pm »
Conditional styles are added to cells by returning style property in column.render callbacks.

'background-color' is applied to the whole cell.

Code: [Select]
return {                               
     style: { 'background-color': '#ff0000' }
};

Example: https://paramquery.com/pro/demos/condition_style
« Last Edit: August 31, 2020, 10:17:57 pm by paramvir »

alonewolf149

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 56
    • View Profile
Re: how to render css full cell background
« Reply #2 on: September 01, 2020, 08:54:25 am »
Hi,

when i change from

                render : function(ui){
                   var bgColor = ui.rowData.flag_bg_color;
                   var fontColor = ui.rowData.font_color;
                   return "<div style='width: 100%; height: 100%; background-color: "+bgColor+"; color: "+fontColor+"'>"+ui.rowData.label_flag+"</div>"
                },

to

                render : function(ui){
                   var bgColor = ui.rowData.flag_bg_color;
                   var fontColor = ui.rowData.font_color;
                   return {                               
     style: { 'background-color': '#ff0000' }
};
                },

Cell is not showing any background.
can u help ?
Thanks

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: how to render css full cell background
« Reply #3 on: September 01, 2020, 04:54:08 pm »
Please mention the version of pqgrid.

Please also share a jsfiddle so that I can check your code.