Tutorial: Scheduler with Sortable Columns for ASP.NET WebForms (C#, VB.NET)

How to sort columns with resources details in the ASP.NET scheduler control. Includes sample C# and VB.NET projects.
Apr 23, 2014
asp.net scheduler column sorting

Tutorial

Features

This sample Visual Studio 2012 project shows how to enable column sorting in the DayPilot ASP.NET scheduler control.

  • ASP.NET scheduler control displaying reservation data for multiple resources
  • Resources with multiple data columns (name, id)
  • Resource data loaded from the database (SQL Server)
  • Sorting the resources using column headers
  • C# source code
  • VB.NET source code
  • Visual Studio 2012 solution

Scheduler column sorting sample code (C#, VB.NET)

The column sorting can be activated by adding a hyperlink (<a> tag) to the column header:

<DayPilot:DayPilotScheduler
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  ClientObjectName="dps"
  OnCommand="DayPilotScheduler1_Command"
  >
    <HeaderColumns>
      <DayPilot:RowHeaderColumn Title="<a href='javascript:dps.commandCallBack(&quot;sort&quot;, { field: &quot;name&quot; }); '>Name</a>" Width="80" />
      <DayPilot:RowHeaderColumn Title="<a href='javascript:dps.commandCallBack(&quot;sort&quot;, { field: &quot;id&quot; }); '>Id</a>" Width="80" />
    </HeaderColumns>
</DayPilot:DayPilotScheduler>

The commandCallBack() call will invoke Command event handler on the server side.

The event handler will reload the resources using the new order.

C#

protected void DayPilotScheduler1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
    case "sort":
      LoadResources((string)e.Data["field"]);
      DayPilotScheduler1.DataSource = GetData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate.AddDays(1));
      DayPilotScheduler1.DataBind();
      DayPilotScheduler1.Update();
      break;
  }
}

VB

Protected Sub DayPilotScheduler1_Command(ByVal sender As Object, ByVal e As CommandEventArgs)
  Select Case e.Command
    Case "sort"
      LoadResources(CStr(e.Data("field")))
      DayPilotScheduler1.DataSource = GetData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate.AddDays(1))
      DayPilotScheduler1.DataBind()
      DayPilotScheduler1.Update()
  End Select
End Sub

The tutorial source code (C#, VB) is available for download.

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java