Problem with ClientSide validation

[John John]

Hi
      I am using radgrid which is having the functionality of custom inline edit template, i used form template to define controls as well.
But i am facing problem in clientside function calling. I used to call my own customized JS function.

My simplified JS function:

function myFunValidation()
{
alert("hai check");
return true;
}

My aspx code:

<EditFormSettings EditFormType="Template">
<FormTemplate>
     <asp:Button ID="btnUpdate" Text="Update" runat="server" CommandName="Update" OnClientClick="return myFunValidation()"/>

 

My Issue is i am not able to postback the page, even if the suppse all data's in the page is valid. I used a simple validation in my above code,but is not working fine and no Postback occures.It seemed as a dead call.

It would be great, if i know how can achieve the above scenario.

-Thanks
 

[Shinu]

Hi John,

I tried your code and it is working fine in my end. Can you check whether you have tried cancelling any grid the event which may result in not firing the updatecommand?

Could you provide some more information about the client event that you are using if this does not help?

Regards,
Shinu.

[John John]

Hi Shinu,

            Thanks for your reply.. i didint call any Cancel related operation to my project so far. I just called the 

RadGrid1_UpdateCommand

event  to make use the control values to save into the DB. But still i am not able to postback and fire  the update event. Supppse if i am not using the Clientside event , it is working fine as i expected.

-Thanks

[John John]

Hi i am waiting for the respone, if it is possible can u reproduce the code by an example to achieve my above scenario

-Thanks

[John John]

Can any one help me to reach out the solution for my above mentioned question



-Thanks in Advance

[arnaud]

Hi,

Use a linkbutton instead :

<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update"  OnClientClick="return myFunValidation()">LinkButton</asp:LinkButton>

Regards,
Arnaud Boiselle

[John John]

Hi arnaud,
                 Thanks for your opinion.Since my client is demanding to do the things with the traditional asp:button only, i cannot swith from it to Linkbutton because of future enhancement.
I dont know what mistake i made or Is this default behavior of Telerik control. So please give me any possible ways to solve the problem.

I watched the below forum,also mentioned about the same issue. 
http://www.telerik.com/community/forums/aspnet-ajax/grid/client-side-validation-problem.aspx

Since i am having the same issue,please let me know whether the same issue in Telerik still exists 


-Thanks

[arnaud]

Hi John,

I agree that it looks strange as the clientside command event inside an editform is not even recognized on my side (and I guess your problem comes from here), using the last version of Telerik.
It would be nice to have telerik advice on it.

<script type="text/javascript">
function OnCommand(sender, args) {
                alert(args.get_commandName())
                }  
        </script>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
            <ClientSettings>
                <ClientEvents OnCommand="OnCommand" />
            </ClientSettings>
            ......
<EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <asp:Button ID="Button1" runat="server" Text="Button" CommandName="Update" />
                   </FormTemplate>
</EditFormSettings>

If you click on Button1, there is no alert.

Regards
Arnaud Boiselle

[John John]

Hi
          Sorry for again, currently i am using updated version of Telerik control only. I dont think, the bug is being rectified.
So a part from my above posted question, suppose if i would like to use my customozied own client side code to validate the user inputs, if it is success leads to put the data into the DB or somewhere.. So how can i solve the  scenario with the present telerik enviorment.

-Thanks

[Veli]

Hi guys,

@John: I cannot reproduce the misbehavior you are seeing. Attaching a page we can both work on.

@Arnaud: RadGrid's Client-side OnCommand event fires only when you initiate a command from the RadGrid client object. Here is the markup generated for the built-in Update button in the auto-generated edit form when ButtonType="LinkButton":

<a id="RadGrid1_ctl00_ctl09_UpdateButton"
    href="javascript:__doPostBack('RadGrid1$ctl00$ctl09$UpdateButton','')"
    onclick="if(!$find('RadGrid1_ctl00').updateItem('2')) return false;">Update</a>

As you can see, the click handler of the link calls the updateItem() command of the RadGrid.MasterTableView client object. This would cause the client-side OnCommand event to be fired. The example you are referring to does not have any client scripts associated with the client click event of the button. RadGrid's client object has no way of being notified about the command you are firing on the client.

Sincerely yours,
Veli
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.

[John John]

Hi Veli..
               Thanks for your suggession at first. Herewith i have attached a sample code, in which i simply demostrated my scenario for your reference. Across my demo i havnt yet been found a best way to do postback even if the conditions are true.

As i mentioned earlier, my purpose of project is to manage my own customized validation of user inputs before the data is being sent to DB.

<head runat="server">
    <script language="javascript">
        function myFunValidation() {
            alert("hai check2");
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" Skin="Sunset" runat="server" AutoGenerateColumns="False"
            PageSize="5" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True"
            OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource"
            OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView GroupLoadMode="Client" Width="100%" DataKeyNames="CustomerID" Name="Customer"
                CommandItemDisplay="Top" AllowMultiColumnSorting="True">

                <DetailTables>
                    <telerik:GridTableView ShowFooter="true" EnableHeaderContextMenu="true" ShowGroupFooter="true"
                        AllowPaging="true" PageSize="5" CommandItemDisplay="Top" DataKeyNames="OrderID"
                        Name="Order" Width="100%">
                        <Columns>
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn1">
                                <HeaderStyle Width="20px" />
                            </telerik:GridEditCommandColumn>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" UniqueName="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="OrderName" HeaderText="OrderName" UniqueName="OrderName" HeaderButtonType="TextButton"
                                DataField="OrderName">
                            </telerik:GridBoundColumn>

                        </Columns>
                        <EditFormSettings EditFormType="Template">
                            <FormTemplate>
                                <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                                    style="border-collapse: collapse; background: white;">
                                    <tr class="">
                                        <td colspan="2" style="font-size: small">
                                            <b>Employee Details</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <b>Company Info:</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table id="Table3" cellspacing="1" cellpadding="1" width="250" border="0" class="module">
                                                <tr>
                                                    <td>
                                                    </td>
                                                    <td>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        OrderID:
                                                    </td>
                                                    <td>
                                                        <asp:TextBox ID="txtEID" runat="server" Text='<%# Bind( "OrderID" ) %>'>
                                                        </asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        OrderName:
                                                    </td>
                                                    <td>
                                                        <asp:TextBox ID="txtEName" runat="server" Text='<%# Bind( "OrderName") %>' TabIndex="1">
                                                        </asp:TextBox>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <tr>
                                            <td colspan="2">
                                                <b>Personal Info:</b>
                                            </td>
                                        </tr>
                                        <table cellspacing="0" cellpadding="0" align="left" border="0">
                                            <tr>
                                                <tr>
                                                    <td align="left">
                                                        <asp:Button ID="btnUpdate" OnClientClick="return myFunValidation();" CommandName="Update" TabIndex="31"
                                                            runat="server" CssClass="btn" Text="SAVE" />
                                                        <asp:Label ID="spacer" runat="server">&nbsp;&nbsp;&nbsp;</asp:Label>
                                                        &nbsp;&nbsp;&nbsp;<asp:Button ID="btnCancel" CommandName="Cancel" TabIndex="34" runat="server"
                                                            CssClass="btn" Text="Cancel" CausesValidation="False" />
                                                    </td>
                                                </tr>
                                        </table>
                                </table>
                            </FormTemplate>
                        </EditFormSettings>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn2">
                        <HeaderStyle Width="20px" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" UniqueName="CustomerID"
                        HeaderButtonType="TextButton" DataField="CustomerID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="CustomerName" HeaderText="CustomerName"
                        HeaderButtonType="TextButton" DataField="CustomerName">
                    </telerik:GridBoundColumn>

                </Columns>
                <EditFormSettings EditFormType="Template">
                            <FormTemplate>
                                <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                                    style="border-collapse: collapse; background: white;">
                                    <tr class="">
                                        <td colspan="2" style="font-size: small">
                                            <b>Employee Details</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <b>Company Info:</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table id="Table3" cellspacing="1" cellpadding="1" width="250" border="0" class="module">
                                                <tr>
                                                    <td>
                                                    </td>
                                                    <td>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                       CustomerID:
                                                    </td>
                                                    <td>
                                                        <asp:TextBox ID="txtEID" runat="server" Text='<%# Bind( "CustomerID" ) %>'>
                                                        </asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        CustName:
                                                    </td>
                                                    <td>
                                                        <asp:TextBox ID="txtEName" runat="server" Text='<%# Bind( "CustomerName") %>' TabIndex="1">
                                                        </asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="left">
                                                        <asp:Button ID="btnUpdate" OnClientClick="return myFunValidation();" CommandName="Update" TabIndex="31"
                                                            runat="server" CssClass="btn" Text="SAVE" /></td>

                                                        <td><asp:Button ID="btnCancel" CommandName="Cancel" TabIndex="34" runat="server"
                                                            CssClass="btn" Text="Cancel" CausesValidation="False" /> </td>
                                                </tr>
                                            </table>
                                        </td>
                                </table>
                            </FormTemplate>
                        </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>

</body>

I hope u could refer my code and reply me back with ur besy opinion.

-Thanks in Advance

[Veli]

Hello John,

You have defined your validation event handler in the following way:

<asp:Button OnClientClick="return myFunValidation();" CommandName="Update" />

Let's look at the generated markup for this button:

<input id="RadGrid1_ctl00_ctl09_btnUpdate" type="button"
    onclick="return myFunValidation();__doPostBack('RadGrid1$ctl00$ctl09$btnUpdate','')" />

Do you see what I see? No matter what you return from myFunValidation(), the event handler returns! Eventually, the __doPostBack() is never executed, even if the function returns true.

Now, let's modify the markup to:

<asp:Button OnClientClick="if(!myFunValidation()) return false;"/>

And now the generated markup is:

<input onclick="if(!myFunValidation()) return false; __doPostBack('RadGrid1$ctl00$ctl11$btnUpdate','')"/>

What happens? If myFunValidation() returns false, I return false from the event handler, preventing __doPostBack() from executing. However, if my method returns true, I fall through the if-statement and the button postbacks.

Kind regards,
Veli
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.

[Kumar]

Thank you very much. Since 2 weeks I am trying to get a solution for this type of problem.

 

Using this

<asp:Button OnClientClick="if(!myFunValidation()) return false;"/> code, my problem is solved.

 

But, this behavior should work like normal ASP.Net.

 

Thank you.

[Praveen Addepally]

Thank you so much for the post veli & kumar. It saved me lot of time.

Anyways should have searched these forums 2 days earlier :)  

[Susan Hessler]

I am having the same problem @Arnaud had except that I have two buttons, a save and a cancel.  My save button works fine but my cancel button does nothing.  They are basically the same.

<asp:imagebutton ID="btnSave"    runat="server"    CommandName="Update"   ImageUrl="save.gif"  />
<asp:imagebutton ID="btnCancel" runat="server"    CommandName="Cancel"   ImageUrl="cancel.gif" />

What am I missing?

[Radoslav]

Hi Susan,

Could you please post your aspx page with the related code behind file? Thus we will be able to gather more details about your scenario and to provide you a solution. Looking forward for your reply.

Regards,
Radoslav
the Telerik team