AJAXified Grid breaks Custom Validator

[Kent Williams]

I have a grid with a templated edit form. I have a custom validator that adds up the values from 4 rad numeric text boxes and makes sure they are equal to a 5th numeric text box.

When the grid was not using AJAX, I had to place the client-side javascript outside of the grid, and used the OnLoad event of the custom validator (which is inside of the edit form) to populate a literal control with javascript that has the correct ClientIDs for all of the controls.

We then decided to AJAXify the grid, and everything broke. I tried placing the literal control inside of an update panel, and even though it loads at the same time as the grid -- the javascript will not load into IE. When a user clicks submit -- I get a javascript error saying the function can not be found and the user can not complete the form.

I've tried moving the javascript into the edit form, but it does not work either.

How does one get the clientid's for the controls inside of the edit form without the grid being in edit mode or hooking them up from an event? (Or any other solution that makes this darn thing work)

Here's the javascript (I know its crude):

    protected void JS_Load(object source, EventArgs e)
    {
       Control container = ((Control)source).Parent;
       string javascript = "<script language=\"javascript\" > " +
        "\nfunction checkValues(source, clientside_arguments)" +
        "\n { " +
        "\n         var returnval = false;" +
        "\n var box1 = " + container.FindControl("dispRadNumericTextBox1").ClientID + ";" +
        "\n var box2 = " + container.FindControl("dispRadNumericTextBox2").ClientID + ";" +
        "\n var box3 = " + container.FindControl("dispRadNumericTextBox3").ClientID + ";" +
        "\n var box4 = " + container.FindControl("dispRadNumericTextBox4").ClientID + ";" +
        "\n var cert = " + container.FindControl("certAmt").ClientID + ";" +
        "\n var total = 0;      " +
        "\n if (IsNumeric(box1) && " + container.FindControl("dispDatePicker1").ClientID + ".DateInput.InitialValue != '' )" +
        "\n                         total += box1.InitialValue;" +
        "\n if (IsNumeric(box2) && " + container.FindControl("dispDatePicker2").ClientID + ".DateInput.InitialValue != '' )" +
        "\n                         total += box2.InitialValue;    " +
        "\n if (IsNumeric(box3) && " + container.FindControl("dispDatePicker3").ClientID + ".DateInput.InitialValue != '' )" +
        "\n                         total += box3.InitialValue;" +
        "\n if (IsNumeric(box4) && " + container.FindControl("dispDatePicker4").ClientID + ".DateInput.InitialValue != '' )" +
        "\n                         total += box4.InitialValue;           " +
        "\n if (total == 0)" +
        "\n   returnval = true;" +
        "\n else" +
        "\n {" +
        "\n   if (total == cert.InitialValue)" +
        "\n       returnval = true;" +
        "\n }" +
        "\n clientside_arguments.IsValid = returnval;" +
        "\n }" +
        "\n function IsNumeric(strString)" +
        "\n {" +
        "\n     var strValidChars = \"0123456789.-\";" +
        "\n     var strChar;" +
        "\n     var blnResult = true;" +
        "\n     if (strString.length == 0) return false;" +
        "\n for (i = 0; i < strString.length && blnResult == true; i++) {" +
        "\n         strChar = strString.charAt(i);" +
        "\n         if (strValidChars.indexOf(strChar) == -1) {" +
        "\n             blnResult = false;" +
        "\n         }" +
        "\n     }" +
        "\n     return blnResult;" +
        "\n }" +
        "\n </script>";
       this.javascriptLiteral.Text = javascript;
    }

Here's the custom validator:

<asp:CustomValidator ID="CustomValidator1" CssClass="errorMessage" runat="server"
                    ErrorMessage="Disbursement amounts do not equal Cert Amount"
                    ValidationGroup="cert" OnLoad="JS_Load"
                    Display="Dynamic" ClientValidationFunction="checkValues">nbsp;</asp:CustomValidator>

Here's the literal:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<asp:Literal ID="javascriptLiteral" runat="server"></asp:Literal>
</telerik:RadAjaxPanel>

And finally the AJAX manager config:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

[Vlad]

Hello Kent,

You need to register this JavaScript using ScriptManager methods or RadScriptBlock. Microsoft ASP.NET AJAX will not recognize plain JavaScript inserted in the response.

Regards,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kent Williams]

I have been trying to get your solution to work. I've read several MSDN documents but can't seem to get it work quite right.

I first tried to use the RadScriptBlock -- but this dosn't seem to allow me to dynamiccly inject javascript into it. I tried placing the literal control inside of it -- still didn't work.

My second attempt I tried using the script manager. After replacing the Microsoft Script Manager with the radscriptmanager, I've modified my code to look like:

//this.javascriptLiteral.Text = javascript;
       RadScriptManager.RegisterClientScriptBlock((Control)source, typeof(CustomValidator), "certAmt", javascript, false);

I have also tried variations such as:

RadScriptManager.RegisterClientScriptBlock(this, typeof(Page), "certAmt", javascript, false);

I completely removed the extra radajaxpanel as it appears this solution does not require it.

The page loads without any exceptions, and even in debug mode calling the RadScriptManager does not cause any exception. However, when I click the submit button inside the RadGrid edit form, I recieve the javascript error that "checkValues" dosn't exist (the name of the function I'm trying to dynamically add).

Could you please provide me with some sample code on how to make this work?
Thanks,
Kent

[Iana Tsolova]

Hi Kent,

Can ou try wrapping the grid and the custom validator in a regular ASP:Panel and ajaxify it as below:

<asp:Panel runat="server" ID="Panel1">
    <telerik:RadGrid ID="RadGrid1" runat="server" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" />
</asp:Panel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Panel1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Then you can try registering you client code through the page ScriptManager. However I suggest that you handle the ServerValidate event of the custom validator and perform the desired validation server-side but client-side.

Find more about ASP Standard Validators  and AJAX here.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.