How to Find control in Radgrid on Client side

[Gajanan]

Dear all,

please suggest me how to find controls in grid on client side

i have radgrid controle in that ItemTemplate i have Radcombobox but i am not able to get that RadcomboBox on client side
my code is below

<telerik:RadGrid ID="RadGrid_ECNEntity" runat="server" AutoGenerateColumns="False"

GridLines="None" OnNeedDataSource="RadGrid_ECNEntity_OnNeedDataSource" OnInsertCommand="DoInsert">

<MasterTableView CommandItemDisplay="Top" EditMode="InPlace">

         <Columns>

               <telerik:GridTemplateColumn DataField="EntityName" HeaderText="EntityName" UniqueName="EntityName"

                    SortExpression="EntityName">

                     <ItemTemplate>

                      <asp:Label ID="lblECNEntityName" runat="server" Text='<%#Bind("EntityName") %>' />

                     </ItemTemplate>

                 <EditItemTemplate>

                     <telerik:RadComboBox ID="RadComboBox_EntityName" runat="server" EnableLoadOnDemand="true"

                                            DataTextField="Value" DataValueField="Key" OnItemsRequested="RadComboBox_EntityName_OnItemsRequested"

                                            AllowCustomText="true" ShowMoreResultsBox="true" OnClientSelectedIndexChanged="LoadECnEntityKeys" />

                  </EditItemTemplate>

                </telerik:GridTemplateColumn>

                <telerik:GridTemplateColumn DataField="EntityKeyName" HeaderText="EntityKeyName"

                                    UniqueName="EntityKeyName" SortExpression="EntityKeyName">

                        <ItemTemplate>

                          <asp:Label ID="lblECNEntityKeyName" runat="server" Text='<%#Bind("EntityKeyName") %>' />

                         </ItemTemplate>

                       <EditItemTemplate>

                         <telerik:RadComboBox ID="RadComboBox_EntityKeyName" runat="server" EnableLoadOnDemand="true" EnableViewState="false"

                              DataTextField="Value" DataValueField="Key" OnItemsRequested="RadComboBox_EntityKeyName_OnItemsRequested"

                              AllowCustomText="true" ShowMoreResultsBox="true" OnClientItemsRequested="ItemsLoaded"/>

                         </EditItemTemplate>

                  </telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

  

  

<telerik:RadScriptBlock ID="scriptBlock" runat="server">

    <script type="text/javascript">

      

        function LoadECnEntityKeys(sender, eventArgs) {

             

            var EntityKeyName = $find("<%= RadGrid_ECNEntity.ClientID%>").get_masterTableView().get_item().findControl("RadComboBox_EntityKeyName");  

  

            var item = eventArgs.get_item();

            EntityKeyName.set_text("Loading...");

              

            // if a Entity is selected

            if (item.get_index() > 0) {

                // this will fire the ItemsRequested event of the 

                // EntityKey combobox passing the EntityID as a parameter

                EntityKeyName.requestItems(item.get_value(), false);

            }

            else {

                // the -Select a Entity- item was chosen

                EntityKeyName.set_text(" ");

                EntityKeyName.clearItems();

            }

        }

  

        function ItemsLoaded(sender, eventArgs) {

            if (sender.get_items().get_count() > 0) {

                // pre-select the first item

                sender.set_text(sender.get_items().getItem(0).get_text());

                sender.get_items().getItem(0).highlight();

            }

  

            sender.showDropDown();

        }

  

    </script>

</telerik:RadScriptBlock>


I am getting error for this line
var EntityKeyName = $find("<%= RadGrid_ECNEntity.ClientID%>").get_masterTableView().get_item().findControl("RadComboBox_EntityKeyName");  


[Princy]

Hello,

Try the following javascript.
JS:

var EntityKeyName = $find("<%= RadGrid_ECNEntity.ClientID%>").get_masterTableView().get_dataItems()[0].findControl("RadComboBox_EntityKeyName");

Thanks,
Princy.

[Gajanan]

thanks for replay,
i used
$find("ctl00_ContentPlaceHolder1_RadGrid_ECNEntity").get_masterTableView().get_item().findControl("RadComboBox_EntityKeyName");

but i am getting script error
Microsoft JScript runtime error: Object doesn't support this property or method

[Shinu]

Hello,

Please check the following help documentation.
Getting Familiar with Client-side API

-Shinu.

[Gajanan]

still i am facing the same problem

[Shinu]

Hi,

Here is the sample code that I tried based on your scenario.
C#:

protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
{
   if (e.Item is GridEditableItem && e.Item.IsInEditMode)
   {
        GridEditableItem item = (GridEditableItem)e.Item;
        RadComboBox combo = (RadComboBox)item.FindControl("RadComboBox_EntityKeyName");
        RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['combo2'] = '" + combo.ClientID + "';</script>"));
   }
}

JS:

function LoadECnEntityKeys() {
var EntityKeyName = $find(window['combo2']);
}

Thanks,
Shinu.

[Jason]

I had this smiliar problem.  I used this method above successfully, but when use an AjaxManager with my grid as the ajax control updating itself my javascript function cant find the control.  I comment out the ajax setting and javascript works again.  Can you add to this method when an AjaxManager is in play?

[Eyup]

Hello Jason,

Can you elaborate on your specific scenario and what exactly you want to achieve? You can also provide sample screenshots or video demonstrating the desired behavior.

I'm sending a sample RadGrid web site to demonstrate a general implementation of accessing Telerik controls on the client. Please check the attached application and let me know if it helps you.

Regards,
Eyup
Telerik

 

 

[Jaya]

Hi
I have Bind My TelerikRadgrid Label, checkbox , Textbox etc some controls 

here when i click button click event i need how to find Telerik radgrid controltype name for ex:

How to find Label control id and Checkbox id and Textbox id how will do this C#

[Jaya]

hi
I have Bind My TelerikRadgrid Label, checkbox , Textbox etc some controls 

here when i click button click event i need how to find Telerik radgrid controltype name for ex:

How to find Label control id and Checkbox id and Textbox id how will do this C#

[Jason]

I use the JavaScript window method as in the post above by Shinu.

I add windows for the items I need to the Grid during ItemCreated

protected void gridQuestions_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem item = (GridEditFormItem)e.Item;
            RadTextBox text = (RadTextBox)item.FindControl("txtOptionGrid");
            RadListBox list = (RadListBox)item.FindControl("lbOptionsGrid");

            gridQuestions.Controls.Add(new LiteralControl("<script type='text/javascript'>window['text'] = '" + text.ClientID + "';</script>"));
            gridQuestions.Controls.Add(new LiteralControl("<script type='text/javascript'>window['list'] = '" + list.ClientID + "';</script>"));
        }
    }

I have a RadTextBox, a LinkButton and RadListBox

<telerik:RadTextBox ID="txtOptionGrid" runat="server" Width="500" MaxLength="256" Skin="Metrolike" EnableEmbeddedSkins="false" EmptyMessage="Add multiple choice option"/>

<asp:LinkButton ID="btnAddOptionGrid" runat="server" Text="Add" OnClientClick='<%# string.Format("AddMultipleOptionGrid(); return false;") %>'/>

<telerik:RadListBox ID="lbOptionsGrid" runat="server" Height="175" Width="530" Skin="Metrolike"
  EnableEmbeddedSkins="false" AllowReorder="true" AllowDelete="true" DataSourceID="OptionsDataSource"
  DataTextField="Text" DataValueField="ID" PersistClientChanges="true" >
  <ButtonSettings ShowDelete="true" ShowReorder="true" />
</telerik:RadListBox>

When I want to add an item from the TextBox to the ListBox using the LinkButton OnClientClick event, AddMultipleOptionGrid() gets called.

<script type="text/javascript">
  function AddMultipleOptionGrid() {
    var txtOption = $find(window['text']);
    if (!txtOption) {
      alert("Cant find TextBox");
      return false;
    }

    var lbOptions = $find(window['list']);
    if (!lbOptions) {
      alert("Cant find Listbox");
      return false;
    }

    lbOptions.trackChanges();
    var item = new Telerik.Web.UI.RadListBoxItem();
    item.set_text(txtOption.get_value());
    lbOptions.get_items().add(item);
    item.set_selected(true);
    item.scrollIntoView();
    txtOption.clear();
    lbOptions.commitChanges();
    txtOption.focus();
  }
</script>

It works as is with NO AjaxSetting on the grid, but once I introduce the code below AddMultipleOptionGrid() alerts "Cant find TextBox" and "Cant find Listbox"

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
  <ClientEvents OnRequestStart="ramOnRequestStart" />
    <ajaxsettings>
      <telerik:AjaxSetting AjaxControlID="gridQuestions">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="gridQuestions" />
        </UpdatedControls>
      </telerik:AjaxSetting>
    </ajaxsettings>
</telerik:RadAjaxManager>

I need this working with Ajax.

[Eyup]

Hi Jason,

To resolve this issue, you can replace the window['list'] with a HiddenField and add it to the AjaxSettings of the manager:
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.hiddenfield%28v=vs.90%29.aspx

Hope this helps.

Jaya, you can check the RadGridEditComboClientHideModified.zip web site provided in my previous post to see how you can achieve that on the client-side.

Regards,
Eyup
Telerik

 

 

[Jason]

I got it to work using a hidden field with an Ajaxed Grid. Thanks for the help, Eyup!

[Joe]

I realize this is very old but I need to get this working the same way Jason did.

Can someone share how this would look using the hidden field instead of window?

for

gridQuestions.Controls.Add(new LiteralControl("<script type='text/javascript'>window['text'] = '" + text.ClientID + "';</script>"));
gridQuestions.Controls.Add(new LiteralControl("<script type='text/javascript'>window['list'] = '" + list.ClientID + "';</script>"));

var txtOption = $find(window['text']);

var lbOptions = $find(window['list']);

[Eyup]

Hello Joe,

There is no need to pass the ClientID of the controls you need to access. You can instead the $telerik.findContol() or findElement() methods on client-side with the original ID of the controls in order to access them:
https://www.telerik.com/support/kb/aspnet-ajax/details/access-telerik-controls-on-client-side

For a practical demonstration, you can also check the RadGridEditComboClientHideModified.zip sample provided in this forum thread.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik