This is a migrated thread and some comments may be shown as answers.

How to find control id by $find() method

10 Answers 686 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
tony wong
Top achievements
Rank 1
tony wong asked on 12 May 2010, 03:17 AM


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. 

10 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 14 May 2010, 02:18 PM
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.
0
tony wong
Top achievements
Rank 1
answered on 17 May 2010, 06:55 AM
0
Princy
Top achievements
Rank 2
answered on 17 May 2010, 07:49 AM

You're welcome .        :)
0
Sunny
Top achievements
Rank 1
answered on 16 Oct 2014, 02:08 PM
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
0
Sunny
Top achievements
Rank 1
answered on 17 Oct 2014, 01:00 PM
Any update regarding this issue?

Thanks     
0
Nencho
Telerik team
answered on 21 Oct 2014, 11:02 AM
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.

 
0
Sunny
Top achievements
Rank 1
answered on 21 Oct 2014, 01:55 PM
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     
0
Nencho
Telerik team
answered on 24 Oct 2014, 11:02 AM
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.

 
0
Sunny
Top achievements
Rank 1
answered on 24 Oct 2014, 04:43 PM
Hi,

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

Thanks     
0
Nencho
Telerik team
answered on 29 Oct 2014, 11:52 AM
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.

 
Tags
ComboBox
Asked by
tony wong
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
tony wong
Top achievements
Rank 1
Sunny
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or