DropDown in Grid

[Aaron]

Hello,
I have a grid that is simply bound to a dataset and it is always in edit mode to give us somewhat of an excel like feel.  We have a need to add a column that is of a dropdown type.  On selected index change we need it to update the dataset accordingly.  

Questions are:
1.  How do i get a column to contain a dropdown and fill it with values?
2.  On change of dropdown index how do update the underlying dataset or will the grid handle that? 

Thanks.  

Below is my grid that we are currently using:

<telerik:RadGrid ID="rgridChemValues" runat="server"
                    CssClass="gridview-custom" Skin="Transparent" OnPreRender="rgridChemValues_PreRender"
                    AllowMultiRowEdit="True" EnableViewState="true"
                    oncolumncreated="rgridChemValues_ColumnCreated" ShowFooter="True"
                    EnableHeaderContextMenu="True">
                    <MasterTableView AutoGenerateColumns="true" EditMode="InPlace" CommandItemDisplay="TopAndBottom">
                        <EditFormSettings>
                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                            </EditColumn>
                        </EditFormSettings>
                    <HeaderStyle Width="100px" />
                        <CommandItemTemplate>
                        </CommandItemTemplate>
                        <CommandItemSettings ExportToPdfText="Export to PDF" />
                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"
                            Visible="True">
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"
                            Visible="True">
                        </ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="FieldApplicationKeyVS" Display="false" DataField="FieldApplicationKey"
                                UniqueName="FieldApplicationKeyVisible">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnRowContextMenu="RowContextMenu"
                            OnColumnContextMenu="rgridChemValues_OnColumnContextMenu"></ClientEvents>
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <FilterMenu EnableImageSprites="False">
                    </FilterMenu>
                </telerik:RadGrid>

[Shinu]

Hi,

One suggestion is that you ca either use a TemplateColumn or GridDropdowncolumn as shown below.
aspx:

<telerik:GridTemplateColumn>
  <ItemTemplate>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" DataTextField="EmployeeID" DataValueField="EmployeeID"   DataSourceID="SqlDataSource2"></telerik:RadComboBox>
  </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridDropDownColumn UniqueName="dropdown" DropDownControlType="RadComboBox" DataField="EmployeeID" ListTextField="EmployeeID" ListValueField="EmployeeID" DataSourceID="SqlDataSource2"></telerik:GridDropDownColumn>

Also check the following help documentation which explains more about columns.
Column Types

Thanks,
Shinu.

[Aaron]

HI Shinu,

Thanks for the response.  I have tried using both actually and the issue i was having was that when I would add the column i would end up having 2 rendered,  I am sure this is due to having added the one in markup and the other autogenerated.  I am not sure how to get or hid the autogenerated one however?

Lastly, do either of those column types, value when selected bind to the dataset or does that work?  

Thanks again for the response.

[Aaron]

I have it at least filling data on the first returned row.  What I mean is the datatable has 7 total rows.  The dropdown renders in the column on each row.  The first row the dropdown has the correct values.  The next 6 reference the same code but for each item renders system.data.datarowview for each item.  The correct number of items are in the dropdown they are just not rendering correctly.  

I have issues currently that I am struggling with:

1.  Getting a dropdown column or template containing a dropdown to render in my grid correctly using a different datasource then the underlying grid.  
2.  Once i get the dropdown filled, when a user selects a value on this dropdown how do i populate the bound dataset on the radgrid with the selectedvalue of the rows dropdown?  Does the grid know to fill the dataset with the selected value as long as the types (int in this case) are the same or how do update the grid dataset with the selected value?

All the examples I find have a datasource object setup at design time.  My datasources needed to be bound at runtime using a different datasource then what the grid contains.  

Here is a snapshot of some of my code currently that may help.

protected void rgridChemValues_OnItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode) //fire for both edit and insert
            {
               Chem_Method_Lookup ds = new Chem_Method_Lookup();
                Chem_Method_LookupTableAdapters.Lookup_Chem_Method_LookupTableAdapter ta = new Chem_Method_LookupTableAdapters.Lookup_Chem_Method_LookupTableAdapter();
                ta.Fill(ds.Lookup_Chem_Method_Lookup);


                GridEditableItem editedItem = e.Item as GridEditableItem;
                GridEditManager editMan = editedItem.EditManager;
                GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)(editMan.GetColumnEditor("colMethodDropDown"));

                DropDownList ddList = new DropDownList();
                ddList=editor.DropDownListControl;

                editor.DataSource = ds.Tables[0];
                editor.DataTextField = "Method_name";
                editor.DataValueField = "Method_ID";

                editor.DataBind();

            }
        }







<telerik:RadGrid ID="rgridChemValues" runat="server"
                                 CssClass="gridview-custom" Skin="Transparent" OnPreRender="rgridChemValues_PreRender"
                                 AllowMultiRowEdit="True" EnableViewState="true"
                                 oncolumncreated="rgridChemValues_ColumnCreated" ShowFooter="True"
                                 EnableHeaderContextMenu="false" OnItemDataBound="rgridChemValues_OnItemDataBound" >
                    <MasterTableView AutoGenerateColumns="true" EditMode="InPlace" CommandItemDisplay="TopAndBottom">
                    <Columns>

                    <telerik:GridBoundColumn UniqueName="RowIndex" DataField="RowIndex" HeaderText="Row Indexer"
                    ReadOnly="true" />
                    <telerik:GridDropDownColumn UniqueName="colMethodDropDown"  DropDownControlType="RadComboBox" />

                    </Columns>
                        <EditFormSettings>
                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                            </EditColumn>
                        </EditFormSettings>
                        <HeaderStyle Width="100px" />
                        <CommandItemTemplate>
                        </CommandItemTemplate>
                        <CommandItemSettings ExportToPdfText="Export to PDF" />
                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"
                                            Visible="True">
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"
                                              Visible="True">
                        </ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="FieldApplicationKeyVS" Display="false" DataField="FieldApplicationKey"
                                                     UniqueName="FieldApplicationKeyVisible">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnRowContextMenu="RowContextMenu"
                                      OnColumnContextMenu="rgridChemValues_OnColumnContextMenu"></ClientEvents>
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <FilterMenu EnableImageSprites="False">
                    </FilterMenu>
                </telerik:RadGrid>

[Shinu]

Hi,

Please try the following approach to populate the GridDropDownColumn in code behind.

C#:

protected void rgridChemValues_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {

        //your code

        GridEditableItem editedItem = e.Item as GridEditableItem;
        RadComboBox combo = (RadComboBox)editedItem["colMethodDropDown"].Controls[0];
        combo.DataSource = ds.Tables[0];
        combo.DataTextField = "Method_name";
        combo.DataValueField = "Method_ID";
        combo.SelectedValue = (string)DataBinder.Eval(e.Item.DataItem, "Method_name").ToString();
        combo.DataBind();
    }
}

Thanks,
Shinu.

[Aaron]

Shinu,

I got the below issue to work.  Not sure why i didn't catch it sooner my apologies.  

I think my last issue is on value change how is the dataset updated to then be saved back to the underlying tables? 



Thanks again for the help.  Getting close.  Setting the selected value here:
combo.SelectedValue = (string)DataBinder.Eval(e.Item.DataItem, "Method_name").ToString(); 

results in the following error:
DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'Method_name'.

Currently the dataset's result is null as this is a new column and are awaiting the dropdown functionality to work to begin saving values but I will need this functionality to set the selectedvalue like you have it.

Thanks again for all your help.

[Shinu]

Hi Aron,

I am not sure about your requirement. This error occurs only when there is no such field in the DataTable . One suggestion is to check whether the field exists in the DataTable and then bind the data in the DropDownColumn's SelectedValue.

C#:

protected void rgridChemValues_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {

        //your code

        GridEditableItem editedItem = e.Item as GridEditableItem;
        RadComboBox combo = (RadComboBox)editedItem["colMethodDropDown"].Controls[0];
        combo.DataSource = ds.Tables[0];
        combo.DataTextField = "Method_name";
        combo.DataValueField = "Method_ID";
        if (ds.Tables[0].Columns.Contains("Method_name"))
        {
           combo.SelectedValue = (string)DataBinder.Eval(e.Item.DataItem, "Method_name").ToString();
        }
        combo.DataBind();
    }
}

Thanks,
Shinu.

[Aaron]

Good Morning Shinu,

Let me see if i can better explain.  

I have a datatable that is bound to the grid that contains MethodID.  With your help I was able to get the dropdown to fill with the lookup data (different datatable then the one bound to the grid.  this contains methodid, and methodname) needed to fill the MethodID on the datatable that is bound to the grid.  

The last thing I think I am having trouble getting to function is the value that is selected in the dropdown now does not update the datatable that is bound to the grid so when i update the dataset nothing is saved.  

Does that make more sense on what my issue is?  

Thanks again for the assistance Shinu.

[Shinu]

Hi Aaron,

I suppose you want to show the updated value after selecting an item from the dropdown. Here is the sample code.
C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
 if (e.Item is GridDataItem)
 {
   GridDataItem item = (GridDataItem)e.Item;
   DataRowView row = (DataRowView)e.Item.DataItem;
   item["colMethodDropDown"].Text = row["Method_name"].ToString();
 }
}

Thanks,
Shinu.