Formatting Date Column based on day of week with ComponentOne Wijmo GridView
ComponentOne's Wijmo GridView is an advanced GridView control which works perfectly in bound mode. There are times when you may want to bind your Wijmo GridView to a data source which has Date columns as well. In this blog, we are going to learn how we can format this date column based on the day of the week. After binding Wimo GridView to an AccessDataSource we need to catch the RowDataBound event for Wijmo GridView and check for the day in date column cell. Once we know the day of week in the DateColumn cell, we then set the backcolor for the cell as per the day of week. For example, for Sunday the backcolor of the cell is set to Indigo , for Monday it is Red, for Tuesday it is set to Green and so on.... Please have a look at the code used to achieve this formatting.
protected void C1GridView1_RowDataBound(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowEventArgs e)
{
if (e.Row.RowType == C1GridViewRowType.DataRow)
{
DateTime dt = new DateTime(long.Parse(e.Row.Cells[1].Text) * 10000).AddYears(1969);
if (dt.ToString("dddd") == "Monday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Red;
}
if (dt.ToString("dddd") == "Tuesday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Green;
}
if (dt.ToString("dddd") == "Wednesday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Yellow;
}
if (dt.ToString("dddd") == "Thursday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Blue;
}
if (dt.ToString("dddd") == "Friday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Orange;
}
if (dt.ToString("dddd") == "Saturday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Violet;
}
if (dt.ToString("dddd") == "Sunday")
{
e.Row.Cells[1].BackColor = System.Drawing.Color.Indigo;
}
}
}
One important thing in the above code is that the Wijmo Gridview date column returns JSON string for cell's Text when 'e.Row.Cells[1].Text' is used .To parse this string in to Date object the formula used is : DateTime dt = new DateTime(long.Parse(e.Row.Cells[1].Text) * 10000).AddYears(1969); The resulted Wijmo Gridview looks like the image shown below: Please download the sample application from here to understand the implementation. Download Sample Application Please feel free to leave your suggestions, questions, complaints etc. as comments below.