Client-Side script for the Edit Form Template

[Paul]

I have a TreeList with a popup EditForm Template. I would like to be able to enable/disable some of the controls based on the user’s input. Is there a way to put client script in the EditForm Template to control their state?

[Tsvetina]

Hi Paul,

There should be no problem to add client script inside the FormTemplate of your RadTreeList. You could use RadInput controls and attach their OnBlur client event to check the value and if needed, disable the controls in question. What problems exactly are you encountering in this scenario?

Greetings,
Tsvetina
the Telerik team

[Paul]

I am new to these controls. I am using the EditFormSetting of type Template as a pop-up. Since it is a pop-up I assume the code has to be with the controls, preferable client-side. How to you put java script in the template definition?

[Tsvetina]

Hello Paul,

Even with a popup edit form, all parts of the page are accessible from inside the edit form, it does not open a separate window. So, you can directly put a script block outside or inside the edit form and trigger it either on text changed event of a textbox or on button click of the submit (insert/update) button. For example:

<FormTemplate>
     <table>
         <tr class="EditFormHeader">
             <td colspan="2" style="font-size: small">
                 <b>Employee Details:</b>
             </td>
         </tr>
         <tr>
             <td style="vertical-align: top">
                 <table class="module">
                     <tr>
                         <td>
                             First Name:
                         </td>
                         <td>
                             <asp:TextBox ID="TextBox1" Text='<%# Bind("LastName") %>' runat="server" onchange="checkName(this);">
                             </asp:TextBox>
                             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                                 ErrorMessage="Should enter value" />
                         </td>
                     </tr>
      .............................................
                 <telerik:RadButton ID="btnUpdate" Text='<%# (Container is TreeListEditFormInsertItem) ? "Insert" : "Update" %>'
                     runat="server" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                     Icon-PrimaryIconCssClass="rbOk">
                 </telerik:RadButton>

And javascript outside of the edit form:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function checkName(sender) {
            if (sender.value == 'Larry') {
                $find(sender.id.replace('TextBox1', 'btnUpdate')).set_enabled(false); //$find is used for script controls like ours
            }
        }
    </script>
</telerik:RadCodeBlock>

This would result in the submit button being disabled if 'Larry' is input in the textbox.

I hope this helps.

Kind regards,
Tsvetina
the Telerik team

[Paul]

Thanks for the response,

The onchange event looks for checkname on the server. I’m trying to do this client-side. If I reference the one of the controls, server-side, to add a client-side event call, I get an error stating that it is not declared or inaccessible due to its protection level.

[Paul]

I got the enabling/disabling of the controls working in the EditFormSettings Template. I just had to make some minor changes to the code you provided. I specified the script block without a RadCodeBlock and I had to use document.getElementById instead of $find.

 

Thanks for the help,

Paul