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

JavaScript and WebUserControl

8 Answers 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 07 Nov 2014, 05:58 PM
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

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 10 Nov 2014, 06:35 PM
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
0
Anthony
Top achievements
Rank 1
answered on 13 Nov 2014, 08:03 PM
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.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 14 Nov 2014, 05:54 PM
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
0
Anthony
Top achievements
Rank 1
answered on 15 Nov 2014, 03:41 AM
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
0
Anthony
Top achievements
Rank 1
answered on 19 Nov 2014, 09:36 PM
I forget to mention that the JavaScript has to be place in the .ascx file and not the parent page(aspx).
0
Jayesh Goyani
Top achievements
Rank 2
answered on 20 Nov 2014, 05:54 AM
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
0
Rayne
Top achievements
Rank 1
answered on 28 Feb 2017, 04:54 PM

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.

0
Eyup
Telerik team
answered on 03 Mar 2017, 06:29 AM
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.
Tags
Grid
Asked by
Anthony
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Anthony
Top achievements
Rank 1
Rayne
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or