Client side validation before server side events

3 posts, 0 answers
  1. Shannnon
    Shannnon avatar
    31 posts
    Member since:
    Oct 2010

    Posted 04 Jun 2011 Link to this post

    I have a Telerik AJAX Radtoolbar act against a RadGrid. I have code behind to do something when I click items on the ToolBar base on row selected in the grid, but before the post back, I need some client side validation, post back won't happen if validation fails. I tried to use
    <telerik:RadToolBar runat="server" Width="100%" ID="RadToolBar1" EnableRoundedCorners="true"  OnClientButtonClicked="javascript:if(!PageValidation()){return false;}"  OnButtonClick="RadToolBar1_ButtonClick" EnableShadows="true" Skin="Office2007" Height="27px" AutoPostBack="false">
                          <Items>
                           <telerik:RadToolBarButton Text="Export" Value="1" PostBack="true" />
                            <telerik:RadToolBarButton IsSeparator="true" />
    function PageValidation() {
                    var IsValid = false;
                          var error = document.getElementById("errorMsg");
                    var mastertableView = $find("<%= RadGrid1.MasterTableView.ClientID %>");
                     var count = mastertableView.get_selectedItems().length;
                        if (count < 1) {
                                     error.style.display = "inherit";
                            IsValid = false;
                        }
                        else {
                             error.style.display = "none";
                            IsValid = true;
                        }
                     
                    return IsValid;
     
                }
    However, this causes the RadToolBar unclickable and even jam all other AJAX functions on the page. if I changed the OnClientClicked to "OnClientButtonClicked="PageValidation" ", the client side validation works with the error msg pop up but it cannot stop the post back.

    Are there any other ways that I can work around or did I miss something using this method?

    Thanks!
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 08 Jun 2011 Link to this post

    Hi Shannnon,

    Have you tried to put the same code in the OnClientButtonClicking event? That way you can cancel the event  if the page is not valid and still be able to show the error message. Here's an example:

    function OnClientButtonClicking(sender, args) {
                    var IsValid = false;
                          var error = document.getElementById("errorMsg"); 
                    var mastertableView = $find("<%= RadGrid1.MasterTableView.ClientID %>");
                     var count = mastertableView.get_selectedItems().length;
                        if (count < 1) {
                                     error.style.display = "inherit"
                            IsValid = false;
                            args.set_cancel(true;) 
                        }
                        else {
                             error.style.display = "none"
                            IsValid = true;
                        }
                    return IsValid;
       
                }

    Hope this helps.

    Regards,
    Veronica Milcheva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shannnon
    Shannnon avatar
    31 posts
    Member since:
    Oct 2010

    Posted 08 Jun 2011 Link to this post

    Yes, it works, thanks a lot!
Back to Top