Pranay Rana: Align Text in Autogenerated Column of Rad Silverlight Girdview and Silverlight Gridview

Friday, July 6, 2012

Align Text in Autogenerated Column of Rad Silverlight Girdview and Silverlight Gridview

In this post I am going to show how you can align data in autogenrated columns cell of Silverlight gridview and also of Rad Control Silverlight Gridview.
In both of the below Example of Gridview I want to align the numeric data left in my cell and other except numeric remain in same format.

RAD Silverlight Gridview
XAML code of Silverlight Gridview
<telerik:RadGridView  
         Name="clubsGrid" 
         ItemsSource="{Binding Clubs}"
 AutoGeneratingColumn="clubsGrid_AutoGeneratingColumn"
         Margin="5">
</telerik:RadGridView>
Thing to note down here in XAML code is I register AutoGeneratingColumn =
"clubsGrid_AutoGeneratingColumn" event which is get called when Auto columns get generated for gridview.
private void clubsGrid_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
{
 GridViewDataColumn column = e.Column as GridViewDataColumn;
        if (column.DataType == typeof(int)
           || column.DataType == typeof(decimal)
           || column.DataType == typeof(float)
                )
       {
           column.TextAlignment = TextAlignment.Right;
       }
 }
As you see in above code I attached event called AutoGeneratingColumn on gridview control and checking DataType of each column which in turn check the datatype of the property which going to be attached with that column. So when the DataType is int or decimal or float I set TextAlignment propery of column to Right so display numeric value in right.

Output
So the output shows the column with numeric value "StadiumCapacity" is align to right.

Silvelight SDK Gridview control
There are two way to achieve this in Silverlight gridview
     1) Setting cell style from code behind file but creating Style
     2) Setting cell style from code behind file but using resource 
XAML code of Silverlight Gridview
<sdk:DataGrid   IsReadOnly="True" 
       Name="mysGrid" 
      AutoGeneratingColumn="DataGrid_AutoGeneratingColumn"
       ItemsSource="{Binding Clubs, Mode=OneWay}">
</sdk:DataGrid>
Same as RAD Gridview here also wrote AutoGeneratingColumn="DataGrid_AutoGeneratingColumn" which take care of Autogenerated coulmn.

First Way : Creating Sytle
 private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
 {
    if (e.PropertyType == typeof(int)
        || e.PropertyType == typeof(decimal)
        || e.PropertyType == typeof(float)
       )
    {
        var rightCellStyle = new Style(typeof(DataGridCell)); 
               
        rightCellStyle.Setters.Add(new Setter(
             Control.HorizontalContentAlignmentProperty,
             HorizontalAlignment.Right));

        DataGridBoundColumn obj = e.Column as DataGridBoundColumn;
        obj.CellStyle = rightCellStyle;
     }
}
As you see in above code same as RAD gridview control here e.PropertyType used to check the type of the autogenerated column but the change over here is need to create cell style and than assing the style to CellStyle property of gridview column.

Second Way : Using Resource
In this solution you need to register the style for the gridview cell as shown below and than you can use this to assign to CellStyle.
Resource in App.XAML
  <Style x:Key="RightCellStyle" TargetType="sdk:DataGridCell">
      <Setter Property="HorizontalContentAlignment" Value="Right" />
  </Style>
CodeBehind file
private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.PropertyType == typeof(int)
        || e.PropertyType == typeof(decimal)
        || e.PropertyType == typeof(float)
       )
       {
           DataGridBoundColumn obj = e.Column as DataGridBoundColumn;
           var rightCellStyle = Application.Current.Resources["RightCellStyle"] as Style;
           obj.CellStyle = rightCellStyle;
       }
}
Now in this code you dont require to create any style you just need to fetch the resource that you register in the App.XAML file and need to convert in Style.

Output
So the output shows the column with numeric value "StadiumCapacity" is align to right.
Note : in both the way output remain same.

5 comments:

  1. can any one please tell me how to display an underline style for the content in few columns of the grid

    ReplyDelete
  2. Wow,,, very good articel,, thx for your information

    ReplyDelete
  3. Please you explain what is the meaning of the RAD Silverlight Gridview and XAML code of Silverlight Gridview

    ReplyDelete
  4. Thank you for sharing about Align text in columns are autogenerated Rad Silverlight and Silverlight Gridview Girdview

    ReplyDelete
  5. Thank you for sharing your info. I truly appreciate your efforts and
    I will be waiting for your next write ups thank you once again.

    www.tentangseluler.com

    ReplyDelete