AJAX Drop Down Extender problems updating Textbox with selected index value

Question

Hello,

I have a gridview where all rows are editable by default. Most columns require a simple textbox with some formating validators which are not an issue.

I do however have 1 column that requires a List of Choices from which the user can select. To do this I am using the Ajax Drop Down Extender to bind to the textbox, so when the textbox is clicked on it gives them the list... Simple enough.

The problem arises after the user selects an option from the drop down, I cannot seem to get the textbox to update it's value with the new selected one.

This is the ItemTemplate from the gridview column.

<%--  PRIORITY --%> 
                <asp:TemplateField HeaderText="PRI" SortExpression="PRIORITY">
                    <ItemTemplate>                                                                   
                        <ItemStyle CssClass="ssCellSelected" />
                        <asp:Panel ID="priorityitems" runat="server" BorderColor="Aqua" BackColor="White" BorderWidth="1">
                        <asp:ListBox ID="lstPRIORITY" runat="server" SelectedItem='<%# Bind("PRIORITY") %>'>
                            <asp:ListItem>P1</asp:ListItem>
                            <asp:ListItem>P2</asp:ListItem>
                            <asp:ListItem>P3</asp:ListItem>
                        </asp:ListBox>
                        </asp:Panel>
                        <asp:TextBox ID="PRIORITY" runat="server" Width="35px" Text='<%# Eval("PRIORITY") %>' CssClass="ssTextBox"></asp:TextBox>
                        <cc1:DropDownExtender ID="PRIORITY_DropDownExtender" runat="server" 
                            Enabled="True" DropDownControlID="priorityitems" TargetControlID="PRIORITY">
                        </cc1:DropDownExtender>
                    </ItemTemplate> 
                    <ItemStyle CssClass="ssCell" />                   
                </asp:TemplateField>

Here is the code behind for the onclick event creation for each row.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)

If e.Row.RowType = DataControlRowType.DataRow Then Dim lstPRI As ListBox = DirectCast(e.Row.Cells(3).FindControl("lstPRIORITY"), ListBox) Dim rowIndex As Integer = e.Row.RowIndex Dim columIndex As Integer = 3 'Column index is 0 If lstPRI IsNot Nothing Then lstPRI.Attributes.Add("onclick", "setText(this.options[this.selectedIndex].value," & rowIndex.ToString & "," & columIndex.ToString & ");") End If End If

End Sub

I need to take [this.selectedIndex].Value and apply that to the TextBox with the ID of PRIORITY

I need to somehow turn this into it's dynamic counterpart

<script type="text/javascript" language="javascript">
    function setText(newValue, row, column) {
        document.getElementById("ctl00_pagebody_GridView1_ctl02_PRIORITY").value = newValue;
    }
</script>

Answer 1

I was able to get this working using Dom and Javascript.

A good tutorial was found here... http://www.opensourcetutorials.com/tutorials/Client-Side-Coding/JavaScript/javascript-document-object-model/page1.html

Anyhow, I installed IE DEV TOOLS so I could view the HTML of the gridview and figured out the position of the textbox...

Then in the script function on the aspx page..

Note that I had to choose the first childnode of the gridview because inside the table was a tag that then contained the whole table structure.

I Also had to add 1 to the row integer because the first row is the header of the gridview table

<script type="text/javascript" language="javascript">
    function setText(newValue, therow, column) {
        var gridView = document.getElementById('<%= GridView1.ClientID %>').childNodes[0];
        var row = gridView.childNodes[parseInt(therow) + 1];
        var cell = row.cells[column];
        cell.childNodes[1].childNodes[0].value = newValue;
    }       
</script>