Finding combobox in gridview

[Jan Peek]

I've got a gridview (regular one, not radgrid) with a radcombobox in a data column (read: there'll be many on the page, one per row). Its server ID is "ddProduct" for example. I need to be able to access and change the value of a specific row's dropdown via javascript.

I know how to change the selected value via JS using the $find() function, but I am having trouble handling the fact that there are many of this radcombobox with the same server id.

I do have some ways of identifying what row's ddProduct I want to change via javascript, but I'm not sure how I can utilize that in the $find() function...

Any advice?

[Kalina]

Hello Jan Peek,

To find the client-side instance of the RadComboBox control you can use different approaches – please take a look at this help article.

In order to provide to you more precise answer I need more information.
Could you please explain in details the scenario that you are trying to implement?
At what control event you are trying to set the SelectedValue of the RadComboBox?
Thank you in advance.

Regards,
Kalina
the Telerik team

[Jan Peek]

I've included some code below. Basically I have a dropdown in each row in the gridview. Next to it is a button that launches a RadWindow with a hierarchy in it. When that hierarchy window is closed, I want to update the selectedvalue (or insert) of the dropdown in the appropriate row. I've done this outside of a gridview just fine, my challenge is finding the dropdown control in the same grid row that the hierarchy window was used in.

Gridview:

 <asp:GridView ID="gvPaymentDetails" runat="server" AllowSorting="false"
                    AutoGenerateColumns="False" DataKeyNames="tifs_payment_line"
                    PageSize="30" CssClass="filterGridPromoCal fixwidthPaymentDetails"
                     PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
                    ShowFooter="false">
                    <Columns>
                        <asp:TemplateField HeaderText="Product">
                            <HeaderStyle CssClass="head_bg" width="300px" />
                            <ItemTemplate>
                                <telerik:RadComboBox ID="ddProduct" runat="server" AllowCustomText="false" Filter="Contains" NoWrap="true" Width="320px" DropDownWidth="500">
                                </telerik:RadComboBox>
                                <a href="javascript:openWinProd2Hier(<%# Eval("tifs_payment_dtl_id") %>);"><img runat="server" id="prod_searchimg" src="images/hierarchy.png" border="0" class="hierarchy_button" /></a>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

Javascript:

function openWinProd2Hier(line) {
            //opens the Product Hierarchy window
            var oWndProd2 = radopen("ProductHierarchy.aspx?validOnly=false&line=" + line, "Prod2Hier");
        }

        function OnClientCloseProd2(oWndProd2, args) {
            //calling function in product hierarchy window to get the string of checked ndoes
            var line = oWndProd2.get_contentFrame().contentWindow.GetLine();
            var productfromhierarchy = oWndProd2.get_contentFrame().contentWindow.GetCheckNodes();
            if (productfromhierarchy.text != '') {
                var ddProd2 = $find('ctl00_mainContent_gvPaymentDetails_ctl02_ddProduct' + line);

                var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                comboItem.set_text(productfromhierarchy.text);
                comboItem.set_value(productfromhierarchy.values);

                ddProd2.trackChanges();
                ddProd2.get_items().add(comboItem);
                comboItem.select();
                ddProd2.commitChanges();
            }
        }

The line with "var ddProd2 = $find('ctl00_mainContent_gvPaymentDetails_ctl02_ddProduct' + line);" in it is where I'm trying to get the dropdown. I had tried to include the line number in the control's ID and while that works for the most part, it causes the dropdown to lose its value after a postback because of the change in control ID in the code-behind...

Does this help?

[Kalina]

Hello Jan Peek,

Please accept my apology for the delayed reply.

Let me suggest you handle OnRowDataBound server event of the GridView and attach an “OnClick”  handler function to the image button in order to obtain the RadComboBox ClientID and RowIndex at client-side:

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        HtmlImage prod_searchimg =
                (HtmlImage)e.Row.FindControl("prod_searchimg");
        RadComboBox ddProduct =
                (RadComboBox)e.Row.FindControl("ddProduct");
        prod_searchimg.Attributes.Add("onclick", "onGridViewRowSelected('" + e.Row.RowIndex + "','" + ddProduct.ClientID + "')");
    }
}

<script type="text/javascript">
    var rowIndex;
    var comboBox;

    function onGridViewRowSelected(index, combo) {

        rowIndex = index;
        comboBox = combo;
    }
    function openWinProd2Hier(line) {

        //opens the Product Hierarchy window
        var oWndProd2 = radopen("ProductHierarchy.aspx", "RadWindow1");
    }

    function OnClientCloseProd2(oWndProd2, args) {

        alert("rowIndex: " +rowIndex + " current RadComboBox client id:" + comboBox);

    }
</script>

I made a small basic example for you - please find it attached.

All the best,
Kalina
the Telerik team

[Jan Peek]

That's excellent! Thank you very much!