Read Dropdown selected value using javascript

[Rahul]

How to read selected value of drop down using javascript

In my case I have an GridTempalte column inside that edit template is their. Edit  template contains Update button when i click on button i want to get selected value of dropdown using javascript

Need help urgent


Thanks

[Jayesh Goyani]

Hello,

Please try with the below link/demo.

Access Another control which was in same level or in row

Access RadGrid Row and Column on Client Side

Conditionally enable/disable required field validators

Thanks,
Jayesh Goyani

[Princy]

Hi Rahul,

You can use a HiddenField to store the Client Id of the DropDownList and access in ClientSide.

ASPX:

<telerik:GridTemplateColumn HeaderText="ShipCountry">
    <EditItemTemplate>
         <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2"DataTextField="ShipCountry" DataValueField="ShipCountry">
         </asp:DropDownList>
    </EditItemTemplate>
</telerik:GridTemplateColumn>
. . . . . .
<ClientSettings>
   <ClientEvents OnCommand="RadGridCommand" />
</ClientSettings>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem edit = (GridEditableItem)e.Item;
        DropDownList list = (DropDownList)edit.FindControl("DropDownList1");
        HiddenField1.Value = list.ClientID;
    }
}

JS:

<script type="text/javascript">
    function RadGridCommand(sender, args) {
        if (args.get_commandName() == "Update") {
            var hdn1 = document.getElementById("HiddenField1");
            var s = hdn1.value;
            alert(document.getElementById(s).value); //Value of the dropDownList
        }
    }
</script>

Thanks,
Princy

[Rahul]

THnaks shinu for reply.. I tried your solution but i am getting below error

[ColumnName} is neither a DataColumn nor a DataRelation for table DefaultView

[Princy]

Hi Rahul,

This erratic behavior is due to the fact that,any of  your column cannot access its required DataField. Please check your DataSource configuration closely and see if this DataField's exact name is assigned to DataField's of your columns in radgrid.

Thanks,
Princy

[Konstantin Dikov]

Hello Rahul,

Please take a look at the following code snippet with the functionality that you have requested:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function getDropDownValue(sender, args) {
            var selectedValue = sender.get_element().parentElement.getElementsByTagName("select")[0].value;
        }
    </script>
</telerik:RadCodeBlock>

<div>
    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <Columns>
                <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:Label Text='<%# Eval("filename") %>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList runat="server">
                            <asp:ListItem Text="filename1" Value="filename1" />
                            <asp:ListItem Text="filename2" Value="filename2" />
                            <asp:ListItem Text="filename3" Value="filename3" />
                        </asp:DropDownList>
                        <telerik:RadButton ID="RadButton1" runat="server" Text="Get DropDownList value" AutoPostBack="false" OnClientClicked="getDropDownValue"></telerik:RadButton>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</div>

Hope that helps.

 

Regards,
Konstantin Dikov
Telerik

[Rahul]

Thanks for reply .. but dear u solution is not working for me it gives me error undefine sender

[Konstantin Dikov]

Hi Rahul,

The code I have provided in my last post works as expected on my end and if you are using RadButton as shown in the code snippet, the sender could not be undefined. Please try the approach from my previous post in a separate project and see if the error persists.

In order for us to be able to assist you any further, please open a regular support ticket with sample, runnable project attached, so we could inspect it locally and give you relevant to your project solution.

 

Regards,
Konstantin Dikov
Telerik

[Rahul]

I got solution .. Thanks everyone for your help

var DataItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems(); 

  

        for (i = 0; i < DataItems.length; i++) 

         { 

             var combo = $telerik.findControl(DataItems[i].get_element(), "rcbCategory"); 

            alert(combo.get_id()); 

         }