How to: Attach an event to a GridDropDownColumn

[Bruno]

Hi all,

I have a control that inherits the Telerik.Web.UI.GridDropDownColumn like:

    [DefaultProperty("Value")]
    [ToolboxData("<{0}:myGridDropDownColumn runat=server></{0}: myGridDropDownColumn>")]
    public class myGridDropDownColumn : GridDropDownColumn
    { ... }

I need to attach an event to fire up on Selected Value is changed. How can I accomplish this?

my control does not give me the OnColumnChange Event [url: http://www.telerik.com/help/aspnet-ajax/telerik.web.ui-telerik.web.ui.griddropdowncolumn_members.html] (am I missing something?)

and there is no Attribute propertie to attach a javascript call like:

myGridDropDownColumn myDrop = new myGridDropDownColumn(); 
myDrop.Attributes.Add("onchange", "alert('event fired!');");

My objective in this case is to create a dropDown that, when the selectedValue changes, it would populate the other DropDown in the same row: row[ x ].column[ 2 ], any idea is there is a tutorial about this technique... I can't find it anywhere around :(

[Nikolay Rusev]

Hello Bruno,

For your convenience I've prepared sample application demonstrating how to handle GridDropDownColumn SelectedIndexChanged event. You can find it attached to this post. To run the application you need to add Telerik.Web.UI assembly into bin folder.

The example demonstrates how to can handle selection change on server and/or client side using both custom column which extends GridDropDownColumn and regular GridDropDownColumn(see ItemCreated event handler).

Please review the code and see whether provided solution helps.

If you are still having issues implementing desired functionality I suggest you to open formal support ticket and if possible send us sample application. Thus we'll be able to debug it locally and help you as fast as we can.

Kind regards,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Gunjan]

I'm new to telerik and .NET, and have searched for a solution for a similar question in this thread. I have a drop down (Client) which will populate the corresponding contacts to another drop down. I've been able to get the "Edit" to work, but not a "New" record. If there is an easier way to do this, then please let me know. I've put my question in bold.

Code:
        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                // Get the client list
                GridDropDownListColumnEditor gddlClient =
                    (e.Item as GridEditFormItem).EditManager.GetColumnEditor("CLIENT_ID") as GridDropDownListColumnEditor;

                // Handle the selected change on server
                gddlClient.ComboBoxControl.AutoPostBack = true;
                gddlClient.ComboBoxControl.SelectedIndexChanged +=
                    new RadComboBoxSelectedIndexChangedEventHandler(ComboBoxControl_SelectedIndexChanged);
            }
        }

        protected void ComboBoxControl_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            // New Item
            if (RadGrid1.MasterTableView.IsItemInserted)
            {
                // How do you retrieve the new item?
            }
            // Editable Item
            else
            {
                // Get the contact & requestor lists
                GridEditManager geManager = (RadGrid1.EditItems[0] as GridDataItem).EditFormItem.EditManager;
                RadComboBox rcbClient =
                    (geManager.GetColumnEditor("CONTACT_ID") as GridDropDownListColumnEditor).ComboBoxControl;
                RadComboBox rcbReq =
                    (geManager.GetColumnEditor("CLIENT_REQ") as GridDropDownListColumnEditor).ComboBoxControl;

                // Apply the client id filter
                this.sqlDSContact.FilterExpression = "LOC_ID LIKE '" + e.Value + "_%'";

                // Bind the filtered data
                rcbClient.DataBind();
                rcbReq.DataBind();
            }
        }

[Gunjan]

I found a solution. A previous thread answered my question. I included my code in case anyone wanted another example. Didn't think it would hurt.

Thread w/ solution:
http://www.telerik.com/community/forums/aspnet-ajax/grid/dependent-griddropdowncolumn-issue.aspx


New Code:
        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                // Get the client list
                GridDropDownListColumnEditor gddlClient =
                    (e.Item as GridEditFormItem).EditManager.GetColumnEditor("CLIENT_ID") as GridDropDownListColumnEditor;

                // Handle the selected change on server
                gddlClient.ComboBoxControl.AutoPostBack = true;
                gddlClient.ComboBoxControl.SelectedIndexChanged +=
                    new RadComboBoxSelectedIndexChangedEventHandler(ComboBoxControl_SelectedIndexChanged);
            }
        }

        protected void ComboBoxControl_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            // Get the row we are editing
            GridEditableItem gefItem = (o as RadComboBox).NamingContainer as GridEditableItem;

            // Get the contact & requestor lists
            GridDropDownListColumnEditor gddlContact =
                gefItem.EditManager.GetColumnEditor("CONTACT_ID") as GridDropDownListColumnEditor;
            GridDropDownListColumnEditor gddlReq =
                gefItem.EditManager.GetColumnEditor("CLIENT_REQ") as GridDropDownListColumnEditor;

            // Update the filter by the new client id
            this.sqlDSContact.FilterExpression = "LOC_ID LIKE '" + e.Value + "_%'";

            // Bind the new data to the lists
            gddlContact.ComboBoxControl.DataBind();
            gddlReq.ComboBoxControl.DataBind();
        }

[Shinu]

Hi Gunjan,

You can also try the following code snippet when the Grid is in insert mode.

CS:

  protected void ComboBoxControl_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        if (RadGrid1.MasterTableView.IsItemInserted)
        {
            RadComboBox combo = (RadComboBox)o;
            GridDataInsertItem insertItem = (GridDataInsertItem)combo.NamingContainer;
        }
    }

Thanks
Shinu

[Gunjan]

That's only for new items, which is also useful, but I need it for both editing existing & inserting new records. I tested my solution and it's working for both editing existing & inserting new records.

Thanks for the prompt reply.

[Eve]

Hello,

I am just trying to get the regular dropdowncolumn to respond to the SelectedIndexChanged event.  I've followed this example, as well as the one that references the dropdownlist as Controls[0] off the cell; I've tried it using both a DropDownList as the control as well as a RadComboBox.  Finally I have tried it with AutoPostback set to false and also as true on the dropdownlist.

But in all of these scenarios, the SelectedIndexChanged handler is never getting called.

The column is declared as:

<

 

telerik:GridDropDownColumn DataField="DurationTypeID" UniqueName="DurationTypeID"

 

 

 

    HeaderText="Units" DataType="System.Int32" ListTextField="Text" ListValueField="Value"

 

 

 

    DataSourceID="xmlDurationUnitsDataSource" DropDownControlType="DropDownList">

 

 

 

</telerik:GridDropDownColumn>

And in the code behind, in ItemDataBound:

 

if

 

(e.Item is GridEditableItem && e.Item.IsInEditMode)

 

{

 

 

    GridEditableItem item = (GridEditableItem)e.Item;

 

 

 

    GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)item.EditManager.GetColumnEditor("DurationTypeID");

 

 

 

    //add in the event handler for the drop down list, which will maintain the value column text box

 

 

 

 

 

 

 

    DropDownList ddl = editor.DropDownListControl;

 

    ddl.SelectedIndexChanged +=

 

new EventHandler(

 

 

 

                        this.DurationTypeID_SelectedIndexChanged);

 

    ddl.AutoPostBack =

 

true;    

 

 

}

 

 

 

 

 

protected

 

 

void DurationTypeID_SelectedIndexChanged(object sender, EventArgs e)

 

{

 

 

}

The grid is within a RadAjaxPanel, which is on a page that is in a RadPane on a RadSplitter--would that cause this to fail?
Or, any other ideas?  I am using Q1 2009 SP2.

Thank you,
Eve

 

[Princy]

Hello Eve,

You should be adding the SelectIndexChangedEvent handler of the DropDownLIst/RadComboBox of the DropDownColumn in the ItemCreated event of the grid.

Thanks
Princy.

[Eve]

Hello Princy,

I moved the assignment into the ItemCreated event, but the handler is still not getting called for SelectedIndexChanged.

When I am hooking up this handler in the grid's ItemCreated, I am checking for "is GridEditableItem && item.IsInEditMode" and only doing the hookup if true.  Is that correct?

Could it be that something on the telerik side (perhaps introduced in Q1 2009 SP2) is clearing or overwriting my handler for the combobox?

Thank you,
Eve

[Princy]

Hello Eve,

I tried adding an event handler for the DropDown(of DropDownColumn) in the ItemCreated event of the grid and it worked as expected. The following online demo illustrates on a similar example. Check out the c# code provided in the demo, try altering your code as shown in the example in the demo and see if it makes any difference:
Accessing Cells and Rows

Thanks
Princy.

[Eve]

Thanks, Princy; it's all working now. 

I had changed the name of the handler, but never moved it from ItemDataBound to ItemCreated.  Since the signatures were the same, it didn't cause any errors; it just still didn't work.  A quick fix, and it's all working.

Thanks again!
Eve

[Paul Taylor]

Hi,

I'm trying to do the same thing: attach an event handler to the drop down of a GridDropDownColumn. I have followed the example in the code, but can't get the SelectedIndexChanged event to fire. In fact, although AutoPostBack is set to True, the combo is not even posting back. The only difference in approach in my case is that I am populating the dropdown list in the ItemDataBound event rather than using Data Controls. Should the postback still work in this case?

Paul Taylor

[Princy]

Hello Paul,

Check whether you have set the same DropDownControlType in mark up and in code behind. Please take a look at the following code snippet.

ASPX:

<telerik:GridDropDownColumn UniqueName="GridDropDownColumn" DropDownControlType="RadComboBox">
</telerik:GridDropDownColumn>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

   {

      if (e.Item is GridEditFormItem && e.Item.IsInEditMode)

       {

           GridEditFormItem editItem = (GridEditFormItem)e.Item;

           GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)editItem.EditManager.GetColumnEditor("GridDropDownColumn");

           editor.ComboBoxControl.AutoPostBack = true;

           editor.ComboBoxControl.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(ComboBoxControl_SelectedIndexChanged);

        }

    }

   void ComboBoxControl_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

   {

       

   }

   

   protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

   {

     if (e.Item is GridEditFormItem && e.Item.IsInEditMode)

       {

           GridEditFormItem editItem = (GridEditFormItem)e.Item;

           GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)editItem.EditManager.GetColumnEditor("GridDropDownColumn");

           editor.DataSource= bindRad();

           editor.DataTextField = "FirstName";

           editor.DataValueField = "FirstName";

           editor.DataBind();

         }

   }

Thanks,
Princy.

[Paul Taylor]

Hi Princy,

Thanks for your reply. My code is pretty much the same, though it is in VB. See relevant extracts below. If your  example works it can´t be the databinding in the ItemDataBound that is preventing it from working. The only other difference I see is that in my case, I´m using InPlace editing, rather than Form editing, so I get the editor reference from a GridEditableItem object. I can´t see why that would make a difference though. Do you have any other ideas?

Paul

<telerik:RadGrid runat="server" ID="grdValidator" AllowPaging="True" AllowSorting="True"
    GridLines="None">
    <MasterTableView AutoGenerateColumns="False" EditMode="InPlace" DataKeyNames="ValidatorId"
        CommandItemDisplay="Bottom">
        <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
        <Columns>
             ...
            <telerik:GridDropDownColumn DataField="DataType" HeaderText="Data Type" UniqueName="DataType">
            </telerik:GridDropDownColumn>
             ...


        Private Sub grdValidator_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles grdValidator.ItemCreated
            If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
                Dim item As GridEditableItem = e.Item
                Dim cboEditor As GridDropDownListColumnEditor = item.EditManager.GetColumnEditor("DataType")
                cboEditor.ComboBoxControl.AutoPostBack = True
                AddHandler cboEditor.ComboBoxControl.SelectedIndexChanged, AddressOf cboDataType_SelectedIndexChanged
                ...

[Nikolay Rusev]

Hello Paul,

Could you please open a formal support ticket and attach sample application demonstrating the issues that you are facing? Thus we'll be able to assist you further.

Greetings,
Nikolay
the Telerik team

[Hannah]

Can this be done with the TextChanged event? I couldn't get it to work with TextChanged.

[Eyup]

Hello Hannah,

You should use the ItemCreated event handler to achieve this requirement:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/control-lifecycle/differences-between-itemcreated-and-itemdatabound-

Once you get a reference to the TableCell element, you can access the combo using the Controls[0] approach:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows

If you prefer that I send you a sample web site instead, please elaborate on your specific scenario and what exactly you want to achieve.

Regards,
Eyup
Telerik