This is a migrated thread and some comments may be shown as answers.

Read Dropdown selected value using javascript

8 Answers 420 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 29 Oct 2013, 10:56 AM
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

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 29 Oct 2013, 11:19 AM
0
Princy
Top achievements
Rank 2
answered on 29 Oct 2013, 12:19 PM
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
0
Rahul
Top achievements
Rank 1
answered on 29 Oct 2013, 01:25 PM
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
0
Princy
Top achievements
Rank 2
answered on 30 Oct 2013, 03:27 AM
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

0
Konstantin Dikov
Telerik team
answered on 01 Nov 2013, 08:29 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Rahul
Top achievements
Rank 1
answered on 01 Nov 2013, 01:46 PM
Thanks for reply .. but dear u solution is not working for me it gives me error undefine sender
0
Konstantin Dikov
Telerik team
answered on 06 Nov 2013, 09:10 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Rahul
Top achievements
Rank 1
answered on 08 Nov 2013, 01:44 PM

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()); 

         }

Tags
Grid
Asked by
Rahul
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Princy
Top achievements
Rank 2
Rahul
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or