jQuery UI Widgets › Forums › Grid › column header text color
Tagged: cell editing, cellsrenderer, jqxgrid
This topic contains 6 replies, has 3 voices, and was last updated by kingdomp 8 years, 11 months ago.
-
Authorcolumn header text color Posts
-
Dear , I need to change the color of the column header text in my grid.
I have 31 columns and the idea is that change color according to the day of today.
probe with :
$(‘#MYGRID .jqx-grid-column-header(0)’).css(‘color’, ‘#3F0’);
but it does not work..
I also tried this way and not work
var firstNameCell = $(‘#MYGRID .jqx-grid-column-header:eq(0)’);
firstNameCell.css(‘color’, ‘#3F0’);I guess the parameter (0) is the index of the column ?
Hello nostromo,
This code looks like example in this topic.
Yes parameter (0) in:eq(0)
is the index of the column (header) but use this way to select cell$('.jqx-grid-column-header:eq(0)')
.
Could use same approach to set color text.
Have another way to set color in cells –cellsrenderer
.
Please take a look for more information about it here.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comthis is my code:
$(“#btnFiltrar”).on(‘click’, function () {
$(‘#personal .jqx-grid-column-header:eq(0)’).css(‘color’, ‘#3F0’);
});#personal is my grid
$(“#personal”).jqxGrid(
{
width: 1100, //20 pixeles mas que la suma de las columnas
height: 550,
source: dataAdapter,
theme: ‘shinyblack’,
rowsheight: 20,
localization: getLocalization(),
columns: [
{ text: ‘Nombre’, datafield: ‘nombre’, width: 260, pinned: true },
{ text: ‘Rut’, datafield: ‘rut’, width: 100 },
{ text: ‘1’, datafield: ‘d1’, width: 1, align: ‘center’, cellclassname: colorFondo },
{ text: ‘2’, datafield: ‘d2’, width: 1, align: ‘center’, cellclassname: colorFondo },
{ text: ‘3’, datafield: ‘d3’, width: 1, align: ‘center’, cellclassname: colorFondo },
{ text: ’31’, datafield: ‘d31’, width: 1, align: ‘center’, cellclassname: colorFondo, hidden: oculta31 }
]
});Pressing the button #btnFiltrar, should change the color of text in the header of the column, but does not function .
with the sample code either, you could guide me I’m doing wrong?
var firstNameCell = $(‘div .jqx-grid-column-header:eq(0)’);
firstNameCell.css(‘background-color’, ‘rosybrown’);Hello nostromo,
Please take a look this example: http://jsfiddle.net/hristoxux/L2j49q5c/
Could see more information about ‘renderer’ and ‘rendered’ in our forum here.
I would recommend this as information on columns colorizing if you need.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comExcelent!
Hi,
I try again but still don’t work with the column who is not showing at the creation. I set my columns dynamically $(“#MAIN_PAGE_GRID”).jqxGrid({columns:colonne});
Afer I push my data and try to set my columns colors
for(var i=0;i<colonne.length;i++)
{
$(‘.jqx-grid-column-header:eq(‘+i+’)’).css(‘background-color’, ‘rosybrown’);
}the colonne.length give me 67.
And that is what happen :
The first columns who his showing work correctly,
If you scroll right, the rest have no colors when they suppose to have.My code work for long time, it was just since the new update that was stop working correctly.
I also try with $(‘div .jqx-grid-column-header:eq(‘+i+’)’).css(‘background-color’, ‘rosybrown’); but same problem.When they are not showing, do the columns still exist ?
Hello kingdomp,
Thanks for interest on that theme.
Please try with that:rendered: function () { $('.jqx-grid-column-header').css('background-color', 'rosybrown'); },
/property from Grid/
Could you look this example: http://jsfiddle.net/hristoxux/wjgnLut4/
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi,
the old way don’t work anymore with $(‘#MYGRID .jqx-grid-column-header(0)’).css(‘color’, ‘#3F0′); if your grid is width and you have hidden row at screen, the visible one will be ok but not the rest. The way it work for me was to put it in the rendered function who is call when you scroll.
What I do is adding a color element on my column and have it on my source variable for the adapter
var _main_grid_source ={localdata: “[]”,datatype: “json”,datafields:[]};
var _main_grid_source_adapter = new $.jqx.dataAdapter(_main_grid_source);_main_grid_source[‘columns’]=[
{ text: ‘test1’, datafield: ‘whatyouwant1′, width: 100,color:’#3F0’},
{ text: ‘test2’, datafield: ‘whatyouwant2′, width: 150,color:’#3F5’},
{ text: ‘test3’, datafield: ‘whatyouwant3′, width: 65,color:’#3FF’ }]And assign it to the grid
$(“#MAIN_PAGE_GRID”).jqxGrid({columns: _main_grid_source[‘columns’]});After I assign the rendered
$(“#MAIN_PAGE_GRID”).jqxGrid({rendered: function () {
for(var i=0;i<_main_grid_source[‘columns’].length;i++)
{
if(_main_grid_source[‘columns’][i][‘color’]!=”)
{$(‘.jqx-grid-column-header:eq(‘+i+’)’).css(‘background-color’, ‘#’+_main_grid_source[‘columns’][i][‘color’]);}
}
}});
$(“#MAIN_PAGE_GRID”).jqxGrid(‘render’);Probably this will also work :
$(“#MAIN_PAGE_GRID”).jqxGrid({rendered: function ()
{
$(‘.jqx-grid-column-header:eq(0)’).css(‘background-color’, ‘#3F0’);
$(‘.jqx-grid-column-header:eq(1)’).css(‘background-color’, ‘#3F5’);
$(‘.jqx-grid-column-header:eq(2)’).css(‘background-color’, ‘#3FF’);
}}); -
AuthorPosts
You must be logged in to reply to this topic.