.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

Autocomplete In DataGrid Cell Editing In Silverlight Application

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

Autocomplete In DataGrid Cell Editing In Silverlight Application.In this article we will see how we can implement AutoComplete feature in a cell editing in DataGrid.
 

Introduction

In this article we will see how we can implement AutoComplete feature in a cell editing in DataGrid.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Application. Name it as AutoComlpeteDataGridInSL3.

1.gif
 
Go ahead and add a DataGrid to your application.

2.gif
 
Now add a Class to define properties for sample data.

public class Users: INotifyPropertyChanged
  {
  #region INotifyPropertyChanged Members 
  public event PropertyChangedEventHandler PropertyChanged; 
  #endregion 
 

  #region UserName 
  private string _UserName; 
  public string UserName 
  { 
  get { return _UserName; } 
  set 
  { 
  if (value.Length < 4) 
  { 
  throw new ValidationException("User Name should contain atleast 4 chars"); 
  } 
  _UserName = value; 
  RaisePropertyChanged("UserName"); 
  } 
  } 
  #endregion 
 

  #region Age 
  private int _Age; 
  public int Age 
  { 
  get { return _Age; } 
  set 
  { 
  _Age = value; 
  } 
  } 
  #endregion 
 

  #region Gender 
  private string _Gender; 
  public string Gender 
  { 
  get { return _Gender; } 
  set 
  { 
  _Gender = value; 
  } 
  } 
  #endregion 
 

  #region Country 
  private string _Country; 
  public string Country 
  { 
  get { return _Country; } 
  set 
  { 
  _Country = value; 
  } 
  } 
  #endregion  

  private void RaisePropertyChanged(string propertyName) 
  { 
  if (this.PropertyChanged != null) 
  { 
  this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
  } 
  } 
  }


Now add some sample data to a List and assign the list to the ItemSource of the DataGrid.

public MainPage()
  { 
  InitializeComponent(); 
  List myList = new List 
  { 
  new Users{ UserName="Hiro Nakamura", Age=24, Gender="M", Country="Japan"}, 
  new Users{ UserName="Mohinder Suresh", Age=26, Gender="M", Country="India"}, 
  new Users{ UserName="Claire Bennette", Age=20, Gender="F", Country="USA"}, 
  new Users{ UserName="Matt Parkman", Age=30, Gender="M", Country="USA"}, 
  new Users{ UserName="Nathan Patrelli", Age=30, Gender="M", Country="USA"}, 
  new Users{ UserName="Peter Patrelli", Age=26, Gender="M", Country="USA"}, 
  new Users{ UserName="Mica Sanders", Age=19, Gender="M", Country="USA"}, 
  new Users{ UserName="Linderman", Age=56, Gender="M", Country="USA"}, 
  new Users{ UserName="Ando", Age=24, Gender="M", Country="Japan"}, 
  new Users{ UserName="Maya", Age=24, Gender="F", Country="Mexico"}, 
  new Users{ UserName="Angela Patrelli", Age=26, Gender="F", Country="USA"}, 
  new Users{ UserName="Niki Sanders", Age=26, Gender="F", Country="USA"}, 
  }; 

   MyDataGrid.ItemsSource = myList; 
  }

Now that you have added some sample data, you can test your application.

3.gif
 
Now we don't need to have AutoGenerateColumns of the DataGrid as we are going to define our own.

Follow the xaml code behind for a template:

 
   
   
    
   
   
   
   
    
   
   
   
   
   
   
   
   
   
   
 

   

As you can see from the above xaml code the columns are bound to respective properties. For UserName we have a CellEditingTemplate, where we have used an AutoCompleteBox.

Now create a class named ObjectCollection and define the two constructors as follows:

public class ObjectCollection: Collection 
  { 
  public ObjectCollection() 
  { 
  } 

  public ObjectCollection(IEnumerable collection) 
  { 
  foreach (object obj in collection) 
  { 
  Add(obj); 
  } 
  } 

  }
Add a sample ObjectCollection in xaml code behind.

 
   
  Jack Sephered 
  James Soyer 
  John Lock 
  Jacky Chan 
   
  


That's it we are done with this. Run your application.

Edit the User Name Column of any row and start typing with the letter "J" (as we have only fields starting with J).

You will be prompted with the List of values from the AutoCompleteBox:

4.gif

Enjoy Coding.

 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