How to find control id by $find() method

12 posts, 1 answers
  1. tony wong
    tony wong avatar
    5 posts
    Member since:
    Jan 2010

    Posted 11 May 2010 Link to this post



    Hi all,

    I  created a control in codebehind,and assigned a id in server side , I need to do with it in client side now ,the following is js function.I call this function in codebehind,id is a parameter,I need to find id of client side。
     
     function cbxSelectChange(id)
        {        
        var cbxId = $find("<%= id.ClientID %>"); ---  id is a parameter
        
        }



    Any help on this will be grateful. 
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 May 2010 Link to this post

    Hi Tony,

    I had a requirement of passing dynamically created control's ID to client side and tried following approach in order to accomplish that. Here is my code.

    Code for invoking the client method by passing the control's ClientID
    C#:
         
           
            RadComboBox combo = 
    new RadComboBox(); 
            
            protected void Page_Load(object sender, EventArgs e) 
            { 
           
                combo.ID = "ControlID"
                combo.Text = "Country"
                this.Form.Controls.Add(combo);  // adding the control to the form       
            } 
     
            protected void Button1_Click(object sender, EventArgs e) 
            {
                // Calling the javascript function 'cbxSelectChange' by passing ClientID of the control as parameter
                ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "change""function f(){change('" + combo.ClientID + "');};Sys.Application.add_load(f);"true);
            }
            

    And in the client side get the ClientID of the control as parameter and get reference to client object using $find method as follows:
    Javascript:

         
          <script type="text/javascript"
            function change(id){          
                alert($find(id).get_id()); 
                return true
           } 

    I hope this would help you also.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. tony wong
    tony wong avatar
    5 posts
    Member since:
    Jan 2010
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 May 2010 Link to this post


    You're welcome .        :)
  6. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 16 Oct 2014 Link to this post

    Its' not working with my code and displaying an error in Chrome browser and saying (uncaught typeerror cannot read property id of null). I really need the solution. 

    I am using date and time picker in a asp datalist and finding control of id and from code behind i am passing controls id but could get the id in javascript function. Let me know the solution.

    Thanks
  7. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 17 Oct 2014 in reply to Sunny Link to this post

    Any update regarding this issue?

    Thanks     
  8. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 21 Oct 2014 Link to this post

    Hello Sunny,

    I would like to ask you to demonstrate us the approach that you use at your end, along with the declaration of the date and time pickers in a asp datalist, so we could examine it locally and provide you with the proper solution.


    Regards,
    Nencho
    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.

     
  9. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 21 Oct 2014 Link to this post

    Hello Team,

    Yeah, I can provide you. Please have a look.

    Below is the grid in which i am using telerik raddate and radtime picker controls.

     <asp:DataGrid ID="dlWorkOrders" runat="server" AutoGenerateColumns="False"
                        BorderStyle="NotSet" CellPadding="0" CellSpacing="0" BorderWidth="0" CssClass="dg2">
                        <HeaderStyle CssClass="dghead"></HeaderStyle>
                        <ItemStyle CssClass="dg2"></ItemStyle>
                        <Columns>
                            <asp:TemplateColumn HeaderText="Select">
                                <HeaderStyle Wrap="False" HorizontalAlign="Center" CssClass="dg2headstart" />
                                <ItemStyle Wrap="False" HorizontalAlign="Center" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:CheckBox ID="chkSelect" CssClass="checkable" runat="server"></asp:CheckBox>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Work Order">
                                <HeaderStyle Wrap="False" HorizontalAlign="Left" />
                                <ItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblWOID" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.WOID", "{0:D8}") %>'>
                                    </asp:Label>
                                    <input type="hidden" id="hdWOID" runat="server" value='<%# Eval("WOID") %>' />
                                    <asp:HiddenField ID="hfWOID" Value='<%# Eval("WOID") %>' runat="server" />
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Status">
                                <HeaderStyle Wrap="False" HorizontalAlign="Left" />
                                <ItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("Status") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                                <FooterStyle Wrap="False" />
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Labor Hours">
                                <HeaderStyle Wrap="False" HorizontalAlign="Right" />
                                <ItemStyle Wrap="False" HorizontalAlign="Right" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblLaborHours" runat="server" Text='<%# Eval("WorkorderTechnicianHourSum") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Budget Hours">
                                <HeaderStyle Wrap="False" />
                                <HeaderStyle HorizontalAlign="Right" />
                                <ItemStyle Wrap="False" HorizontalAlign="Right" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblBugetHours" runat="server" Text='<%# Eval("EstHrs") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Labor Expense">
                                <HeaderStyle Wrap="False" HorizontalAlign="right" />
                                <ItemStyle Wrap="False" HorizontalAlign="right" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblLaborCosts" runat="server" Text=""></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Materials Expense">
                                <HeaderStyle Wrap="False" HorizontalAlign="Right" />
                                <ItemStyle Wrap="False" HorizontalAlign="Right" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblMaterialCost" runat="server" Text=""></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Total Costs">
                                <HeaderStyle Wrap="False" HorizontalAlign="Right" />
                                <ItemStyle Wrap="False" HorizontalAlign="Right" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:Label ID="lblTotalCost" runat="server" Text="">
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Output To : Assignee" Visible="False">
                                <HeaderStyle Wrap="False" HorizontalAlign="Left" />
                                <ItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <asp:DropDownList runat="server" ID="lstTechnician" Width="254px">
                                        <asp:ListItem Text="Choose One" Value="-1" />
                                    </asp:DropDownList>
                                    <asp:Label runat="server" ID="lblTechnician"></asp:Label>
                                    <%--  STO 20 Apr 2011 D-01716 Removing validator since no validation required for invisible field
                                        <asp:customvalidator id="cvldTechnician" runat="server" errormessage="* Assignee cannot be blank." enableviewstate="false"
                                            controltovalidate="lstTechnician"></asp:customvalidator>
                                    --%>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Closing Notes">
                                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="100%" />
                                <ItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="clean">
                                        <tr>
                                            <td>
                                                <asp:TextBox ID="txtNotes" Width="100%" runat="server" TextMode="MultiLine" Rows="2"></asp:TextBox>
                                            </td>
                                            <td width="5px">
                                                <asp:CustomValidator ID="vldTxtNotes" runat="server" ErrorMessage=""
                                                    EnableViewState="false" ControlToValidate="txtNotes"></asp:CustomValidator>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Completion Date">
                                <HeaderStyle Wrap="False" HorizontalAlign="Left" CssClass="dg2headend" Width="100px" />
                                <ItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Top" />
                                <ItemTemplate>
                                    <telerik:RadDatePicker ID="txtCompDate" MinDate="01/01/1900" MaxDate="12/31/2100" runat="server">
                                        <Calendar ID="Calendar1" runat="server">
                                            <SpecialDays>
                                                <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Silver" />
                                            </SpecialDays>
                                        </Calendar>
                                    </telerik:RadDatePicker>
                                    <telerik:RadTimePicker ID="txtCompTime" TimeInterval="0:30:0" runat="server" />
                              

                                </ItemTemplate>
                            </asp:TemplateColumn>
                        </Columns>
                    </asp:DataGrid>

    Now below is the code where i am finding raddate and radtime picker code in code behid.

      Dim txtCompDate As Telerik.Web.UI.RadDatePicker = CType(e.Item.FindControl("txtCompDate"), Telerik.Web.UI.RadDatePicker)
      Dim txtCompTime As Telerik.Web.UI.RadDatePicker = CType(e.Item.FindControl("txtCompTime"), Telerik.Web.UI.RadDatePicker)

    Below is the javascript function that i am calling from code behind in my code and using raddate and radtime picker control clientid to get the id in javascript function

    chkSelect.Attributes.Add("onmousemove", "OnCheckedChanged(" & hdWOID.ClientID & "," & lblWOID.ClientID & "," & lblStatus.ClientID & "," & lblLaborHours.ClientID & "," & lblBugetHours.ClientID & "," & lblLaborCosts.ClientID & "," & lblMaterialCost.ClientID & "," & lblTotalCost.ClientID & "," & txtNotes.ClientID & "," & txtCompDate.ClientID & "," & chkSelect.ClientID & " );")

    Below is the Javascript function

            function OnCheckedChanged(woid, lblWOID, lblStatus, lblLaborHours, lblBugetHours, lblLaborCosts, lblMaterialCost, lblTotalCost, txtNotes, txtDate, chkSelect) {        //lstTechnician, lblTechnician was removed
                var chkDetails = document.getElementById("chkDetails");

                var id = $find(txtDate).get_id();
                alert(id);

    }

    Using this function i couldn't able to enable and disable controls.

    Please let me know the solution asap.

    Thanks     
  10. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 24 Oct 2014 Link to this post

    Hello Sunny,

    After some further attempts to replicate the described issue, using some dummy data for the DataGrid  underlying data source, I am afraid that I am still unable to do so. This is why, I would suggest you to submit a support, along with a runnable sample attached, so we could be able to replicate the described problem locally and provide you with the proper solution.

    Regards,
    Nencho
    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.

     
  11. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 24 Oct 2014 in reply to Nencho Link to this post

    Hi,

    My project is too big(In GB's) so please suggest me other way?

    Thanks     
  12. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 27 Oct 2014 Link to this post

    Any other idea? or update?

    Thanks     
  13. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 29 Oct 2014 Link to this post

    Hello Sunny,

    I would suggest you to submit a support ticket, where I can provide with an account and credentials for our ftp. There you could add your project, so we could inspect the faced issue locally and troubleshoot it for you.

    Regards,
    Nencho
    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017