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

Best Practice Question: Using Javascript with FormTemplate

5 Answers 111 Views

Grid

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

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

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.

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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