Scheduler with Sortable Columns (ASP.NET WebForms)

How to enable column sorting for resources in the ASP.NET scheduler control. Includes sample C# and VB.NET projects.

Tags: tutorial asp.net c# vb.net scheduler sorting

Downloads

TutorialColumnSorting.VS2012.20140423.zip 1304 kB
Visual Studio 2012 solution with the tutorial source code. Microsoft SQL Server LocalDB database. Includes C# and VB projects.

Features

This tutorial shows how to enable column sorting for 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

License

Licensed for testing and evaluation purposes. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for ASP.NET WebForms. Buy a license.

Scheduler Resource Column Headers

You can define row header columns using HeaderColumns collection.

<DayPilot:DayPilotScheduler
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  >
    <HeaderColumns>
      <DayPilot:RowHeaderColumn Title="Name" Width="80" />
      <DayPilot:RowHeaderColumn Title="Id" Width="80" />
    </HeaderColumns>
</DayPilot:DayPilotScheduler>

Loading Additional Column Data

The first row header column of the scheduler will automatically display the resource name. You can load the data for the additional columns using BeforeResHeaderRender event handler.

protected void DayPilotScheduler1_OnBeforeResHeaderRender(object sender, BeforeResHeaderRenderEventArgs e)
{
  // e.DataItem is only available when resources are reloaded from the database using LoadResources()
  if (e.DataItem != null)
  {
      e.Columns[0].Html = "" + e.DataItem["id"];
  }
}

Protected Sub DayPilotScheduler1_OnBeforeResHeaderRender(ByVal sender As Object, ByVal e As BeforeResHeaderRenderEventArgs)
  ' e.DataItem is only available when resources are reloaded from the database using LoadResources()
  If e.DataItem IsNot Nothing Then
    e.Columns(0).Html = "" & e.DataItem("id")
  End If
End Sub

Column Sorting

In order to activate column sorting, you need to add 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.

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;
  }
}

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 LoadResources() method loads the resources from the database using the specified sorting.

The new structure of Resources will be persisted during the subsequent callbacks.

private void LoadResources(string orderBy)
{
  DayPilotScheduler1.Resources.Clear();
  foreach (DataRow r in GetResources(orderBy).Rows)
  {
      Resource res = new Resource((string)r["name"], Convert.ToString(r["id"]));
      res.DataItem = r;
      DayPilotScheduler1.Resources.Add(res);
  }
}

public DataTable GetResources(string orderBy)
{
  SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [resource]", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
  DataTable dt = new DataTable();
  da.Fill(dt);

  dt.DefaultView.Sort = orderBy;

  return dt.DefaultView.ToTable();

}

Private Sub LoadResources(Optional ByVal orderBy As String = "name")
  DayPilotScheduler1.Resources.Clear()
  For Each r As DataRow In GetResources(orderBy).Rows
    Dim res As New Resource(DirectCast(r("name"), String), Convert.ToString(r("id")))
    res.DataItem = r
    DayPilotScheduler1.Resources.Add(res)
  Next r
End Sub

Public Function GetResources(ByVal orderBy As String) As DataTable
  Dim da As New SqlDataAdapter("SELECT * FROM [resource]", ConfigurationManager.ConnectionStrings("daypilot").ConnectionString)
  Dim dt As New DataTable()
  da.Fill(dt)

  dt.DefaultView.Sort = orderBy

  Return dt.DefaultView.ToTable()

End Function

Full Page Source (.aspx)

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="~/Site.master" Title="Scheduler with Sortable Columns (ASP.NET WebForms)" %>
<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
	<script type="text/javascript" src="js/modal.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <link href='css/main.css' type="text/css" rel="stylesheet" /> 
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<div style="float:left; width: 150px">
    <DayPilot:DayPilotNavigator 
    ID="DayPilotNavigator1"
    runat="server" 
    ShowMonths="3"
    SkiptMonth="3"
    BoundDayPilotID="DayPilotScheduler1"
    />
</div>

<div style="margin-left:150px">
    <DayPilot:DayPilotScheduler
    ID="DayPilotScheduler1" 
    runat="server" 
    DataEndField="eventend"
    DataStartField="eventstart" 
    DataTextField="name" 
    DataIdField="id" 
    DataResourceField="resource"
    ClientObjectName="dps"
    OnCommand="DayPilotScheduler1_Command"
    OnBeforeResHeaderRender="DayPilotScheduler1_OnBeforeResHeaderRender"
    >
        <TimeHeaders>
            <DayPilot:TimeHeader GroupBy="Day" Format="ddd MMMM d, yyyy" />
            <DayPilot:TimeHeader GroupBy="Hour" Format="%h" />
        </TimeHeaders>
        <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>

</div>

</asp:Content>

Full Source Code

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using DayPilot.Web.Ui;
using DayPilot.Web.Ui.Events;
using DayPilot.Web.Ui.Events.Scheduler;

public partial class _Default : System.Web.UI.Page 
{
  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          LoadResources();
          DayPilotScheduler1.DataSource = GetData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate.AddDays(1));
          DayPilotScheduler1.DataBind();
      }

  }

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


  private DataTable GetData(DateTime start, DateTime end)
  {
      SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end))", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
      da.SelectCommand.Parameters.AddWithValue("start", start);
      da.SelectCommand.Parameters.AddWithValue("end", end);

      DataTable dt = new DataTable();
      da.Fill(dt);

      return dt;
  }

  public DataTable GetResources(string orderBy)
  {
      SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [resource]", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
      DataTable dt = new DataTable();
      da.Fill(dt);

      dt.DefaultView.Sort = orderBy;

      return dt.DefaultView.ToTable();

  }

  private void LoadResources(string orderBy)
  {
      DayPilotScheduler1.Resources.Clear();
      foreach (DataRow r in GetResources(orderBy).Rows)
      {
          Resource res = new Resource((string)r["name"], Convert.ToString(r["id"]));
          res.DataItem = r;
          DayPilotScheduler1.Resources.Add(res);
      }
  }

  private void LoadResources()
  {
      LoadResources("name");
  }

  protected void DayPilotScheduler1_OnBeforeResHeaderRender(object sender, BeforeResHeaderRenderEventArgs e)
  {
      // e.DataItem is only available when resources are reloaded from the database using LoadResources()
      if (e.DataItem != null)
      {
          e.Columns[0].Html = "" + e.DataItem["id"];
      }
  }
}

Imports System
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports DayPilot.Web.Ui
Imports DayPilot.Web.Ui.Events
Imports DayPilot.Web.Ui.Events.Scheduler

Partial Public Class _Default
	Inherits System.Web.UI.Page

	Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
		If Not IsPostBack Then
			LoadResources()
			DayPilotScheduler1.DataSource = GetData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate.AddDays(1))
			DayPilotScheduler1.DataBind()
		End If

	End Sub

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


	Private Function GetData(ByVal start As Date, ByVal [end] As Date) As DataTable
		Dim da As New SqlDataAdapter("SELECT * FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end))", ConfigurationManager.ConnectionStrings("daypilot").ConnectionString)
		da.SelectCommand.Parameters.AddWithValue("start", start)
		da.SelectCommand.Parameters.AddWithValue("end", [end])

		Dim dt As New DataTable()
		da.Fill(dt)

		Return dt
	End Function

	Public Function GetResources(ByVal orderBy As String) As DataTable
		Dim da As New SqlDataAdapter("SELECT * FROM [resource]", ConfigurationManager.ConnectionStrings("daypilot").ConnectionString)
		Dim dt As New DataTable()
		da.Fill(dt)

		dt.DefaultView.Sort = orderBy

		Return dt.DefaultView.ToTable()

	End Function

	Private Sub LoadResources(Optional ByVal orderBy As String = "name")
		DayPilotScheduler1.Resources.Clear()
		For Each r As DataRow In GetResources(orderBy).Rows
			Dim res As New Resource(DirectCast(r("name"), String), Convert.ToString(r("id")))
			res.DataItem = r
			DayPilotScheduler1.Resources.Add(res)
		Next r
	End Sub

	Protected Sub DayPilotScheduler1_OnBeforeResHeaderRender(ByVal sender As Object, ByVal e As BeforeResHeaderRenderEventArgs)
		' e.DataItem is only available when resources are reloaded from the database using LoadResources()
		If e.DataItem IsNot Nothing Then
			e.Columns(0).Html = "" & e.DataItem("id")
		End If
	End Sub
End Class

Ask a Question

Annual Leave Booking (ASP.NET, C#, VB, SQL Server)

This tutorial shows how to create an annual leave booking application for ASP.NET. Includes C# and VB.NET source code and sample SQL Server database.

Hotel Room Booking Tutorial (ASP.NET, C#, VB, SQL Server)

ASP.NET web application for managing hotel room reservation. Includes sample code in C# and VB. Sample SQL Server database.

ASP.NET Scheduler Tutorial

Sample web application that uses DayPilot ASP.NET scheduler control to display reservations from a database. Includes a Visual Studio solution with C# and VB projects and an SQL Server database.

Scheduler with Sortable Columns (ASP.NET MVC 5)

How to activate resource column sorting in the ASP.NET MVC scheduler component. Sample Visual Studio 2012 solution available for download (C#, SQL Server).

Shift Scheduling Tutorial (ASP.NET, SQL Server, C#, VB.NET)

ASP.NET project that demonstrates how to use Calendar and Scheduler controls to manage a simple shift schedule. Supports recurring events and conflict detection.

Nurse Shift Scheduling (ASP.NET, C#)

Sample ASP.NET web application for displaying nurse shift schedule for 24/7 operations. Visual Studio solution available for download (C#, VB source code).

Courtroom Schedule Tutorial (ASP.NET, C#, VB.NET)

A simple ASP.NET application that allows creating courtroom reservations from a list of unscheduled cases using drag&drop.

Scheduler Printing (ASP.NET, C#, VB.NET)

How to print ASP.NET scheduler using PNG export feature. Includes Visual Studio 2012 project with C# and VB projects.

Restaurant Table Reservation Tutorial (ASP.NET, C#, VB.NET)

ASP.NET web application project for managing restaurant table reservations. Finds a free table using a fast filter. Highlights conflicting reservations.

DayPilot Code

Scheduler with Sortable Columns (ASP.NET WebForms)

Downloads

Features

License

Scheduler Resource Column Headers

Loading Additional Column Data

Column Sorting

Full Page Source (.aspx)

Full Source Code

Share

Ask a Question

DayPilot Code

Scheduler with Sortable Columns (ASP.NET WebForms)

Downloads

Features

License

Scheduler Resource Column Headers

Loading Additional Column Data

Column Sorting

Full Page Source (.aspx)

Full Source Code

Share

Ask a Question

Related Articles