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

Best Practice Question: Using Javascript with FormTemplate

5 Answers 70 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeremy Yoder
Top achievements
Rank 1
Jeremy Yoder asked on 09 Jun 2010, 07:25 PM

In RadGrid, I'm using a FormTemplate. I need to use javascript on the FormTemplate controls when in edit mode. I couldn't find a way to tie events within the FormTemplate in the aspx page, so I'm assigning them in the grid's ItemCreated event, like so...

If (TypeOf e.Item Is GridEditFormItem) AndAlso (e.Item.IsInEditMode) Then 
    Dim item As GridEditFormItem = CType(e.Item, GridEditFormItem)  
    Dim chkName As CheckBox = CType(item.FindControl("chkName"), CheckBox)  
    Dim txtResult As RadTextBox = CType(item.FindControl("txtResult"), RadTextBox)  
    chkName.Attributes("onclick") = "NameChange('" & chkName.ClientID & "', '" & txtResult.ClientID & "');" 
End If 

Then in the client-side, the function looks something like the following...

function NameChange(chkNameClientID, txtResultClientID) {  
    var chkName = document.getElementById(chkNameClientID);  
    var txtResult = $find(txtResultClientID);  
    if (chkName.checked == false) {  
        txtResult.set_value('Joker');  
    } else {  
        txtResult.set_value('Batman');  
    }  

It works, but it seems a bit goofy to assign all my javascript calls on the server-side, pass all relevant ClientIDs and assign them to vars before working with them. So I'm wondering if this is the best way to do it, or if you recommend a different method and I'm going about it the hard way. Thanks.

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Jun 2010, 04:18 PM
Hello Jeremy,

Your approach is OK. The alternative is to find out the textbox client ID on the client, based on the client ID of the checkbox (having in mind that the two controls are in the same naming container). It is really a matter of preference. For example, your approach does not involve hard-coding server IDs on the client, as below:

<asp:CheckBox onclick="NameChange(this)" />

function NameChange(chkName) {  
    var txtResult = $find(chkName.id.replace("CheckBoxServerID", "RadTextBoxServerID"));  
    if (chkName.checked == false) {  
        txtResult.set_value('Joker');  
    } else {  
        txtResult.set_value('Batman');  
    }  
}

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Jeremy Yoder
Top achievements
Rank 1
answered on 14 Jun 2010, 04:36 PM

Thanks for the response. However, in my FormTemplate, the name of my checkbox is "chkName" and the textbox is "txtResult", so your ID replace code to get the different name doesn't make sense. I tried it to be sure and it didn't work. So I don't know how to reference txtResult without passing its ClientID from server-side, but if there is a way, I would like to know.
0
Dimo
Telerik team
answered on 15 Jun 2010, 09:33 AM
Hi Jeremy,

Maybe I was not clear enough. Here is a working demo:

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    Protected Sub RadGrid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
        Dim dt As New DataTable()
        Dim dr As DataRow
        Dim cols As Integer = 3
        Dim rows As Integer = 4
        Dim colName As String = "Column"
     
        For c As Integer = 1 To cols
            dt.Columns.Add(String.Format("{0}{1}", colName, c))
        Next
     
        For r As Integer = 1 To rows
            dr = dt.NewRow()
            For rc As Integer = 1 To cols
                dr(String.Format("{0}{1}", colName, rc)) = String.Format("{0}{1} Row{2}", colName, rc, r)
            Next rc
            dt.Rows.Add(dr)
        Next r
 
        TryCast(sender, RadGrid).DataSource = dt
    End Sub
     
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Office2007"
    Width="800px"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <p>Check and uncheck the checkbox to see the RadTextBox value change:</p>
                <asp:CheckBox ID="chkName" runat="server" onclick="NameChange(this)" />
                <telerik:RadTextBox ID="txtResult" runat="server" />
                <br /><br />
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>
 
<script type="text/javascript">
 
function NameChange(chkName)
    var txtResult = $find(chkName.id.replace("chkName", "txtResult")); 
    if (chkName.checked == false) { 
        txtResult.set_value('Joker'); 
    } else { 
        txtResult.set_value('Batman'); 
    
}
 
</script>
               
</form>
</body>
</html>


Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Jeremy Yoder
Top achievements
Rank 1
answered on 15 Jun 2010, 03:01 PM

I see what you're saying now. It worked for me in this instance. Though for some of my others, where the "this" variable is a RadTextBox, txtHolder.id also has a "_text" appended to the end, which I needed to include in the replace.

Since I'm not sure what other "extras" may be added for different RadControls as I need to use them for the "this" variable, maybe I'll just stick to my original method since you say that works just as well. That way, I won't ever get trapped with possibly unexpected id.
0
Dimo
Telerik team
answered on 15 Jun 2010, 03:31 PM
Hello Jeremy,

RadControls are not designed to be manipulated via their DOM elements and sometimes the DOM element with which the user interacts (e.g. RadInput textbox) is not the DOM element to which the control's client instance is attached. That's why the problem with the IDs may occur. Generally, you should use the RadControls client API for manipulation of their DOM elements.

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
Jeremy Yoder
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jeremy Yoder
Top achievements
Rank 1
Share this question
or