Sunday, August 7, 2011

Remove Default Empty Column From DataGrid

Problem:
          Need to remove extra default column from the datagrid when you bind datagrid with records. In the Image 1 you can see the extra default column when you bind the data grid control. Sometime it is required to remove that extra empty column.

Image 1

Solution:
             There are two situation when you are binding the datagrid control.
  1. AutoGenerateColumns is set to False
  2. AutoGenerateColumns is set to True
When you set the AutoGenerateColumns to false then you can set the columns by using either DataGridTextColumn, DataGridCheckBoxColumn or DataGridTemplateColumn, in this case you know the last column of the datagrid and what you have to do is to set the width of last column to (*). When you have AutoGenerateColumns to false, the code is shown in the List 1. here you can see that I have set the width of the last column which is the address column is set to (*).


List 1

You can see the output in Image 2 Here you can see that Address column is stretched and the empty column is removed.
Image 2

When AutoGenerateColumns is True :
                                                     When you have AutoGenerateColumns to true then you don't have any idea how many columns you have in you datagrid control. In my case I have local data which is display so I have set the ItemsSource of the datagrid control in the default constructor and in the loaded event of the page I have write code which is listed in List 2.


List 2

Here you can see that I have first check the number of columns in the datagrid control and then I have set the width of the last column by substructing 1 from the datagrid columns count and set the width of that column to 1 *. The output of this statement is similar to the what you have seen in Image 1. You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

5 comments:

nsri said...

Your Awesome ... Thank you for tutorials... Your changing the future many developers...i.e your providing a great help...

Thankyou so much,

~Sri

sri said...

Your Awesome ... Thank you for tutorials... Your changing the future many developers...i.e your providing a great help...

Thankyou so much,
~Sri

mubarak said...

thank you so much this really helped me..
mubarak ahmad

VJ >> said...

Thanks Asim!!

This indeed was challenging for me. I tried googling a lot and nothing helped.. finally i stumbled into this article.

neem sai said...

hi,your suggestion is nice.I want to add one more point to this.when u add width="*" for all columns,then it will be equally spaced columns


The Last column does not look bigger