Hi:

I think you may find this sample helful as well.

http://www.componentsforjsf.com/WebGridExamples/faces/examplePages/customBackgroundForCell.jsp

Best,

Jim

Hi drumilbhattad, Row background color could be set in serverside as well. Please follow below steps.

Thank you!

Swetha

1) In JSP: Bind all the <ig:column> 'style' attribute to bean as shown below.

<ig:gridView

    dataSource="#{webGridRowStyleBean.dataList}"

    id="grid">   

      <ig:column style="#{DATA_ROW.basicBg}">

        <f:facet name="header">

            <h:outputText value="First Name" />

        </f:facet>

        <h:outputText value="#{DATA_ROW.firstName}" />       

    </ig:column>

…

</ig:gridView>

2) Backing Bean: In getDataList() method check if salary is >=10000 and set ‘background-color’

private List getDataSource() throws Exception{

            dataSource = new ArrayList();

            PersonInfo personInfo = new PersonInfo("Boyle", "Allene", 8000 , "768-4994");

            dataSource.add(personInfo);        

            personInfo = new PersonInfo("Rolfson", "Karine", 12000 , "663-6448");

            dataSource.add(personInfo);        

            personInfo = new PersonInfo("Roberts", "Blaise", 9000 , "037-9519");

            dataSource.add(personInfo);        

            personInfo = new PersonInfo("Okuneva", "Anaya", 15000 , "695-8691");

            dataSource.add(personInfo);        

            personInfo = new PersonInfo("Ken", "Steve", 10000 , "147-2589");

            dataSource.add(personInfo);

            return dataSource;

      }

      public List getDataList() throws Exception{

            List list = getDataSource();       

            Iterator iterate = list.iterator();

            while(iterate.hasNext()){

                  PersonInfo personObj = (PersonInfo) iterate.next();

                  if(personObj.getSalary() >= 10000){

                        personObj.setBasicBg("background-color: red");

                  }                

            }

            return list;     

      }

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

newRowCell.elm.style.cssText = "color:red; background-color:blue;";

}

// get the i row and select it

var row = rowList[i];

var newRow = new IgGridRow(row);

newRow.select();

}

}

}

}

}

}

Let me know if you need any other assistance.

Sincerely,

Tsvtelina