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
10240
How do I reset the css styling of a row during an ajax post-back
posted

Hello,

I am trying to set css to change the styling of a row that will be triggered upon a postback. For this I am handling the Initialize Row event. The problem is I am losing my css styling. How do I change the styling of a row (e.g. row color) upon an ajax post-back?

 

  • 980
    posted

    Hello,

    I had the same issue and I didn't want extra postback + my "colouring" was depending on server-side logic, which couldn't be migrated to JS.

    Perhaps my solution will help someone as yours helped me. In short, I used CustomAJAXResponse.AdditionalProperties.

    So let's assume we have a bunch of cells which style we want to change. 

    1) We form by some logic on the server side the array of these cells. For example,  GridRecordItem[] cells.

    2) We add "addresses" of these cells to customAjaxResponse. There are different ways to do that - using indexes (which I wouldn't recommend because if something in your code sorts the values it can cause problems) or idpairs for rows, I just used row.DataKey in the following code:

    int i = 0;
    foreach (GridRecordItem cell in cells)
    {
        this.WebDataGrid1.CustomAJAXResponse.AdditionalProperties.Add("rowKey" + i.ToString(),
                                                                                                        cell.Row.DataKey);
        this.WebDataGrid1.CustomAJAXResponse.AdditionalProperties.Add("columnKey" + i.ToString(),
                                                                                                        cell.Column.Key);
    i++;
    }
    this.WebDataGrid1.CustomAJAXResponse.AdditionalProperties.Add("Count", i);

    Please note, that for this you must have columnKeys assigned.

    3) In AJAX postback handler on the client side we set our styles.

    function WebDataGrid1_Grid_AJAXResponse(sender, e) {
        var grid = $find('<%= this.WebDataGrid1.ClientID %>');
        var properties = e.get_customResponseObject().AdditionalProperties;
        for (var i = 0; i < properties.Count; i++) {
            var rowKey = properties["rowKey" + i];
            var columnKey = properties["columnKey" + i];
            var row = grid.get_rows().get_rowFromKey(rowKey);
            if (row != null) {
                var cell = row.get_cellByColumnKey(columnKey);
                if (cell != null) {
                   cell.get_element().className = "YourCSSName"; 
                }

            }
        }
    }

  • 10240
    posted

    Hello

    For the row that is losing css on post-back, is this it that you are looking to apply a different css (color) once the row is selected or edited? Or is it that the css that is applied during initialization is getting lost on post-back?

    I have an example that I prepared that applies css in a few ways. The part that is relevant to your scenario, is where I apply css in the webDataGrid initialize row event. Here I apply css for the 'active' cell. I find that for the cell that I make 'active', when I force a post-back, the grid re-loads and the 'active' cell maintains the css after post-back:

     

    protected void WebDataGrid1_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)  
     {

    if (WebDataGrid1.Behaviors.Activation.ActiveCell != null)       
    {

                e.Row.Items[WebDataGrid1.Behaviors.Activation.ActiveCell.Index].CssClass = "test";

            }

        }

     

    Thank you.

    *Sample is attached. Please note that the ig_res folder has been omitted due to file size constraints. For proper styling of the grid you will want to add the ig_res folder. To do so, simple open the web form designer (aspx) and accept the styles when prompted.

    WebDataGrid_ChangeRowColor.zip