[Solved] Clientside - Find radcombo control in Header

[Wired_Nerve]

I have been looking for a means to find a radcombo control where I know the name of the control  (for example RadCombo ID =" RadComboColumn1" ) in a radGrid header...  CLIENT SIDE JAVASCRIPT

Any suggestions?

function confirmCallBackFn(arg) {

              if (arg == false) {

                  $.unblockUI();

                  return false;

              }

              $.unblockUI();

               

 

              var grid = $find("<%=RadGridImport.ClientID %>");

              var masterTableView = grid.get_masterTableView();

              var columns = masterTableView.get_columns();

              var columnCount = masterTableView.get_columns().length;

 

              //TODO:  Loop and get collection of radcombo's in headers and selected value.

              var selectedColumnFields = new Array();

              for (var i = 0; i < columnCount; i++) {

                  //TODO:  Find control in radgrid hearder.

                  var col = columns[i]????????;
var RadCombo = ????

                //.get_item().findControl("columm1");

              }

  

              __doPostBack("<%= FinishButton.UniqueID %>", "");

              return true;

          }

While this code works on the serverside, I am needing to convert this to the clientside:  var columnComboBox = headers[0].FindControl(columnName) as RadComboBox;

private List<ValueName> GetUserSelectedColumnMapping()
       {
           //Get the number of columns in the dynamic grid -2 hidden columns
           int radGridColumnCount = RadGridImport.MasterTableView.RenderColumns.Count() - 2;

           //Selected Column Type Mapping translates a dynamic column to a valid database table field.
           var selectedColumnTypeMapping = new List<ValueName>();
           GridItem[] headers = RadGridImport.MasterTableView.GetItems(GridItemType.Header);
           for (int i = 0; i < radGridColumnCount; i++)
           {
               string columnName = String.Format("Column{0}", i);  //Column{value} is set in the radgrid item created event.
               var columnComboBox = headers[0].FindControl(columnName) as RadComboBox;
               string selectedText = string.Empty;
               if (columnComboBox != null)
               {
                   var selected = columnComboBox.SelectedValue;
                   if (columnComboBox.SelectedItem != null)
                   {
                       selectedText = columnComboBox.SelectedItem.Text;
                   }

                   //Add the users selection to the mapping list.
                   selectedColumnTypeMapping.Add(new ValueName() { Name = selectedText, Value = selected, ColumnIndex = i });
               }
           }

           return selectedColumnTypeMapping;
       }

[Jayesh Goyani]

Hello,

Please try with the below code snippet.

http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-header-template---how-access-the-controls-in-javascript.aspx#1590308

Let me know if any concern.

Thanks,
Jayesh Goyani

[Scott]

Well, just like on stackoverflow, it's unfortunate when an answer only has a link and no content, because nine years later the link has gone stale.  What's the answer?

[Vessy]

Hi Scott, 

The new link to the linked thread is: https://www.telerik.com/forums/radgrid-header-template---how-access-the-controls-in-javascript#1590308

You can see the content of the linked reply below:

 

One approach is to save the HeaderTemplate control ID in the Hidden Field and from the ItemCreatedEvent, and then access the TextBox using the HiddenField value. Here is a sample code.

aspx:

<telerik:GridTemplateColumn  . . . . . . . . . >
     <HeaderTemplate>
           <asp:TextBox ID="TextBox1" runat="server" Text="Text"></asp:TextBox>
      </HeaderTemplate>
</telerik:GridTemplateColumn>

C#:

protected void rad_ItemCreated(object sender, GridItemEventArgs e)
 {
     if (e.Item is GridHeaderItem)
     {
         GridHeaderItem hItem = (GridHeaderItem)e.Item;
         TextBox txt1 = (TextBox)hItem.FindControl("TextBox1");
         HiddenField1.Value = txt1.ClientID.ToString();
     }
 }

Client-side:

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

 

 

[Wired_Nerve]

Jayesh Goyani,  thanks for pointing me in the right direction...

Here is what I finally ended up with:

function confirmCallBackFn(arg) {
    if (arg == false) {
        $.unblockUI();
        return false;
    }
    $.unblockUI();


    var grid = $find("<%=RadGridImport.ClientID %>");
    var masterTableView = grid.get_masterTableView();
    var columns = masterTableView.get_columns();
    var columnCount = masterTableView.get_columns().length;

    //TODO:  Loop and get collection of radcombo's in headers and selected value.
    var selectedColumnFields = new Array();
    for (var i = 0; i < columnCount; i++) {
        var result = $("#Column" + i.toString() + "_Input");
        alert(result.val());
        //TODO: Add Values to array for Ajax call to web method actions
    }

   // __doPostBack("<%= FinishButton.UniqueID %>", "");
    return true;
}