Adding RadComboBox to RadGrid Edit

Question

I have added a RadControl, RadGrid and I need to add a radComboBox in the edit mode.

When user clicks on the radComboBox, I need to get both "text" and "value" of the radComboBox to save to table when user updates values.

<telerik:RadComboBox ID="RadComboBox1" Runat="server" 
             DataSourceID="SqlDataSource1" DataTextField="docCategoryName" 
             DataValueField="docCategoryID" Height="200px" Skin="Vista">

When user selects from the radComboBox, I need to get the value of DataTextField & DataValueField into a HiddenField.

Answer 1

Telerik are the best people to help you with this, but from their site (and from memory):

http://www.telerik.com/help/aspnet-ajax/combo%5Fclientsideonclientselectedindexchanged.html

If you have your radCombo:

<telerik:RadComboBox
 ID="RadComboBox1"
 runat="server"
 OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
</telerik:RadComboBox>

With your JS event:

<script language="javascript" type="text/javascript">
function OnClientSelectedIndexChanged(sender, eventArgs)
{
 var item = eventArgs.get_item();

// get the text and value elements
var text=item.get_text();
var val=item.get_value();

$('#hiddenField').val(val);
}
</script>

Where hiddenField is the ID of the hidden field.

Answer 2

The approach described by Program.X is very good. This, of course, works if you're using a RadCombobox inside of a GridTemplateColumn in RadGrid.

RadGrid also provides a built-in GridDropDownColumn that can automatically render a RadCombobox during edits. If you choose to use the built-in column type, you need to programmatically set the client-side event handlers for the rendered RadGrid, like this:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    //Find GridEditableItems when in Edit mode
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        //Get reference to item (i.e. Row)
        var item = e.Item as GridEditableItem;

        //Get reference to auto-generated RadCombobox in
        //specific column (in this case, a column called Title)
        var rcb = item["Title"].Controls[0] as RadComboBox;
        if (rcb == null)
            return;

        //Customize the RadCombobox properities
        rcb.OnClientSelectedIndexChanged = "onselectedindexchanged";
    }
}

Where "onselectedindexchanged" is the name of a client-side JavaScript function on your page designed to handle the RadCombobox event.

Either of these approaches should enable you to achieve your goal.