Hello,
I would like to add a DropDownList to a WebDataGrid in each row. In order to populate the unique dropdownlist for each row I would like to use a DataTable and add the dropdown to each Row in the DataTable.
Is this possible, for example in the Aspx to have something like:
<ig:WebDataGrid ID="Datagrid" runat="server" Height="350px" Width="100%" AutoGenerateColumns="False" > <Columns> <ig:BoundCheckBoxField DataFieldName="BoundCheckBoxField_0" Key="BoundCheckBoxField_0"> <Header Text="BoundCheckBoxField_0"> </Header> </ig:BoundCheckBoxField> <ig:BoundDataField DataFieldName="Unique Key to Determine Drop Down Values" Key="Unique Key to Determine Drop Down Values"> <Header Text="Unique Key to Determine Drop Down Values"> </Header> </ig:BoundDataField> <ig:BoundDataField DataFieldName="DropDownField" Key="DropDownField"> <Header Text="DropDownField"> </Header> </ig:BoundDataField></Columns> <EditorProviders> <ig:DropDownProvider ID="DropDownFieldProvider"> <EditorControl ID="DropDownField" runat="server" DisplayMode="DropDownField" TextField="DropDownField" ValueField="DropDownField"> <DropDownItemBinding TextField="DropDownField" ValueField="DropDownField" /> </EditorControl> </ig:DropDownProvider> </EditorProviders> <Behaviors> <ig:VirtualScrolling> </ig:VirtualScrolling> </Behaviors> </ig:WebDataGrid>
and on the back end have:
protected void Datagrid_doDatabinding(){
DataTable dt = new DataTable("dt"); dt.Columns.Add(new DataColumn("Unique Key to Determine Drop Down Values", typeof(string)));
dt.Columns.Add(new DataColumn("DropDownField", typeof(WebDropDown)));
/*get unique key set from a list of relational items on the server*/ foreach (uniquekey in uniquekeyset) { DataRow row = dt.NewRow(); row["Unique Key to Determine Drop Down Values"] = uniquekey; WebDropDown NewDropDown = new WebDropDown();
NewDropDown = get_items(uniquekey); //would return the proper WebDropDown
row["DropDownField"] = NewDropDown ;
dt.Rows.Add(row); } DataView dv = new DataView(dt); PObyAssessment.DataSource = dv; PObyAssessment.DataBind();
}
Thanks for any advice on this.
Hi Marcelo,
Thank you for your examples. Though I am a bit confused I believe I have the main idea and will suggest accordingly.
1) I would like to add a DropDownList to a WebDataGrid in each row.
Setting some control ( like the DropDown) to act as an EditorProvider for a WebDataGrid column means that it will render on each row in the corresponding column cell. This is the way its working out of the box.
Setting a DropDown editor provider is as easy as the following ( it is described in details here):
<ig:BoundDataField DataFieldName="Data" Key="Data"> <Header Text="Data"> </Header></ig:BoundDataField>
<editorproviders> <ig:DropDownProvider ID="DropDownProvider1"> <editorcontrol TextField="Data" ValueField="data"> </editorcontrol> </ig:DropDownProvider> </editorproviders> <behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="Data" EditorID="DropDownProvider1" /> </ColumnSettings> </ig:CellEditing> </Behaviors> </ig:EditingCore> </behaviors>
In code behind the dropdown provider is bound to a data source:
protected void Page_Load(object sender, EventArgs e) { DropDownProvider dropdownprovider = (DropDownProvider)WebDataGrid1.EditorProviders["DropDownProvider1"]; dropdownprovider.EditorControl.DataSource = MakeTable(); }
I am also attaching a working sample here. Please note that in this case the DropDown is bound to the same data source field which populates the Data column in the grid. You can of course bind the dropdown to another field or another data source.
Hi Hristo,
This example makes is very good but my issue is that for each row the DropDown will need to contain unique values depending on the Item. Is the only way to do this to add a Unique DropDownProvider for each Row?
The following would be an example (adapted from your example and the following does not work but would love to figure out how it can) -- I need a situation where if WebDataGrid is populated by "MakeTable_2" and in MakeTable_2 if "MakeTable" is passed the Value "1" then the dropdown for that Row with have 20 values "Data 0" to "Data 19" and if "MakeTable" is passed the value "2" then that row would have a drop down with only "Data 0" to "Data 5"
Does this issue make sense? is there a way to do this programmatically/on the server side? Do I just need to make unique DropDownProviders for each row?
public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { this.WebDataGrid1.DataSource = MakeTable_2(); } private DataTable MakeTable(int x) { // Create a new DataTable. System.Data.DataTable table = new DataTable("Table"); // Declare variables for DataColumn and DataRow objects. DataColumn column; DataRow row; // Create new DataColumn, set DataType, // ColumnName and add to DataTable. column = new DataColumn(); column.DataType = System.Type.GetType("System.Int32"); column.ColumnName = "id"; column.ReadOnly = true; // Add the Column to the DataColumnCollection. table.Columns.Add(column); // Create second column. column = new DataColumn(); column.DataType = System.Type.GetType("System.Int32"); column.ColumnName = "Item"; column.AutoIncrement = false; column.Caption = "Item"; column.ReadOnly = false; column.Unique = false; // Add the column to the table. table.Columns.Add(column); // Create third column. column = new DataColumn(); column.DataType = System.Type.GetType("System.String"); column.ColumnName = "Data"; column.AutoIncrement = false; column.Caption = "Data"; column.ReadOnly = false; column.Unique = false; // Add the column to the table. table.Columns.Add(column); // Make the ID column the primary key column. DataColumn[] PrimaryKeyColumns = new DataColumn[1]; PrimaryKeyColumns[0] = table.Columns["id"]; table.PrimaryKey = PrimaryKeyColumns; if (x == 1) { for (int i = 0; i <= 20; i++) { row = table.NewRow(); row["id"] = i; row["Item"] = i; row["Data"] = "Data " + i; table.Rows.Add(row); } } if (x == 2) { for (int i = 0; i <= 5; i++) { row = table.NewRow(); row["id"] = i; row["Item"] = i; row["Data"] = "Data " + i; table.Rows.Add(row); } } return table; } private DataTable MakeTable_2() { // Create a new DataTable. System.Data.DataTable table = new DataTable("Table"); // Declare variables for DataColumn and DataRow objects. DataColumn column; DataRow row; DataRow row2; // Create new DataColumn, set DataType, // ColumnName and add to DataTable. column = new DataColumn(); column.DataType = System.Type.GetType("System.Int32"); column.ColumnName = "id"; column.ReadOnly = true; // Add the Column to the DataColumnCollection. table.Columns.Add(column); // Create second column. column = new DataColumn(); column.DataType = System.Type.GetType("System.String"); column.ColumnName = "Item"; column.AutoIncrement = false; column.Caption = "Item"; column.ReadOnly = false; column.Unique = false; // Add the column to the table. table.Columns.Add(column); // Create third column. column = new DataColumn(); column.DataType = System.Type.GetType("System.String"); column.ColumnName = "Data"; column.AutoIncrement = false; column.Caption = "Data"; column.ReadOnly = false; column.Unique = false; // Add the column to the table. table.Columns.Add(column); // Make the ID column the primary key column. DataColumn[] PrimaryKeyColumns = new DataColumn[1]; PrimaryKeyColumns[0] = table.Columns["id"]; table.PrimaryKey = PrimaryKeyColumns; row = table.NewRow(); row["id"] = 1; row["Item"] = "This is Item 1"; row["Data"] = "Select...";
DropDownProvider dropdownprovider = (DropDownProvider)WebDataGrid1.EditorProviders["DropDownProvider1"]; dropdownprovider.EditorControl.DataSource = MakeTable(1);
table.Rows.Add(row); row2 = table.NewRow(); row2["id"] = 2; row2["Item"] = "This is Item 2"; row2["Data"] = "Select...";
dropdownprovider = (DropDownProvider)WebDataGrid1.EditorProviders["DropDownProvider1"]; dropdownprovider.EditorControl.DataSource = MakeTable(2);
table.Rows.Add(row2); return table; }}
Thanks so much.