Programmatically assigning cssclass to row (<tr>) and cell (<td>)

I’m trying to, based on data in the row to set the css class for the row or the cell depending on value.

I’d thought I’d worked out how to go about this from a previous project ( http://forums.infragistics.com/forums/p/44928/244928.aspx#244928 ) but despite using the same code for the grid with only altered columns I can’t repeat the behavior. The closest I’ve been able to get the WHDG to add CLASS=”class” is at the table level.

 

How can I, consistently, set the css class for row and item levels of the grid during run time?

Hello Dotcomdist

The grid uses css selectors to do its styling. Please refer  the following blog which describes in details how to style WebDataGrid . Most of the stuff works for WebHierarchicalDataGrid as well : http://forums.infragistics.com/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx

Hope this helps

 

From the link then I dont see what it is I'm doing wrong.

 Column @ Index 1

 

 

<ig:BoundDataField DataFieldName="some_id" Key="some_id" Width="150px" CssClass="searchTxt">

 

<Header Text="SomeID" />

 

</ig:BoundDataField>

 

 

InitRow Code:

        protected void Report_Grid_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)
        {
  e.Row.CssClass = "summaryRow";
                e.Row.Items[1].CssClass = "summaryCell";
        }

 Rendered Table Output:

 

 

What is it that I'm doing incorrectly that my css class isn't rendered in code? 

Hello,

All looks fine. I’ve did the following:

Declare the css class in the page like this:

 <style type="text/css">
    .styleCell
    {
        background-color : Red !important;    
    } 
    </style>

Important rule is needed in order to override the Item tbody.igg_Item > tr > td calss background property :

The grid is defined like this:

<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" Width="100%" 
         runat="server" Height="350px">
            <ClientEvents Initialize="gridInit"  RowExpanded="rowExpanded"/>
            <Behaviors>
                <ig:Selection CellSelectType="Multiple">
                    <AutoPostBackFlags CellSelectionChanged="True" />
                </ig:Selection>
                <ig:Activation>
                </ig:Activation>
            </Behaviors>
        </ig:WebHierarchicalDataGrid>

Code behind that I’m setting the css class is as follows:

 protected void Page_Load(object sender, EventArgs e)
    {
        WebHierarchicalDataGrid1.InitializeRow +=
            new Infragistics.Web.UI.GridControls

                 .InitializeRowEventHandler(WebHierarchicalDataGrid1_InitializeRow)

    }

    void WebHierarchicalDataGrid1_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)
    {
            e.Row.Items[0].CssClass = "styleCell";
 
    }

The result is on the screenshot below:

Hope this helps.

Hello Dotcomdist,

Let me know if you have any questions wiht this matter.

Thaks