jQuery UI Widgets › Forums › Grid › Problem color head json

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Problem color head json Posts
  • November 16, 2018 at 4:59 pm 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>

    November 19, 2018 at 8:45 am 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/

    November 19, 2018 at 1:02 pm Problem color head json #102830

    nostromo
    Participant

    Excellent!!!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.