ListView - Programmatic Binding

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadListView supports client-side databinding to page methods and web services. Client-side HTML templates are used to define the list view layout much the same as server-side databinding. This particular example demonstrates a client-bound RadListView with a grid layout databound to a page method. The method retrieves a list of all online Telerik UI for ASP.NET AJAX demos.

Paging is enabled for the rendered grid layout with the help of a custom jQuery data pager widget. The pager is rendered after the total item count is fetched through a second page method call. Paging is implemented with the help of the client-side RadListView.page() method. The client-side pager widget uses styles from its server-side counterpart - RadDataPager. To load control styles without loading the control itself onto the page, we use RadStylesheetManager and its RegisterSkinnableControl method in Page_PreRenderComplete in the code-behind.

The example also demonstrates how sorting can be implemented by attaching click event handlers to table header cells. As jQuery is loaded by default when using RadListView, we can take advantage of it when working with DOM events. Sorting is achieved by calling the client-side RadListView.sort() method.

RadListView.page() and RadListView.sort() methods, as well as a few others, automatically call the OnCommand event in RadListView. We intercept the event by attaching a javascript event handler, cancel the command to prevent postback, and make page method calls to rebind the list view.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • jquery.pager.js
    • jquery.pager.js
    • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Client.ProgrammaticDataBinding.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                Sys.Application.add_load(function () {
                    demo.listView = $find('<%= RadListView1.ClientID %>');
                    demo.initialize();
                });
            </script>
        </telerik:RadScriptBlock>
        <script type="text/javascript" src="scripts.js"></script>
        <script type="text/javascript" src="jquery.pager.js"></script>

        <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" AllowPaging="true" AllowNaturalSort="true">
            <ClientSettings>
                <DataBinding ItemPlaceHolderID="itemPlaceHolder">
                    <LayoutTemplate>
                        <div class="RadListView RadListView_#= owner.Skin #">
                            <table cellspacing="0">
                                <colgroup>
                                    <col style="width:130px">
                                    <col>
                                    <col style="width:250px">
                                    <col style="width:55px">
                                </colgroup>
                                <thead>
                                    <tr class="rlvHeader">
                                        <th data-field="Control">Control</th>
                                        <th data-field="Title">Demo Title</th>
                                        <th data-field="Category">Category</th>
                                        <th data-field="IsNew">New</th>
                                    </tr>
                                </thead>
                                <tbody id="itemPlaceHolder">
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td id="pagerContainer" colspan="4">
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <tr class="rlvI #= index % 2 !== 0 ? 'rlvA' : ''#">
                            <td>
                                <span class="ctrl">
                                     <span class="logo #= SpriteCssClass #"></span>
                                    #= Control #
                                </span>
                                
                            </td>
                            <td>
                                <a href="#= Url #">#= Title #</a>
                                <span class='#= IsNew ? "qsf-isNew" : ""#'></span> 
                            </td>
                            <td>#= Category #</td>
                            <td>
                                <input type="checkbox" disabled id="isNewCheckBox" />
                            </td>
                        </tr>
                    </ItemTemplate>
                </DataBinding>
                <ClientEvents OnCommand="demo.onListViewCommand" OnTemplateDataBound="demo.templateDataBound"></ClientEvents>
            </ClientSettings>
        </telerik:RadListView>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?