ASP.Net ListView Grouping by Data Field?

Question

I uses asp.net listview control to display the details. Each item has the group details. For demo purposes group is hard coded.

I want to display the listview as shown below

Right now, I have this

Code:

    <asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
    <LayoutTemplate>
        <section class="quick-links">
            <div class="row">
                <div class="dfwp-column" style="width: 100%">
                    <div class="slm-layout-main groupmarker">
                        <ul class="dfwp-list">
                            <asp:PlaceHolder ID="groupContainer" runat="server" />
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </LayoutTemplate>
    <GroupTemplate>
        <span>Group</span>
        <asp:PlaceHolder ID="itemContainer" runat="server" />
    </GroupTemplate>
    <ItemTemplate>
        <li>
            <div class="item">
                <div class="link-item">
                    <asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
                    </a>
                </div>
            </div>
        </li>
    </ItemTemplate>
    <EmptyDataTemplate>
        <span>No data was returned.</span>
    </EmptyDataTemplate>
</asp:ListView>

How do I achieve this?

Answer 1

For a flexible solution, you can use nested ListView

You will need to update your HTML and CSS to get the desired appearance.

ASPX Code

<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
    <LayoutTemplate>
        <section class="quick-links">
            <div class="row">
                <div class="dfwp-column" style="width: 100%">
                    <div class="slm-layout-main groupmarker">
                        <asp:PlaceHolder ID="groupContainer" runat="server" />
                    </div>
                </div>
            </div>
        </section>
    </LayoutTemplate>
    <ItemTemplate>
        <ul class="dfwp-list">
            <li><%# Eval("Title") %></li>
            <div>
                <asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
                    <LayoutTemplate>
                        <section class="quick-links">
                            <div class="row">
                                <div class="dfwp-column" style="width: 100%">
                                    <div class="slm-layout-main groupmarker">
                                        <ul class="dfwp-list">
                                            <asp:PlaceHolder ID="itemContainer" runat="server" />
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li>
                            <div class="item">
                                <div class="link-item">
                                    <asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ItemTemplate>
                </asp:ListView>
            </div>
        </ul>
    </ItemTemplate>
    <EmptyDataTemplate>
        <span>No data was returned.</span>
    </EmptyDataTemplate>
</asp:ListView>

In the code behind you need to bind the child ListView in parent ItemDataBound event.

protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {

        itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
        itemsListView.DataBind();
    }
}

Answer 2

It is not quite clear what kind of grouping you want. However the ListView is limited in what it can do.

First of all you can only get a grouping by a fixed number of items. You can define that number with the GroupItemCount property. Your code would then look like this

<asp:ListView ID="HyperLinkListView" GroupItemCount="2" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">

And generate in html like this

GROUP
 My car video
 My sample video
GROUP
 Another sample video
 Item 4

Assuming you want GROUP A and GROUP B etc, you would normally use a binding expression, which looks like this

<GroupTemplate>
    <span>Group <%# Container.DataItemIndex %></span>
    <asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>

However the GroupItemTemplate is not part of the DataBind process, so getting and index based system will not work like that.

So a client side solution is needed if you want to add A, B etc. So first add a placeholder for the alhpa character and give the <span> a class so jQuery can find it. I've used {index} and groupIndex

<GroupTemplate>
    <span class="groupIndex">Group {index}</span>
    <asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>

Now with a simple jQuery method, all the placeholders are replaced with their correct alpha character.

<script type="text/javascript">
    $(document).ready(function () {
        $('.quick-links .groupIndex').each(function (index, element) {
            var char = String.fromCharCode(65 + index);
            $(this).html($(this).html().replace('{index}', char));
        });
    });
</script>

Note that the .quick-links comes from your <section class="quick-links"> part in the LayoutTemplate.