Accessing HTML element within CommandItemTemplate Via Javascript

[Jim Harris]

I have the following code in place on a RadGrid. I need to be able to access the ddColumns dropdown HTML element from Javascript.and get the selected value from the dropdown list. Can anyone give me an example of how to do this?

<telerik:RadGrid ID="rgSchedules" Width="100%" CssClass="centergrid" runat="server" ShowFooter="true"
                        OnItemDataBound="rgNettingProductSchedules_ItemDataBound" OnDetailTableDataBind="rgNettingProductSchedules_DetailTableDataBind"
                        OnSortCommand="rgNettingProductSchedules_SortCommand" OnItemCommand="rgNettingProductSchedules_ItemCommand" AllowSorting="false"
                        SortingSettings-SortedBackColor="ControlDark" AllowFilteringByColumn="false" AllowPaging="false" AllowMultiRowSelection="true">
                        <%-- OnDataBound="rgSchedules_DataBound" --%>
                        <GroupingSettings CaseSensitive="false" />
                        <ClientSettings>
                            <ClientEvents OnHierarchyExpanded="RowExpanded" />                            
                            <Selecting AllowRowSelect="true" />
                            <Selecting EnableDragToSelectRows="false" />
                        </ClientSettings>
                        <MasterTableView Name="Scheduling" DataKeyNames="Id" AllowMultiColumnSorting="false" AllowNaturalSort="true" AllowPaging="false"
                            HierarchyLoadMode="Client" AllowFilteringByColumn="false" AutoGenerateColumns="false" CommandItemDisplay="Top" CommandItemStyle-Height="30px">
                            <CommandItemTemplate>
                                <table width="100%" >
                                    <tr>
                                        <td align="left" >
                                            <%--<a href="javascript:void(0);" onclick="javascript:BeginIndexCollection();">--%>
                                            <a href="javascript:void(0);" onclick="javascript:InitGroupEdit();">
                                            <asp:Image ID="Image3" runat="server" style="padding: 0px 5px 0px 5px; border: none;" ImageUrl="~/_assets/images/Edit.gif" />
                                                Group Schedule Edit
                                            </a>
                                            &nbsp;&nbsp;&nbsp;
                                           <a href="javascript:void(0);" onclick="javascript:BeginShiftIndexCollection();">
                                            <asp:Image ID="Image4" runat="server" style="padding: 0px 5px 0px 5px; border: none;" ImageUrl="~/_assets/images/Edit.gif" />
                                                Group Shift Edit
                                            </a>
                                        </td>
                                        <td align="left">
                                            <asp:Label ID="lblColumn" runat="server" style="color:White" Text="Show/Hide Columns"></asp:Label>
                                             <asp:DropDownList ID="ddColumns" onchange="ShowHideColumn()" runat="server">
                                                <asp:ListItem Selected="True" Value="SelectOne" Text="Select One" />
                                                <asp:ListItem Value="Alloy" Text="Alloy" />
                                                <asp:ListItem Value="PlannedCasts" Text="Planned Casts" />
                                                <asp:ListItem Value="PlannedCastsLbs" Text="Planned Casts Lbs" />
                                                <asp:ListItem Value="PlannedGoodLbs" Text="Planned Good Lbs" />
                                                <asp:ListItem Value="ActualCast" Text="Actual Cast"/>
                                                <asp:ListItem Value="ActualCastLbs" Text="Actual Cast Lbs" />
                                                <asp:ListItem Value="ActualGoodLbs" Text="Actual Good Lbs" />
                                                <asp:ListItem Value="Scenario" Text="Scenario" />
                                            </asp:DropDownList>
                                        </td>
                                    </tr>                            
                                </table>                        
                            </CommandItemTemplate>


function ShowHideColumn() {
                var radGrid = GetProductGrid();
                var dd = document.getElementById("ddColumns");
                alert(dd);

                var table = radGrid.get_masterTableView();
                var column = table.getColumnByUniqueName("Alloy");
                
                if (column.style.display = "none")
                    column.style.display = "";
                else
                    column.style.display = "none";
            }        

[Princy]

Hello Jim,

As far as I know there is no direct method to access the control inside Command itemTemplate. Since it is inside another control, it is not possible too access the control directly.
In your case you can pass the this object along with the function name and thus you can access the DropDownList.
aspx:

<asp:DropDownList ID="ddColumns" onchange="ShowHideColumn(this)" runat="server">

Javascript:

function ShowHideColumn(sender)
 {
    alert(sender.id);
  }

If you want to access the control in some other event, one approach is to save the control ID in the Hidden Field and from the ItemCreatedEvent, and then access the control using the HiddenField value. Here is a sample code.
C#:

protected void rad_ItemCreated(object sender, GridItemEventArgs e)
 {
   if(e.Item is GridCommandItem)
     {
         GridHeaderItem hItem = (GridHeaderItem)e.Item;
         DropDownList ddl1= (DropDownList )hItem.FindControl("ddColumns");
         HiddenField1.Value = ddl1.ClientID.ToString();
     }
 }

 
Javascript:

function ButtonClick()// accessing the HeaderTemplate TextBox value from external Button click.
  {
      var hidden = document.getElementById("HiddenField1");
      var dropDown= document.getElementById(hidden.value);
  }

Thanks,
Princy.