JavaScript and WebUserControl

7 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
    2732 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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.
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
  6. 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
  7. 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).
  8. Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017