JavaScript and WebUserControl

[Anthony]

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

[Jayesh Goyani]

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

[Anthony]

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.

[Jayesh Goyani]

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

[Anthony]

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

[Anthony]

I forget to mention that the JavaScript has to be place in the .ascx file and not the parent page(aspx).

[Jayesh Goyani]

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

[Rayne]

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.

[Eyup]

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