jQuery UI Widgets Forums Grid column header text color

This topic contains 6 replies, has 3 voices, and was last updated by  kingdomp 8 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • column header text color #78045

    nostromo
    Participant

    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 ?

    column header text color #78046

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    column header text color #78059

    nostromo
    Participant

    this 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’);

    column header text color #78092

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    column header text color #78217

    nostromo
    Participant

    Excelent!

    column header text color #78261

    kingdomp
    Participant

    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 :

    columns show

    The first columns who his showing work correctly,
    If you scroll right, the rest have no colors when they suppose to have.

    columns hide

    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 ?

    column header text color #78280

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    column header text color #78816

    kingdomp
    Participant

    Hi,

    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’);
    }});

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.