Click here to Skip to main content
Click here to Skip to main content

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

By , 18 Jul 2012
 

In this article 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.

Source : http://pranayamr.blogspot.in/2012/07/align-text-in-autogenerated-column-of.html

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Pranay Rana
Software Developer (Senior) GMind Solusion
India India
Member

Microsoft C# MVP

 
Hey, I am Pranay Rana, working as a ITA in MNC. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5.5 years now.
 
For me def. of programming is : Programming is something that you do once and that get used by multiple for many years
 

You can visit my blog

StackOverFlow - http://stackoverflow.com/users/314488/pranay
My CV :- http://careers.stackoverflow.com/pranayamr
 
Awards:



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralMy vote of 4memberChristian Amado31 Jul '12 - 14:13 
Nice article!
GeneralMy vote of 4memberChristian Amado27 Jul '12 - 11:00 
That was very simple. =)

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130523.1 | Last Updated 18 Jul 2012
Article Copyright 2012 by Pranay Rana
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid