Dynamically load GridDataControl with ComboBox with data from DataTable

[Steven Trinh]

I want  to dynamically load a GridDataControl with data from a DataTable.

The grid has a PhoneTypeID column that is a combobox with data from a DataTable, that the user can select.

I want to see the Phone Type and not the PhoneTypeID displayed in the combobox column.

Attached is my sample project.

Thanks.

WpfApplication2_6634ce98.zip

[Gobinath A]

Hi Steven,

 

Thanks for using syncfusion products.

 

We have analyzed your query and you can achieve your requirement by modifying the following code snippet in you attached sample.

 

Code snippet[C#]:       

 

GridDataColumnStyle columnstyle = new GridDataColumnStyle();

            columnstyle.CellType = "ComboBox";

            columnstyle.ItemsSource = ItemList;

            columnstyle.DropDownStyle = GridDropDownStyle.Exclusive;

            columnstyle.DisplayMember = "PhoneType";

            columnstyle.ValueMember = "PhoneTypeID";

 

            GridDataVisibleColumn column = new GridDataVisibleColumn();

            column.ColumnStyle = columnstyle;

            column.MappingName = "CustomerName";

            this.DataGrid.VisibleColumns.Add(column);

 

 

We have modified the sample based on your requirement and please find the sample under the following location.

 

Sample: WpfApplication2.zip

 

Please let us know if you have any queries.

 

Regards,

Gobinath A

 

[Steven Trinh]

Thanks Gobinath for your response.

I ran your zip file and am getting two "CustomerName" columns, stead of one column containing combo box with IDs hidden.  I am using Essential Studio Version - 10.3.0.43.

 

Please see attached screen print.

ST

1022013_44951_PM_da2ce815.zip

[Gobinath A]

Hi Steven,

 

Thanks for your update.

 

We are unable understand your requirement, However we have prepared a sample based on the given information. Could you please check the sample? or please share more details related to this query with us,  it would be helpful for us to provide a solution sooner.

 

 

Code snippet[C#]:

 

            GridDataColumnStyle columnstyle = new GridDataColumnStyle();

            columnstyle.CellType = "ComboBox";

            columnstyle.ItemsSource = ItemList;

            columnstyle.DropDownStyle = GridDropDownStyle.Exclusive;

            columnstyle.DisplayMember = "PhoneType";

            columnstyle.ValueMember = "PhoneTypeID";

 

            this.DataGrid.VisibleColumns[0].ColumnStyle = columnstyle;

 

 

Sample: WpfApplication2.zip

 

Notes: We are glad to announce that our Essential Studio Vol 3 2013 is rolled out and is available for download under the following link.

 

http://www.syncfusion.com/support/forums/general/111062/Essential-Studio-2013-Volume-3-Final-Release-v113030-available-for-download-

 

 

Regards,

Gobinath A

 

 

[Steven Trinh]

Thanks again Gobinath for the additional clue.

For anyone who's new to WPF and GridDataControl like myself, two changes need to be made to the Syncfusion sample project:

1) Make this change to the MyTables.cs

    public class Item

    {

        public Int16 PhoneTypeID { get; set; }

        public string  PhoneType { get; set; }

    }

2) Update this procedure

  void gridDataControl1_ModelLoaded(object sender, EventArgs e)

        {

            ItemList = new List<Item>();

            ItemList.Add(new Item() { PhoneTypeID = 0, PhoneType = "Thomas0" });

            ItemList.Add(new Item() { PhoneTypeID = 1, PhoneType = "Thomas1" });

            ItemList.Add(new Item() { PhoneTypeID = 2, PhoneType = "Thomas2"});

            ItemList.Add(new Item() { PhoneTypeID = 3, PhoneType = "Thomas3" });

            ItemList.Add(new Item() { PhoneTypeID = 4, PhoneType = "Thomas4" });

            ItemList.Add(new Item() { PhoneTypeID = 5, PhoneType = "Thomas5" });

            GridDataColumnStyle columnstyle = new GridDataColumnStyle();

            columnstyle.CellType = "ComboBox";

            columnstyle.ItemsSource = ItemList;

            columnstyle.DropDownStyle = GridDropDownStyle.Exclusive;

            columnstyle.DisplayMember = "PhoneType";

            columnstyle.ValueMember = "PhoneTypeID";

            this.DataGrid.VisibleColumns[0].ColumnStyle = columnstyle;

        }

[Gobinath A]

Hi Steven,

 

Thanks for your interest in syncfusion products.

 

We have analyzed your query and if we change the ComboBox Itemsource then we have to change the DisplayMember property also as following code snippet.

 

Code snippet[C#]:

 

columnstyle.DisplayMember = "PhoneType";

columnstyle.ValueMember = "PhoneTypeID";

 

Code snippet[XAML]:

<syncfusion:GridDataVisibleColumn MappingName="CustomerID" />

 

Notes: The MappingName(CustomerID) values should match the PhoneType value of ItemList collection for view the DisplameyMember in the CombobBox while loading.

 

Please let us know if you have any queries.

 

Regards,

Gobinath A

 

[heromyth]

When opening the ComboBox, it will list all the items with all the properties in Item automaticly.

Can I customize the display content using the DataTemplate? For example, I just want to display one property like PhoneType.


Thanks!

[Ashok N]

Hi Heromyth,

 

You can achieve your requirement by setting DisplayMember in the GridDataColumnStyle. If you are set the DisplayMember in the column style, then the combo box will only display the particular column value in the dropdown list. We have created a sample to achieve this requirement and please check the below sample link.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/125167/comboboxdisplay-1925745908.zip  

 

Please let us know if you have any queries.

Thanks,

Ashok