ascx editform with calculation textboxes when onfocus or onblur

[illumination]

I have a radgrid with editformsetting using 2 ascx files. each has its condition to calculate sum of two textboxes when leaving the textboxes. but I keep getting error like the page is not recognizing the javascript.

                //Calculate the original pages * the copies and input the result to copy quantity
                var ActualIndex;
                var index;
                var txtRadOriginalPages = null;
                var txtRadCopies = null;
                var txtRadCopyQty1 = null;

                function updateTotals(sender, args) {
                    var v1 = txtOriginalPages.get_value();
                    var v2 = txtCopies.get_value();
                    var finalValue = parseFloat(v1) * parseFloat(v2);
                    txtRadCopyQty1.set_value(parseFloat(finalValue));
                }
                function setIndex(sender, args) {
                    index = args.get_itemIndexHierarchical();
                }
                function setActualIndex() {
                    ActualIndex = index;
                }
                function Load1(sender, args) {
                    txtOriginalPages = sender;
                }
                function Load2(sender, args) {
                    txtCopies = sender;
                }
                function Load3(sender, args) {
                    txtRadCopyQty1 = sender;
                }

                        <tr>
                            <td align="left">
                                <asp:Label ID="lblOriginalPages" runat="server" Text="Original Pages:"></asp:Label>
                            </td>
                            <td align="left">
                                <telerik:RadNumericTextBox ID="txtRadOriginalPages" runat="server"
                                    DbValue='<%# Eval("Orig_Pages" ) %>' Font-Size="11px" Skin="Office2007"
                                    NumberFormat-DecimalDigits="0" Type="Number" Width="100px" >
                                    <ClientEvents OnValueChanged="updateTotals" OnFocus="setActualIndex" OnLoad="Load1" />
                                    <NumberFormat DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                            </td>
                            <td align="left">
                                <asp:Label ID="lblCopies" runat="server" Text="Copies:"></asp:Label>
                            </td>
                            <td align="left">
                                <telerik:RadNumericTextBox ID="txtRadCopies" runat="server"
                                    DbValue='<%# Eval("Quantity" ) %>' Font-Size="11px" Skin="Office2007"
                                    NumberFormat-DecimalDigits="0" Type="Number" Width="100px" >
                                    <ClientEvents OnValueChanged="updateTotals" OnFocus="setActualIndex" OnLoad="Load2" />
                                    <NumberFormat DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                            </td>
                         </tr>
                       <tr>
                            <td align="left">
                                <asp:Label ID="lblCopyQty1" runat="server" Text="Copy Quantity 1:"></asp:Label>
                            </td>
                            <td align="left">
                                <telerik:RadNumericTextBox ID="txtRadCopyQty1" runat="server"
                                    DbValue='<%# Eval("Total") %>' Font-Size="11px" Skin="Office2007" Width="100px"
                                    NumberFormat-DecimalDigits="0" Type="Number">
                                    <ClientEvents OnLoad="Load3" />
                                    <NumberFormat DecimalDigits="0"></NumberFormat>
                                </telerik:RadNumericTextBox>
                            </td>
                            <td align="left">
                                <asp:Label ID="lblInkType1" runat="server" Text="Ink Type 1:"></asp:Label>
                            </td>
                        </tr>

anybody can help me? Please...
Thank you.

[illumination]

also when I do postback, it keeps giving me the eval values back instead of what I input.

[Dimo]

Hi Lina,

The problem is probably caused by the fact that browsers do not evaluate Javascript code properly, if the code is introduced by means of an AJAX request. So you should either place the Javascript code somewhere else, so that it is available on initial page load, or enclose it inside a RadScriptBlock control (if it is inside the RadGrid edit form).

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView EditMode="EditForms">
        <EditFormSettings EditFormType="Template" />
        <EditFormSettings>
            <FormTemplate>

                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <script type="text/javascript">

                //Calculate the original pages * the copies and input the result to copy quantity
                var ActualIndex;
                var index;
                var txtRadOriginalPages = null;
                var txtRadCopies = null;
                var txtRadCopyQty1 = null;

                function updateTotals(sender, args) {
                    var v1 = txtOriginalPages.get_value();
                    var v2 = txtCopies.get_value();
                    var finalValue = parseFloat(v1) * parseFloat(v2);
                    txtRadCopyQty1.set_value(parseFloat(finalValue));
                }
                function setIndex(sender, args) {
                    index = args.get_itemIndexHierarchical();
                }
                function setActualIndex() {
                    ActualIndex = index;
                }
                function Load1(sender, args) {
                    txtOriginalPages = sender;
                }
                function Load2(sender, args) {
                    txtCopies = sender;
                }
                function Load3(sender, args) {
                    txtRadCopyQty1 = sender;
                }

                </script>
                </telerik:RadScriptBlock>

                <table>
                    <tr>
                        <td align="left">
                            <asp:Label ID="lblOriginalPages" runat="server" Text="Original Pages:"></asp:Label>
                        </td>
                        <td align="left">
                            <telerik:RadNumericTextBox ID="txtRadOriginalPages" runat="server"
                                NumberFormat-DecimalDigits="0" Type="Number">
                                <ClientEvents OnValueChanged="updateTotals" OnFocus="setActualIndex" OnLoad="Load1" />
                                <NumberFormat DecimalDigits="0" />
                            </telerik:RadNumericTextBox>
                        </td>
                        <td align="left">
                            <asp:Label ID="lblCopies" runat="server" Text="Copies:"></asp:Label>
                        </td>
                        <td align="left">
                            <telerik:RadNumericTextBox ID="txtRadCopies" runat="server"
                                NumberFormat-DecimalDigits="0" Type="Number">
                                <ClientEvents OnValueChanged="updateTotals" OnFocus="setActualIndex" OnLoad="Load2" />
                                <NumberFormat DecimalDigits="0" />
                            </telerik:RadNumericTextBox>
                        </td>
                     </tr>
                   <tr>
                        <td align="left">
                            <asp:Label ID="lblCopyQty1" runat="server" Text="Copy Quantity 1:"></asp:Label>
                        </td>
                        <td align="left">
                            <telerik:RadNumericTextBox ID="txtRadCopyQty1" runat="server"
                                NumberFormat-DecimalDigits="0" Type="Number">
                                <ClientEvents OnLoad="Load3" />
                                <NumberFormat DecimalDigits="0"></NumberFormat>
                            </telerik:RadNumericTextBox>
                        </td>
                        <td align="left">
                            <asp:Label ID="lblInkType1" runat="server" Text="Ink Type 1:"></asp:Label>
                        </td>
                    </tr>
                </table>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[illumination]

Thank you Demo for the answer but that's not what I need.

I am using ascx.vb page (webusercontrol), not formtemplate for editing record inside the grid. Since I have a condition that must be met. for example if I choose a record that shows copy center then it will go to copycenter.ascx and when I choose a record in the grid that shows mail center then it will go to mailcenter.ascx to update. So it is not a form template as you instructed. This is where the problem of using my script began. Any other instructions?

Thanks again.

[Dimo]

Hello Lina,

I used a form template form simplicity, but my assumption about the root of the problem remains the same. Did you try what I suggested?

Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.