All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Sorting.BasicSorting.DefaultCS"CodeFile="DefaultCS.aspx.cs" %> <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml'> <head runat="server"> <title>Telerik ASP.NET Example</title> <link href="styles.css" rel="stylesheet" type="text/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 no-bg"> <qsf:MessageBox Type="General" ID="PopulationInfo" runat="server"> <asp:Label ID="Label1" Text="Sort expression:" runat="server"></asp:Label> </qsf:MessageBox> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" /> <telerik:AjaxUpdatedControl ControlID="Panel1" /> <telerik:AjaxUpdatedControl ControlID="Label1" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="Panel1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="Panel1"/> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Silk"></telerik:RadAjaxLoadingPanel> <asp:Panel ID="Panel1" runat="server"> <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" ItemPlaceholderID="PlaceHolder1" DataSourceID="SqlDataSource1" AllowMultiFieldSorting="true" AllowPaging="true"> <ItemTemplate> <div class="itemStyle"> <asp:Label ID="CustomerLabel" runat="server" Text='<%# Eval("CustomerID") %>' Visible="false"></asp:Label> <asp:Label CssClass="labelLarge" ID="ContactNameLabel" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label> <div class="labelSmall"> <asp:Label ID="CompanyNameLabel" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label><br /> <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>'></asp:Label><br /> <asp:Label ID="CountryLabel" runat="server" Text='<%# Eval("Country") %>'></asp:Label><br /> </div> <div class="labelPhone"> <asp:Label ID="PhoneLabel" runat="server" Text='<%# Eval("Phone") %>'></asp:Label> </div> </div> </ItemTemplate> <LayoutTemplate> <div class="listLayout"> <asp:Panel ID="PlaceHolder1" runat="server"> </asp:Panel> <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1" CssClass="dataPager" PageSize="6"> <Fields> <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"></telerik:RadDataPagerButtonField> <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="10"></telerik:RadDataPagerButtonField> <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"></telerik:RadDataPagerButtonField> </Fields> </telerik:RadDataPager> </div> </LayoutTemplate> </telerik:RadListView> </asp:Panel> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [City], [ContactName], [Country], [Phone] FROM [Customers]"></asp:SqlDataSource> <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server"> <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1"> <Views> <qsf:View> <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow" Title="Multiple/simple sorting"> <qsf:CheckBoxList ID="CheckBox1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBox1_SelectedIndexChanged"> <asp:ListItem Text="Allow multiple sorting" Selected="True"></asp:ListItem> </qsf:CheckBoxList> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow" Title="Data Fields"> <qsf:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true"> <asp:ListItem Text="CompanyName"></asp:ListItem> <asp:ListItem Text="City"></asp:ListItem> <asp:ListItem Text="ContactName"></asp:ListItem> <asp:ListItem Text="Country"></asp:ListItem> </qsf:CheckBoxList> <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" Visible="false"> <asp:ListItem Text="CompanyName"></asp:ListItem> <asp:ListItem Text="City"></asp:ListItem> <asp:ListItem Text="ContactName"></asp:ListItem> <asp:ListItem Text="Country"></asp:ListItem> </qsf:RadioButtonList> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow" Title="Sort Order"> <qsf:RadioButtonList ID="RadioButtonList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList2_SelectedIndexChanged"> <asp:ListItem Text="Ascending"></asp:ListItem> <asp:ListItem Text="Descending"></asp:ListItem> <asp:ListItem Text="None"></asp:ListItem> </qsf:RadioButtonList> </qsf:ConfiguratorColumn> </qsf:View> </Views> </qsf:ConfiguratorPanel> </telerik:RadAjaxPanel> </form> </body> </html>