DropDownList onChange clientside

[Christine McDaniel]

Here is what I would like to accomlish and cannot find in help:
Using the Dropdown list seen below, if user selects an option called "Other", a textbox pops up.  User can then type an option and on Save of webpage, it will be added to the DropDownList.  I need easiest most straightforward way to accomplish this.  Have not been able to find a lot of help.  Thank you.

Our version is: RadControls for ASPNET AJAX Q2 2008
Please let me know if you need any other information.

Thank you

<

 

telerik:RadGrid

 

 

runat="server"

 

 

ID="grdTypes"

 

 

Skin="Office2007"

 

 

EnableEmbeddedSkins="True"

 

 

AllowAutomaticDeletes="True"

 

 

AllowAutomaticUpdates="True"

 

 

AutoGenerateColumns="False"

 

 

AllowMultiRowEdit="True"

 

 

EnableAJAX="True"

 

 

GridLines="None"

 

 

Width="400px"

 

 

OnNeedDataSource="grdTypes_NeedDataSource"

 

 

OnDeleteCommand="grdTypes_DeleteCommand"

 

 

>

 

 

 

<ExportSettings>

 

 

<Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"

 

 

PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />

 

 

</ExportSettings>

 

 

<MasterTableView

 

 

CommandItemDisplay="Top"

 

 

EditMode="EditForms"

 

 

DataKeyNames="TypesID"

 

 

AutoGenerateColumns="false"

 

 

AllowSorting = "true">

 

 

 

<EditFormSettings>

 

 

<EditColumn CancelImageUrl="/next/RadControls/Grid/Skins/TEST/Cancel.gif" EditImageUrl="/next/RadControls/Grid/Skins/TEST/Edit.gif"

 

 

InsertImageUrl="/next/RadControls/Grid/Skins/TEST/Update.gif" UniqueName="EditCommandColumn2"

 

 

UpdateImageUrl="/next/RadControls/Grid/Skins/TEST/Update.gif">

 

 

</EditColumn>

 

 

</EditFormSettings>

 

 

 

<CommandItemTemplate >

 

 

<asp:LinkButton ID="InitInsertButton" runat="server" CommandName="InitInsert" >

 

 

<img alt="Add Record" src="/next/RadControls/Grid/Skins/TEST/AddRecord.gif" /> Add new record</asp:LinkButton>

 

 

</CommandItemTemplate>

 

 

 

<Columns>

 

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit">

 

 

<ItemStyle Width="10px"/>

 

 

</telerik:GridEditCommandColumn>

 

 

 

<telerik:GridButtonColumn

 

 

CommandName="Delete"

 

 

ConfirmText="Are you sure you wish to delete this record?"

 

 

Text="Delete"

 

 

HeaderText="Delete"

 

 

ImageUrl="/next/RadControls/Grid/Skins/Test/Delete.gif"

 

 

UniqueName= "DeleteColumn2"

 

 

ButtonType="ImageButton"

 

 

ShowSortIcon="False"

 

 

>

 

 

<ItemStyle Width="10px"/>

 

 

</telerik:GridButtonColumn>

 

 

 

<telerik:GridBoundColumn Visible="false" ReadOnly="true" DataField="TypesID" UniqueName="TypesID">

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn Visible="false" ReadOnly="true" DataField="DDID" UniqueName="DDID">

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridDropDownColumn

 

 

DataField="TypesID"

 

 

HeaderText="Types"

 

 

UniqueName="TypesID"

 

 

DataSourceID="myTypes"

 

 

ListValueField="TypesID"

 

 

ListTextField="TypeName"

 

 

DropDownControlType="DropDownList"

 

 

>

 

 

<ItemStyle Width="210px"/>

 

 

</telerik:GridDropDownColumn>

 

 

 

</Columns>

 

 

 

<ExpandCollapseColumn Resizable="False" Visible="False">

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

 

<RowIndicatorColumn Visible="False">

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

 

</MasterTableView>

 

 

 

<FilterMenu EnableEmbeddedSkins="False" EnableTheming="True" Skin="TEST">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

 

 

</telerik:RadGrid>

 

[Mira]

Hi Christine,

To implement the desired functionality you could handle the ItemCreated event of the RadGrid and in its event handler if the created item is the GridDropDown column to attach an event handler for the SelectedIndexChanged event of the DropDownList and add an textbox which will be invisible unless the "Other" item is chosen from the DropDown. Then the value of this textbox should be added to the DropDown's collection on Save.

Please give this suggestion a try and see if it works for you.

Sincerely yours,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Venu Daroju]

Hi,

Could you please post a sample code. I need to hadle the dropdown boxe's SelectedIndexChanged event code behind.


Thank you

[Mira]

Hello Venu,

Please use the following code to implement the desired by you functionality:
C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && (e.Item as GridEditableItem).IsInEditMode)
        {
            GridEditableItem editedItem = e.Item as GridEditableItem;
            GridEditManager editMan = editedItem.EditManager;

            GridDropDownListColumnEditor editor =
            editMan.GetColumnEditor("DropDownColumnUniqueName") as GridDropDownListColumnEditor;                //in case you have RadComboBox editor for the GridDropDownColumn (this is the default editor),         //you will need to use ComboBoxControl below instead of DropDownListControl

            editor.DropDownListControl.SelectedIndexChanged += new EventHandler(DropDownListControl_SelectedIndexChanged);
        }
    }

    void DropDownListControl_SelectedIndexChanged(object sender, EventArgs e)
    {
        ...
    }

I hope it will help you.

Kind regards,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ronald de Bruijn]

I tested your solution and it did not work. I need to handle On Selected Index change of edit items (rad combos) I set auto post back true as well but nothings happened. I have a custom editor and check it on CreateColumnEditor as well but nothing happened. I thing you set auto postback to false somewhere. 
please help me to solve this problem. 

[Mira]

Hello Ronald,

Could you please try using the following code and let me know whether it helps:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && (e.Item as GridEditableItem).IsInEditMode)
    {
        GridEditableItem editedItem = e.Item as GridEditableItem;
        GridEditManager editMan = editedItem.EditManager;

        GridDropDownListColumnEditor editor =
        editMan.GetColumnEditor("DropDownColumnUniqueName") as GridDropDownListColumnEditor;                //in case you have RadComboBox editor for the GridDropDownColumn (this is the default editor),         //you will need to use ComboBoxControl below instead of DropDownListControl
        editor.DropDownListControl.AutoPostBack = true;
        editor.DropDownListControl.SelectedIndexChanged += new EventHandler(DropDownListControl_SelectedIndexChanged);
    }
}

void DropDownListControl_SelectedIndexChanged(object sender, EventArgs e)
{
    ...
}

If the issue persists, I suggest that you send us the code for the custom editor and the CreateColumnEditor event handler. We will examine it locally and get back to you with our findings.

Best wishes,
Mira
the Telerik team

[Ronald de Bruijn]

I put the autopostback = true on my custom column editor and it works.
thank you.