Telerik Listview Header sort

2 posts, 0 answers
  1. Nandini
    Nandini avatar
    2 posts
    Member since:
    Jan 2012

    Posted 17 Jul 2012 Link to this post

    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>
    >
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top