jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Highlight grid cell

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  mger 12 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Highlight grid cell Posts
  • May 31, 2012 at 4:34 pm Highlight grid cell #4502

    mger
    Participant

    Hi,

    I update cell values in a grid with “setcellvalue” dynamically. I would like to eg. highlight the cell background to visually show that there is an update. How can I accomplish that ?

    Thx for your help.

    June 1, 2012 at 5:17 am Highlight grid cell #4517

    Peter Stoev
    Keymaster

    Hi mger,

    You can set a custom Cells Rendering function to the Grid columns by using the ‘cellsrenderer’ property of the columns. The Grid passes 4 params to that function – row, column, cell value and the default HTML used by the Grid for rendering of the current cell. When you set a new value to a cell, you can add the row’s index to the array and use that index in the ‘cellsrenderer’ to change the returned HTML for the edited cells.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                var editedData = new Array();
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    editable: true,
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90,
                          cellsrenderer: function (row, column, value, defaultHTML) {
                              for (var p = 0; p < editedData.length; p++) {
                                  if (editedData[p] == row) {
                                      return '<div style="background: blue; color: white; width:100%; height: 100%;">' + defaultHTML + '</div>';
                                      break;
                                  }
                              }
                              return defaultHTML;
                          }
                      },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox' },
                    ]
                });
                editedData[editedData.length] = 10;
                $("#jqxgrid").jqxGrid('setcellvalue', 10, 'firstname', 'New Value');
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid"></div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    June 4, 2012 at 7:12 am Highlight grid cell #4558

    mger
    Participant

    Thank you for your prompt answer.

    Best regards,

    Mark

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

You must be logged in to reply to this topic.