(De)Select all items in ListView using templates

4 posts, 0 answers
  1. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 23 Mar 2011 Link to this post

    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
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 28 Mar 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 28 Mar 2011 Link to this post

    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
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 28 Mar 2011 Link to this post

    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
Back to Top