Client-Side script for the Edit Form Template

6 posts, 0 answers
  1. Paul
    Paul avatar
    29 posts
    Member since:
    Aug 2011

    Posted 03 Nov 2011 Link to this post

    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?

  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 08 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Paul avatar
    29 posts
    Member since:
    Aug 2011

    Posted 08 Nov 2011 Link to this post

    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?

  5. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 10 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Paul
    Paul avatar
    29 posts
    Member since:
    Aug 2011

    Posted 10 Nov 2011 Link to this post

    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.
  7. Paul
    Paul avatar
    29 posts
    Member since:
    Aug 2011

    Posted 11 Nov 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017