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

Client side selecting

4 Answers 292 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mats
Top achievements
Rank 1
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

Sort by
0
Shinu
Top achievements
Rank 2
answered on 05 Aug 2008, 11:08 AM
Hi Mats,

From my understanding the client side row selection will be lost on postback. I have found a help article which explains how to persist row selection in RadGrid. Go through it and see whether it helps.
Persisting the selected rows on sorting/paging/filtering/grouping

Shinu.
0
Mats
Top achievements
Rank 1
answered on 05 Aug 2008, 12:08 PM
Hi Shinu!

Thanks for your quick reply.

Unfortunately  I don't think that your suggestion applies to my problem. I know that the items are still selected on client side after postback - It just doesn't show.

The problem is when I combine CssClass and client selection after postback.

/Mats
0
Veli
Telerik team
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.
0
Mats
Top achievements
Rank 1
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
Tags
Grid
Asked by
Mats
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Mats
Top achievements
Rank 1
Veli
Telerik team
Share this question
or