jQuery UI Widgets Forums Grid Problem color head json

This topic contains 2 replies, has 2 voices, and was last updated by  nostromo 5 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Problem color head json #102806

    nostromo
    Participant

    Dear, I have a simple grid to which I change the color of the second column header. All good when I read the data from an arrangement.
    The problem is that when I change the array data source to json, the color change in the header column does not work anymore.
    Any idea of ​​what can happen?

    Code OK with arrangement!

    var data = generatedata(50);
    var source = {
    localdata: data,
    datafields: [
    {name: ‘firstname’, type: ‘string’},
    {name: ‘lastname’, type: ‘string’}],
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#grid”).jqxGrid(
    {
    source: dataAdapter,
    width: 500,
    columns: [
    { text: ‘FirstName’, dataField: ‘firstname’, width: 80, align: ‘center’, cellsalign: ‘center’ },
    { text: ‘LastName’, dataField: ‘lastname’, width: 90, align: ‘center’, cellsalign: ‘center’ }
    ]
    }
    );

    var firstNameCell = $(‘div .jqx-grid-column-header:eq(1)’);
    firstNameCell.css(‘background-color’, ‘rosybrown’);
    });
    </script>
    </head>
    <body>
    <div id=”grid”></div>
    </body>
    </html>


    code using json, the second column color change header no longer works

    var data = generatedata(50);
    var source = {
    url: “qry_datosGrilla.cfm”,
    datafields: [
    {name: ‘firstname’, type: ‘string’},
    {name: ‘lastname’, type: ‘string’}],
    datatype: “json”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#grid”).jqxGrid(
    {
    source: dataAdapter,
    width: 500,
    columns: [
    { text: ‘FirstName’, dataField: ‘firstname’, width: 80, align: ‘center’, cellsalign: ‘center’ },
    { text: ‘LastName’, dataField: ‘lastname’, width: 90, align: ‘center’, cellsalign: ‘center’ }
    ]
    }
    );

    var firstNameCell = $(‘div .jqx-grid-column-header:eq(1)’);
    firstNameCell.css(‘background-color’, ‘rosybrown’);
    });
    </script>
    </head>
    <body>
    <div id=”grid”></div>
    </body>
    </html>

    • This topic was modified 5 years, 8 months ago by  nostromo.
    • This topic was modified 5 years, 8 months ago by  nostromo.
    Problem color head json #102824

    Martin
    Participant

    Hello nostromo,

    This happens because when you use url in the source, instead of localdata,
    your code for applying css to the header cell is executed before the grid is rendered.
    To fix this, move the code in the ready callback of the grid:

    $("#grid").jqxGrid(
    {
       source: dataAdapter,
       width: 500,
       ready: function () {
          let firstNameCell = $('.jqx-grid-column-header:eq(1)');
          firstNameCell.css('background-color', 'rosybrown');
       },
       columns: [
          { text: 'FirstName', dataField: 'firstname', width: 80, align: 'center', cellsalign: 'center' },
          { text: 'LastName', dataField: 'lastname', width: 90, align: 'center', cellsalign: 'center' }
       ]
     }
     );

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    Problem color head json #102830

    nostromo
    Participant

    Excellent!!!

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

You must be logged in to reply to this topic.