This is a migrated thread and some comments may be shown as answers.

Client side selecting

4 Answers 318 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mats asked on 05 Aug 2008, 10:39 AM

Hi!

I have a RadGrid with client side selecting (ClientSettings.Selecting.AllowRowSelect=true).

I use a Skin (Default) to control the visual appearance of the grid.
For each item in the grid I set the CssClass (corresponding to a row definition in the skin) on server side to get the right appearance (depending on the status of the content, not the GridItemType).

I select some items on client side. It looks good and the "SelectedRow_Default" class will be applied to the selected items on client side. But as soon as I make a postback I will lose the visual appearance of the selected items. The CssClass defined on the server side will be used even if the items are still selected.

If I don't set the CssClass for items on server side then the "selected appearance" will be maintained even after postback.

My question is:
Is it possible to "apply" the "SelectedRow_Default" for all selected items on client side after postback to make sure that they look selected? Or is there an other solution to my problem?

Thanks
/Mats

4 Answers, 1 is accepted

answered on 06 Aug 2008, 11:13 AM

Hi Mats,

The problem seems to originated in the fact that the selected style is applied on row selection (please confirm if this is true) in a client-side event. After postback, even though the selected rows collection is preserved, the select event does not fire implicitly, therefore you do not get your selected item style applied.

To fix this issue, two approached can be applied. One is to set the selected style on the server. This can be done in RadGrid's PreRender event handler:

    
            void RadGrid1_PreRender(object sender, EventArgs e) 
        
            { 
        
                foreach (GridDataItem item in RadGrid1.MasterTableView.Items) 
        
                { 
        
                    if (item.Selected) 
        
                        item.CssClass = "selectedClass"; 
        
                } 
        
            }

Another one is to get RadGrid's client object in the "onload" event of the <body> element:

    
            function page_Load() 
        
            { 
        
                var items = $find('RadGrid1').get_masterTableView().get_selectedItems(); 
        
                for(var i=0; i<items.length; i++) 
        
                { 
        
                   items[i].get_element().style.backgroundColor = "blue"; 
        
                   //this would be the same code you execute in your javascript  
        
                   //method to set the item's style 
        
                } 
        
            }

The two approaches are equivalent. Please see if either of them works for you.

Greetings,
Veli
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 07 Aug 2008, 08:29 AM

Hi Veli!

Thanks for your suggestions. While testing and debugging your second solution I did understand how it works on client side.

On server side I set - item.CssClass="GridRow_Default".
When a selection is made on client side then the selected class is added to the class set on server side - element.className="GridRow_Default SelectedRow_Default".

After understanding that I can combine more than one classes I implemented your first solution (with minor changes):

void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.Items)
    {
        // Check if CssClass is assigned on server side
        if (item.CssClass.Length > 0)
        {
            // Remove the selected class if it exists
            item.CssClass = item.CssClass.Replace("SelectedRow_Default", "").Trim();

            // If selected then add selected class
            if (item.Selected)
                item.CssClass = string.Format("{0} {1}", item.CssClass, "SelectedRow_Default");
        }
    }
}

Thanks again
/Mats