JavaScript and WebUserControl

9 posts, 0 answers
  1. Anthony
    Anthony avatar
    24 posts
    Member since:
    Oct 2013

    Posted 07 Nov 2014 Link to this post

    Hi Everyone,

    I have a unique situation and I can't find any help on it.  I have a RadGrid that uses a User Web Control(.ascx) to insert and edit the grid items.  I need to used javascript to get the value of two RadTextBox on the User Web Control and sum them together and then update a third RadTextBox with the result value.

    Here is my problem:
    1) I have to create the javascript on the parent aspx page in order for the User Web Control to see it. If I create it on the .ascx page, it doesn't see it.
    2) Since I have to create it on  the parent aspx page where the grid reside, I can't figure a way to access the RadTextBox value on the User Web Control.

    Any help would be greatly appreciated.  Is there a way to run the javascript within the User Web Control?

    Anthony
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 10 Nov 2014 in reply to Anthony Link to this post

    Hi,

    Please try with the below code snippet.

    User control:
    <div>
               <label>textbox from user control</label>
               <telerik:RadTextBox ID="RadTextBox1" runat="server">
                   <ClientEvents OnBlur="textboxBlur" />
               </telerik:RadTextBox>
               <telerik:RadTextBox ID="RadTextBox2" runat="server">
                   <ClientEvents OnBlur="textboxBlur" />
               </telerik:RadTextBox>
               <telerik:RadTextBox ID="RadTextBox3" runat="server"></telerik:RadTextBox>
           </div>


    Parent page:
    <script type="text/javascript">
        function textboxBlur(sender, args) {
            var text1 = $telerik.findTextBox(sender.get_id().replace("RadTextBox2", "RadTextBox1"));
            var text2 = $telerik.findTextBox(sender.get_id().replace("RadTextBox1", "RadTextBox2"));
            var text3 = $telerik.findTextBox(sender.get_id().replace("RadTextBox1", "RadTextBox3").replace("RadTextBox2", "RadTextBox3"));
            text3.set_value(parseInt(text1.get_value()) + parseInt(text2.get_value()))
        }
    </script>


    Let me know if any concern.

    Thanks,
    Jayesh Goyani
  3. Anthony
    Anthony avatar
    24 posts
    Member since:
    Oct 2013

    Posted 13 Nov 2014 in reply to Jayesh Goyani Link to this post

    Hi Jayesh,

    That works but I find it very tedious if I have like 12 box that I have to add.  Is there anyway of reducing the coding and to make it more efficient? Is there a way to get the textbox value directly without using the replace function?

    Thank you.
  4. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 14 Nov 2014 in reply to Anthony Link to this post

    Hi,

    Sorry but right now I don't know about other solution. (because textbox ID is generated dynamically)

    Let me know if any concern.

    Thanks,
    Jayesh Goyani
  5. Anthony
    Anthony avatar
    24 posts
    Member since:
    Oct 2013

    Posted 14 Nov 2014 Link to this post

    Hi Jayesh,

    Now that I get some time to go back to this problem, i finally figure it out.  I just want to post it in case someone else was looking for this solution.  For latency reason, I prefer things like this done on the  client side instead of server side.  The trick  was to place the JavaScript in a RadScriptBlock.  Below is an example on how to add some RadTextBox and get  a running total.

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
         <script type="text/javascript">
             function calculate() {
                 var jan = $find("<%= txtJan.ClientID %>");
                 var feb = $find("<%= txtFeb.ClientID %>");
                 var total = $find("<%= txtTotal.ClientID %>");
                 total.set_value(jan.get_value() + feb.get_value());
     
             }
            </script>
    </telerik:RadScriptBlock>

    Thank you,
    Anthony
  6. Anthony
    Anthony avatar
    24 posts
    Member since:
    Oct 2013

    Posted 19 Nov 2014 in reply to Anthony Link to this post

    I forget to mention that the JavaScript has to be place in the .ascx file and not the parent page(aspx).
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 19 Nov 2014 in reply to Anthony Link to this post

    Hello Anthony,

    If your radgrid is ajaxify than we have to add that javascript code in ASPX/master page else its working fine with ASCX page.

    Thanks,
    Jayesh Goyani
  8. Rayne
    Rayne avatar
    254 posts
    Member since:
    Sep 2010

    Posted 28 Feb Link to this post

    I'm having trouble with this. I have a grid with a webusercontrol edit form. In order to get the javascript to work, it has to be in the parent page that contains the grid. If I make the controls have a static Client ID, I can use jquery to do most of what I need because I'm showing/hiding asp panels.

    But I also need to clear the values of some telerik controls. Can I do it the same way? Or is it preferred to use the telerik client-side methods? If I need to use the client-side methods, then how do I clear a combobox in a webusercontrol that is used as a custom edit form? I can't use the standard way of $find, because the control isn't on the page when the page loads.

  9. Eyup
    Admin
    Eyup avatar
    3296 posts

    Posted 03 Mar Link to this post

    Hello Rayne,

    Please note that using Static IDs with Telerik controls is not supported.

    To achieve the desired requirement, you can use the second approach demonstrated in the following post:
    http://www.telerik.com/forums/client-side-help-required#vBzJZGDiMkGnpEnfoy2ShA

    You can also examine the RadGridEditComboClientHideModified.zip web site sample provided here for practical implementation:
    http://www.telerik.com/forums/how-to-change-and-get-value-from-a-dropdownlist-in-a-radgrid-column#jIjRiaOYhkucLZ82pztwow


    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top