.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Resize column in DataGrid after row delete in Silverlight

Posted By:Diptimaya Patra       Posted Date: March 20, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

In this article, we will see how we can resize the DataGrid Column after Row Delete Operation from the DataGrid.
 

Introduction

In this article, we will see how we can resize the DataGrid Column after Row Delete Operation from the DataGrid.

Problem

For DataGrid Column we have 4 modes to select the width. Such as Pixels, Size to Header, Size to Cell and Auto.

When you insert a long text for your DataGrid Column the width of the Column changes accordingly, but when you remove the particular row the Column width remains the same.

It should resize back to the required column width.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as DataGridColumnResize.

 

Add some controls like TextBox and Buttons along with one DataGrid to your application.

I have opened the solution in Blend and designed as follows:

Now what we see from the above design is that, we would add a row to the DataGrid and can remove the row.

I have customized the DataGrid Control so that MouseScroll can be achieved. And I have added two columns to display Data.

Here is the XAML to follow up quickly.

 


            
                
                
            
        
        
        

Now we will write some sample data and bind to the DataGrid.

 

public class People
{
   public string Name { get; set; }
} 

List myList = new List(); 

  

        public MainPage() 

        { 

            InitializeComponent(); 

            myList = new List() 

            { 

                new People{Name="111111111111111111"}, 

                new People{Name="111111"}, 

                new People{Name="2222"}, 

                new People{Name="33333333333333"}, 

                new People{Name="7777777777777777777777"}, 

                new People{Name="55555555555555555555"}, 

            }; 

            dgMyGrid.ItemsSource = myList;
        }

Now we will write a method that would resize the DataGrid Column.

 

private void ResetColumnWidth(DataGrid grid) 
{ 

    List columns = new List(); 

    foreach (DataGridColumn column in grid.Columns) 
    { 

        if (column.Width.IsSizeToCells) 

            columns.Add(column); 

    } 


    foreach (DataGridColumn column in columns) 
    { 

        column.Width = new DataGridLength(0); 

    } 

    grid.UpdateLayout(); 

    foreach (DataGridColumn column in columns) 
    { 

        column.Width = DataGridLength.SizeToCells; 

    } 

    grid.UpdateLayout(); 

}

Now we will write the Add Button Click Event Handler.

private void btnAdd_Click(object sender, RoutedEventArgs e) 
{ 

    myList.Add(new People { Name=txtAdd.Text }); 

    dgMyGrid.ItemsSource = myList; 

    ResetColumnWidth(dgMyGrid); 

}

Now we will write the Remove Selected Row Button Click Handler.

private void btnRemove_Click(object sender, RoutedEventArgs e) 
{ 

    if (this.dgMyGrid.SelectedItem is People) 
    { 

        myList.Remove(this.dgMyGrid.SelectedItem as People); 

        dgMyGrid.ItemsSource = myList; 

    } 

    ResetColumnWidth(dgMyGrid); 

}

That's it. Run your application and try adding a long text to the DataGrid.

As you see from the above image, Column width has changed when this new row is added to DataGrid.

Now we would remove the Long Text row.

As you see, the Column width is resized.

Hope this article helps you. J


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend