Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Dynamic Row Selection

I want to highlight some of the rows of GridView depending on certain condition.

For eg.

If a web grid contains 3 colums Emp id, Emp Name and Salary then I want to highlight those rows with Red color whose salary is greater than some value say 10000.

Can I know how to implement this using web grid?

No Data
  • 19693

    Hello ,

    There is one way to do this by using JS function.

    The below one changes the style of every row which contains “a” letter inside the third column

    and selects the row. This function should be called inside the onload method of the body tag and

    pageChanged property of the ig:gridClientEvents. The whole jsp is in the attached file.


    function changeStyle() {


    var elm = document.getElementById("formID:gridID");

    // grid component id

    if (elm != null) {

    var mygrid = ig.grid.getGrid(elm);


    if (!ig.isNull(mygrid)) {

    var gridbody = mygrid.getBody();

    if (!ig.isNull(gridbody)) {

    // get all the the list of rows from the grid

    var rowList = mygrid.getRows();


    // iterate through the rows of the grid

    for (i = 0; i < mygrid.getRowCount(); i++) {

    // get the third cell from the i row

    var cell = gridbody.getCell(i, 2);

    var newCell = new IgGridCell(cell.elm);

    var text = newCell.get_text();

    // check the content of the cell about the desired value

    if (text.match("a")) {

    // iterate through all the columns of the row

    // and change their style

    for (j = 0; j < mygrid.getColCount(); j++) {

    var rowCell = gridbody.getCell(i, j);

    var newRowCell = new IgGridCell(rowCell.elm); = "color:red; background-color:blue;";


    // get the i row and select it

    var row = rowList[i];

    var newRow = new IgGridRow(row);;








    Let me know if you need any other assistance.