(De)Select all items in ListView using templates

[Datamex]

I must say I haven't seen anything like this on the forums, but possibly I overlooked a thread or demo. However, I am using a ListView with the following templates: LayoutTemplate, InsertItemTemplate, ItemTemplate, SelectedItemTemplate and EditItemTemplate. An item consists of a LinkButton. See example below:

<asp:LinkButton ID="ItemLinkButton" runat="server" CommandName="Select">
    <%# Eval("Value1") %><br />
    <%# Eval("Value2") %><br />
    <%# Eval("Value3") %><br />
    <%# Eval("Value4") %>
</asp:LinkButton>

where "Value#" is just a string from a certain datasource. As you can see this LinkButton has its CommandName property set to "Select". When you select a single item, the selected item will appear using the SelectItemTemplate (that is with inversed colors as the normal ItemTemplate). But, I have a problem with (de)selecting all items.

This ListView currently contains 2 items. The LayoutTemplate holds a button to select or deselect all items in the ListView. This button is linked through the ItemCommand event ("onitemcommand") with its CommandName property set to "DeSelectAll". In my code-behind I do:

protected void RadListView_ItemCommand(object sender, RadListViewCommandEventArgs e)
{
    if (e.CommandName == "DeSelectAll")
    {
        RadListView rlv = sender as RadListView;
        if (rlv.SelectedItems.Count == rlv.Items.Count)
        {
            foreach (RadListViewDataItem item in rlv.SelectedItems)
            {
                item.Selected = false;
            }
        }
        else
        {
            foreach (RadListViewDataItem item in rlv.Items)
            {
                item.Selected = true;
            }
        }
    }
}

As I said the ListView currently contains 2 items. So whenever the button - to select or deselect all items - is clicked this event is fired. So when you are debugging it looks like it's working, but visually it's far from what you actually want.

Firstly (situation 1), if no item has been preselected (both items are not selected) and you click the button visually nothing happens, while under water (code) the item.Selected properties are changed accordingly. When you click the button for the second time both items change to the SelectedItemTemplate, while under water the item.Selected properties are set back to "false". Notice, you have to click twice in order to get this result.

Secondly (situation 2), if one of two items has been preselected (this works as mentioned earlier) (1) and you click the button visually nothing happens, while under water the item.Selected properties are changed accordingly (both items have their Selected property set to "true") (2). Notice that you can't see any difference visually (the preselected item still is the only visible selected item). Next, click the item - which visually still is the only selected item - and be amazed this item deselects and the other gets selected (3). To make one another clear, let's schematize this:

1. item 1: selected, item 2: not selected, visibility: item 1 uses SelectedItemTemplate, item 2 uses ItemTemplate
2. item 1: selected, item 2: selected, visibility: item 1 uses SelectedItemTemplate, item 2 uses ItemTemplate
3. item 1: not selected, item 2: selected, visibility: item 1 uses ItemTemplate, item 2 uses SelectedItemTemplate

As you can see, step 2 is the problem. The property "Selected" for both items is set to "true", but visually item 2 is not using the correct template. Instead of using ItemTemplate it should be using SelectedItemTemplate. Notice that in both situations you have to click twice to visually get a result.

Any thoughts or suggestions on how to select or deselect all items in a ListView?

Thanks in advance.

Regards,
Datamex

[Vasil]

Hi Datamex,

You should rebind the RadListView after deselecting the elements. I tried this code and it deselects all elements properly:

ASPX:

<telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource"
      AllowMultiItemSelection="true" OnItemCommand="RadListView1_ItemCommand">
      <ItemTemplate>
        <asp:LinkButton ID="ItemLinkButton" runat="server" CommandName="Select">
     Select this item
        </asp:LinkButton>
        <br />
      </ItemTemplate>
      <SelectedItemTemplate>
        <asp:LinkButton ID="ItemLinkButton" runat="server" CommandName="DeSelect">
     Deselect this item
        </asp:LinkButton>
        <asp:LinkButton ID="LinkButton1" runat="server" CommandName="DeSelectAll">
     Deselect all items
        </asp:LinkButton>
        <br />
      </SelectedItemTemplate>
    </telerik:RadListView>

C#:

protected void RadListView1_NeedDataSource(object sender, Telerik.Web.UI.RadListViewNeedDataSourceEventArgs e)
{
    (sender as RadListView).DataSource = new int[] { 1, 2, 3, 4 };
}
protected void RadListView1_ItemCommand(object sender, RadListViewCommandEventArgs e)
{
    if (e.CommandName == "DeSelectAll")
    {
        RadListView radListView = sender as RadListView;

        foreach (RadListViewDataItem item in radListView.SelectedItems)
        {
            item.Selected = false;
        }
        RadListView1.Rebind();
    }
}

All the best,
Vasil
the Telerik team

[Datamex]

Hi Vasil,

Thanks for the reply! I think I missed the "Rebind" method. I use the "Class Members" page of a certain Telerik ASP.NET control (for example RadListView: http://www.telerik.com/help/aspnet-ajax/telerik.web.ui-telerik.web.ui.radlistview_members.html) most of the time when I'm developing, but the description of the "Rebind" method is empty. It would be useful for developers to appropriate describe any property and method of a control. Nevertheless, I just added < RadListView >.Rebind() and it works smooth now! Thanks for the supportive response.

Regards,
Datamex

[Vasil]

Hi Datamex,

Thank you for your feedback. We will review the summaries of the public methods and fields and update them in the near future.

Kind regards,
Vasil
the Telerik team

[Vasssek]

Hi,

I would like to ask why for deselect all items this method works:

foreach (RadListViewDataItem item in radListView.SelectedItems)
        {
            item.Selected = false;
        }

 

and this isn't work:

RadListView1.SelectedItems.Clear();

 

Is it bug or I do something wrong ?

Best regards

Vasssek

[Marin Bratanov]

Hi Vasssek,

The .Clear() method merely clears a collection, while the Selected property can execute logic. 

You would get similar behavior if you have a List<someObject> and .Clear() it, or, if you change a property or call a method on each object in the list.

Regards,
Marin Bratanov
Progress Telerik