How to Find control in Radgrid on Client side

13 posts, 1 answers
  1. Gajanan
    Gajanan  avatar
    49 posts
    Member since:
    May 2010

    Posted 27 Feb 2012 Link to this post

    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");  
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Feb 2012 Link to this post

    Hello,

    Try the following javascript.
    JS:
    var EntityKeyName = $find("<%= RadGrid_ECNEntity.ClientID%>").get_masterTableView().get_dataItems()[0].findControl("RadComboBox_EntityKeyName");

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gajanan
    Gajanan  avatar
    49 posts
    Member since:
    May 2010

    Posted 29 Feb 2012 Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Feb 2012 Link to this post

    Hello,

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

    -Shinu.
  6. Gajanan
    Gajanan  avatar
    49 posts
    Member since:
    May 2010

    Posted 29 Feb 2012 Link to this post

    still i am facing the same problem
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Oct 2012 Link to this post

    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.
  8. Jason
    Jason avatar
    18 posts
    Member since:
    Aug 2013

    Posted 14 Feb 2015 in reply to Shinu Link to this post

    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?
  9. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 19 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Jaya
    Jaya avatar
    81 posts
    Member since:
    Mar 2011

    Posted 19 Feb 2015 in reply to Princy Link to this post

    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#
  11. Jaya
    Jaya avatar
    81 posts
    Member since:
    Mar 2011

    Posted 19 Feb 2015 in reply to Shinu Link to this post

    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#
  12. Jason
    Jason avatar
    18 posts
    Member since:
    Aug 2013

    Posted 19 Feb 2015 in reply to Eyup Link to this post

    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.

  13. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 24 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Jason
    Jason avatar
    18 posts
    Member since:
    Aug 2013

    Posted 24 Feb 2015 in reply to Eyup Link to this post

    I got it to work using a hidden field with an Ajaxed Grid. Thanks for the help, Eyup!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017