Telerik Listview Header sort

[Nandini]

Hi telerik team,
I am trying to do listview column sort on header click. If I click once on header say ascending order and if already in ascending then descending order. I went through lot of trial but I am able to sort only with button outside listview.
Can you please direct me on how to do it.
<

     <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ph1" 
                   ClientIDMode="Static"  onsorting="RadListView1_Sorting" 
                   DataKeyNames="SiteID" DataSourceID="SqlDataSource1" AllowMultiFieldSorting="true">
               <ItemTemplate>
                    <tr align="left">
                        <td align="center">
                            <asp:Label ID="Label1" Text='<%#Eval("SiteID") %>' runat="server" />
                        </td>
                        <td align="left">
                            <asp:Label ID="Label2" Text='<%#Eval("DisplayName") %>' runat="server" />
                        </td>
                        <td >
                            <asp:Label ID="Label3" Text='<%#Eval("RegularHrs") %>' runat="server" />
                        </td>
                        <td >
                            <asp:Label ID="Label4" Text='<%#Eval("OverTimeHrs") %>' runat="server" />
                        </td>
                    </tr>
                </ItemTemplate>  
                <LayoutTemplate>  
                <center>
                    <table cellpadding="10" cellspacing="0" class="stripe" width="100%" id="tblResults">
                        <tr>
                            <td width="50" align="center"><a>ID</a></td>
                            <td width="100" align="left"><a href="#" onclick="RadListView1_Sorting();return false;">Site Name</a></td>
                            <td align="left"><h3>RH</h3></td>
                            <td width="75" align="left"><h3>OTH</h3></td>
                            <td width="135" align="left"><h3>Sent To</h3></td>
                        </tr> 
                        <asp:PlaceHolder ID="ph1" runat="server" />                                               
                    </table>
                    </center>
                                                   
                </LayoutTemplate>
                </telerik:RadListView>

>

[Princy]

Hi Nandini,

Try binding the RadListView in the NeedDataSource event. Following is the sample code that I tried to achieve your scenario.

ASPX:

<telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ph1" ClientIDMode="Static" DataKeyNames="SiteID" AllowMultiFieldSorting="true" OnSorting="RadListView1_Sorting" OnNeedDataSource="RadListView1_NeedDataSource">
  <ItemTemplate>
    <tr align="left">
      <td align="center">
         <asp:Label ID="Label1" Text='<%# Bind("SiteID") %>' runat="server" />
      </td>
      <td align="left">
         <asp:Label ID="Label2" Text='<%# Bind("DisplayName") %>' runat="server" />
      </td>
      <td>
         <asp:Label ID="Label3" Text='<%# Bind("RegularHrs") %>' runat="server" />
      </td>
      <td>
         <asp:Label ID="Label4" Text='<%# Bind("OverTimeHrs") %>' runat="server" />
      </td>
    </tr>
  </ItemTemplate>
  <LayoutTemplate>
    <center>
      <table cellpadding="10" cellspacing="0" class="stripe" width="100%" id="tblResults">
         <tr>
           <td width="50" align="center">
              <a>ID</a>
           </td>
           <td width="100" align="left">
              <asp:LinkButton ID="btn" runat="server" CommandName="Sort" Text="Site Name" />
           </td>
           <td align="left">
              <h3>RH</h3>
           </td>
           <td width="75" align="left">
              <h3>OTH</h3>
           </td>
           <td width="135" align="left">
              <h3>Sent To</h3>
           </td>
         </tr>
         <asp:PlaceHolder ID="ph1" runat="server" />
      </table>
    </center>
  </LayoutTemplate>
</telerik:RadListView>

C#:

public static string sortOrder = "ASC";
public DataTable GetDataTable(string selectQuery)
 {
   String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
   SqlConnection conn = new SqlConnection(ConnString);
   SqlDataAdapter adapter = new SqlDataAdapter();
   adapter.SelectCommand = new SqlCommand(selectQuery, conn);
   DataTable dataTable = new DataTable();
   conn.Open();
   try
    {
      adapter.Fill(dataTable);
    }
   finally
    {
      conn.Close();
    }
   return dataTable;
 }
protected void RadListView1_Sorting(object sender, Telerik.Web.UI.RadListViewSortEventArgs e)
 {
   RadListView1.SortExpressions.Clear();
   if (sortOrder == "ASC")
    {
      RadListView1.DataSource = GetDataTable("SELECT [SiteID], [DisplayName], [RegularHrs], [OverTimeHrs] FROM [Site]  ORDER BY DisplayName " + sortOrder + "");
      sortOrder = "DESC";
    }
   else
    {
      RadListView1.DataSource = GetDataTable("SELECT [SiteID], [DisplayName], [RegularHrs], [OverTimeHrs] FROM [Site]  ORDER BY DisplayName " + sortOrder + "");
      sortOrder = "ASC";
    }
   RadListView1.Rebind();
 }
protected void RadListView1_NeedDataSource(object sender, Telerik.Web.UI.RadListViewNeedDataSourceEventArgs e)
 {
   RadListView1.DataSource = GetDataTable("SELECT [SiteID], [DisplayName], [RegularHrs], [OverTimeHrs] FROM [Site]");
 }

Hope this helps.

Regards,
Princy.

[Herbert]

Another option to achieve multi-column sorting with NeedDataSource is to add an extra column to the select statement.

Example:

sql = "select *, cast(isnull(Startseite,'0') as integer) as StartPage, BuchISBN + '-' + right('00000' + isnull(Startseite,''),5) as StandardSort from userChapterData "

Inside the list view I only need one column to set as CommandArgument:

<td class="lvhead" style="white-space: nowrap">RecordIdentifier
   <asp:ImageButton ID="SortByRecordIdentifierAsc" runat="server" ImageUrl="~/assets/sortup.gif" CommandName="Sort" CommandArgument="StandardSort ASC" />
   <asp:ImageButton ID="SortByRecordIdentifierDesc" runat="server" ImageUrl="~/assets/sortdown.gif" CommandName="Sort" CommandArgument="StandardSort DESC" />
</td>

The advantage is that you can use all options inside a select statement or even put the entire select into a view.