Articles → LIGHT SWITCH 2011 → Datagrid Header Text Wrapping In Lightswitch 2011

Datagrid Header Text Wrapping In Lightswitch 2011

In this article I will explain how to do column header text wrapping in lightswitch 2011.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create lightswitch project?
How to create an entity in lightswitch?
How to create a screen in lightswitch?
What is the ControlAvailable event in lightswitch?
Basics about Silverlight.
How to create DataTemplate in Silverlight?

Steps For Execution

In this tutorial I will execute certain steps for the demonstration of grid header column text wrapping. These steps are

Create a new lightswitch project
Create a new table
Add new screen
Add data in the table
Add ControlAvailable event for the grid
Add code for column wrap

Let us execute each step

Create A New Lightswitch Project

First of all create a new lightswitch project. See the screen shot below for project structure.

Picture showing the project structure of the lightswitch application in visual studio

Click to Enlarge

Create A New Table

Create a new table in light switch. See the screenshot below for table structure

Picture showing the sample table in the lightswitch designer

Click to Enlarge

I have created long column names deliberately so that we can wrap the header text in case the text doesn’t fit the column width.

Add New Screen

Add a new screen of type ‘Editable Grid Screen’. See the screen shot below for screen designer

Picture showing the editable grid screen in the designer window

Click to Enlarge

Add Data In The Table

Once the screen is created, add data in the table. See the screen shot below for table data

Picture showing the datagrid with data in the editable grid screen

Click to Enlarge

As you can see in the figure above the header text is long and is not fitting in the width of column, but still the header is not wrapped.

Add Controlavailable Event For The Grid

Add grid’s ControlAvailable event on screen’s created event. See the code below

partial void EditableEmployeesGrid_Created() {
  this.FindControl("grid").ControlAvailable += new EventHandler < ControlAvailableEventArgs > (EditableEmployeesGrid_ControlAvailable);
}

void EditableEmployeesGrid_ControlAvailable(object sender, ControlAvailableEventArgs e) {

}

Add Code For Column Wrap

partial void EditableEmployeesGrid_Created() {
  this.FindControl("grid").ControlAvailable += new EventHandler <ControlAvailableEventArgs> (EditableEmployeesGrid_ControlAvailable);
}

DataGrid _grid;
void EditableEmployeesGrid_ControlAvailable(object sender, ControlAvailableEventArgs e) {
  if (e.Control is DataGrid) {
    _grid = (DataGrid) e.Control;
    StringBuilder sb = new StringBuilder();

    sb.Append(@ "<DataTemplate
	xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>");
    sb.Append(@ "<TextBlock TextWrapping='Wrap'  Text='{Binding}'/>");
    sb.Append(@ "</DataTemplate>");

    Style newGridHeaderStyle = new Style(typeof (DataGridColumnHeader));

    newGridHeaderStyle.Setters.Add(new Setter {
      Property = DataGridColumnHeader.ContentTemplateProperty, Value = (DataTemplate) XamlReader.Load(sb.ToString())
    });

    _grid.ColumnHeaderStyle = newGridHeaderStyle;
  }
}

Here we are created a DataTemplate at run time and assigned it to data grid header.

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, December 5, 2012

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**