How to find control id by $find() method

[tony wong]

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. 

[Princy]

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.

[tony wong]

hi ：Princy ，thank you for your reply ,I got it .thanks again

[Princy]

You're welcome .        :)

[Sunny]

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

[Sunny]

Any update regarding this issue?

Thanks     

[Nencho]

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

 

 

[Sunny]

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     

[Nencho]

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

 

 

[Sunny]

Hi,

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

Thanks     

[Nencho]

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