Intersoft Community - WebGrid Enterprise - Change style of a row on clientside OnInitializeRow event

Change style of a row on clientside OnInitializeRow event

yudi — Wed, 25 Jan 2012 03:44:59 GMT

Yes, you are correct. By using client data binding means that WebGrid will stripped several processes from the data binding, initialization (including initialize row) and rendering process in server-side.

The following list describes the new client side events related to client binding feature.

OnCustomAggregate – fired when WebGrid needs to perform custom aggregation for column which AggregateType is set to Custom.
OnInitializeRow – fired when a row is initialized.
OnInitializeCell – fired when a row requires synchronization.
OnSynchronizeRow – fired when a row requires synchronization.
OnSynchronizeCell – fired when a cell required synchronization.
OnDataSourceChanged – fired when data source has been changed.
OnDataBound – fired when data binding process is completed.
OnPreRender – fired before WebGrid enters rendering phase.
OnPostRender – fired after rendering operation is completed.

Using GetElement() method in OnInitializeRow client side event will returns null. This happen because the row element is not available yet. Please try to use the OnSynchronizeRow or OnSynchronizeCell client side event. The GetElement() method doesn’t returns null within this event hence you can reach the style properties.

You may refer to ClientBinding_BindingEvents.aspx sample file of WebGridSamples project. This sample shows how each row can be customized during data binding process by using client binding events. This sample used OnInitializeRow and OnSynchronizeRow, two of the most frequently used events to perform pre-rendering and post-rendering tasks.

For instances, recent messages are highlighted in dark red color, messages with large attachments are underlined, and unread messages should have its preview row expanded. See ASPX page to learn more about the extensibility enabled by client binding events.

Hope this helps.

Change style of a row on clientside OnInitializeRow event

somer@optima.com.tr — Tue, 24 Jan 2012 01:41:19 GMT

Dear Yudi,
I'm sorry that i forgot to mention that i'm using clientside binding so i think i have to call clientside OnInitializeRow event on the clientside. In the clientside OnInitializeRow event, i tried to change color, backgroundcolor of a row, or a cell, but not luck.
In the event, GetElement() returning null, so i cant reach style properties.
As a sample code below returning null:

    <script type="text/javascript">        function GridOnInitializeRow(controlId, row) {
            alert(row.GetElement());
            return true;
        }
    </script>

so code below throws exception:

    <script type="text/javascript">
        function GridOnInitializeRow(controlId, row) {
            var rowElement = row.GetElement();
            rowElement.style.color = "red";
            return true;
        }
    </script>

Change style of a row on clientside OnInitializeRow event

yudi — Mon, 23 Jan 2012 20:39:02 GMT

To change a row style (background color) depends on a row’s given column’s value is similar to CustomizeCellAlignment.aspx sample file of WebGrid. The sample is available in WebGridSamples project (start > All Programs > Intersoft WebUI Studio 2011 R2 SP1 > WebUI Studio for ASP.NET > WebGrid 7 > C# or VB Samples) or check the live sample at http://live.intersoftpt.com/cs/WebGrid/CustomizeCellAlignment.aspx?noframe=1.

The sample demonstrates how to customize cell alignment in WebGrid. In the sample, all of integer columns’s horizontal alignment is set to right-align and programmatically set horizontal alignment to center if the CategoryID is equal to “1” or “7”.
In order to change the background color, please try to use following snippet code.

protected void WebGrid1_InitializeRow(object sender, ISNet.WebUI.WebGrid.RowEventArgs e)
{
    // do some validation
    if (Convert.ToString(e.Row.Cells.GetNamedItem("CategoryID").Text) == "1" || Convert.ToString(e.Row.Cells.GetNamedItem("CategoryID").Text) == "7")
    {
        ...
        e.Row.Cells.GetNamedItem("SupplierID").Style.BackColor = System.Drawing.Color.Red;
        ...
    }
}

Hope this helps.

Change style of a row on clientside OnInitializeRow event

somer@optima.com.tr — Mon, 23 Jan 2012 05:55:40 GMT

I would like change a rows style (background color, etc) depends on a row's given column's value. When I try to get row's element, it returns null; so i cant change style properties.
Can you advise a way to do it?