Client-Side Validation for the CheckBoxes Inside a RadGrid

9 posts, 0 answers
  1. Prassin
    Prassin avatar
    87 posts
    Member since:
    Jun 2012

    Posted 30 Jul 2012 Link to this post

    Hi All.

    I have a rad grid and the grid having check boxes in item templates.. i wish to validate that check box at client side.. if any one of the check box was not selected at the time of update then need to show an alert message.. 
    Please help ...

     i tried this script but its not working 
    <script type="text/javascript">
          function ValidateCheckBox() {
              validateTextBox();
              //get target base & child control.
              var TargetBaseControl = document.getElementById('<%= RadGridAssetCode.ClientID%>');
              var TargetChildControl = "CheckBox1";
     
              //get all the control of the type INPUT in the base control.
              var Inputs = TargetBaseControl.getElementsByTagName("input");
     
              for (var n = 0; n < Inputs.length; ++n)
                  if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                  if (Inputs[n].checked) return true;
     
              alert('Select at least one checkbox!');
              return false;
          }
        </script>

    <ItemTemplate>
          <asp:CheckBox id="CheckBox1" OnCheckedChanged="ToggleRowSelection" AutoPostBack="True" runat="server"></asp:CheckBox>
    </ItemTemplate>

    <telerik:RadButton ID="btnSave" runat="server" Text="Update" OnClientClick="javascript:return ValidateCheckBox();">
    <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" PrimaryIconTop="4" />
    </telerik:RadButton>

    Please help...

    Regards 

    Prassin
  2. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 31 Jul 2012 Link to this post

    Hi Prassin,

    I have taken the provided code and assembled a sample project by modifying it and implementing the desired functionality. The changes are described below:
    • Subscribe to RadButton OnClientClicked event
    <telerik:RadButton ID="btnSave" runat="server" Text="Update" AutoPostBack="false"OnClientClicked="ValidateCheckBox">
        <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" PrimaryIconTop="4" />
    </telerik:RadButton>
    • In the ValidateCheckBox event handler set the button AutoPostBack property in order prevent or cause a postback
    function ValidateCheckBox(sender, eventArgs) {
        //validateTextBox();
        //get target base & child control.
        var TargetBaseControl = document.getElementById('<%= RadGridAssetCode.ClientID%>');
        var TargetChildControl = "CheckBox1";
     
        //get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");
     
        var postback = false;
        for (var n = 0; n < Inputs.length; ++n)
        {
            if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
            {
                if (Inputs[n].checked)
                {
                    postback = true;
                    break;
                }
            }
        }
        sender.set_autoPostBack(postback);
        if (!postback)
        {
            alert('Select at least one checkbox!');   
        }
    }

    Greetings,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Prassin
    Prassin avatar
    87 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2012 Link to this post

    Hi Antonio Stoilkov,

    Thanks so much for help.. its working 

    Regards
    Prassin
  4. Darin
    Darin avatar
    11 posts
    Member since:
    Jan 2013

    Posted 28 Feb 2013 Link to this post

    I'm trying to open a RadWindow once the checkbox validation is done:

    function ShowBucketLookup(sender, eventArgs) {
        //validateTextBox();
        //get target base & child control.
        var TargetBaseControl = document.getElementById('<%= radSearchResults.ClientID%>');
        var TargetChildControl = "chkI";
     
        //get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");
     
        var postback = false;
        for (var n = 0; n < Inputs.length; ++n) {
            if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) {
                if (Inputs[n].checked) {
                    postback = true;
                    break;
                }
            }
        }
        sender.set_autoPostBack(postback);
        if (!postback) {
            alert('Select at least one checkbox!');
        }
        else {
            window.radopen(null, "BucketDialogCopy");
        }

    The validation works but the issue is the windows opens for a second and then closes.

    If I put the radopen call in it's own function the window opens and stays open correctly:

    function ShowBucketLookup(arg) {
        window.radopen(null, "BucketDialog");
     }



    Here how the javascript is called:

    <telerik:RadButton ID="btnAddToBucket" runat="server" Text="Add To Bucket" AutoPostBack="false"
                OnClientClicked="ShowBucketLookup" ></telerik:RadButton>

    How do I get the window to stay open after the checkboxes are validated?

    Thanks
  5. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 05 Mar 2013 Link to this post

    Hello,

    I have modified the page in order to show the desired functionality implemented. The idea is to save in a hidden field if the RadWindow is opened or not because after opening the RadWindow a postback occurs which hides the window.
    <asp:HiddenField ID="HiddenFieldIsWindowOpened" runat="server" />
    function ValidateCheckBox(sender, eventArgs) {
        //validateTextBox();
        //get target base & child control.
        var TargetBaseControl = document.getElementById('<%= RadGridAssetCode.ClientID%>');
        var TargetChildControl = "CheckBox1";
     
        //get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");
     
        var postback = false;
        for (var n = 0; n < Inputs.length; ++n) {
            if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) {
                if (Inputs[n].checked) {
                    postback = true;
                    break;
                }
            }
        }
        sender.set_autoPostBack(postback);
        if (!postback)
        {
            alert('Select at least one checkbox!');
            $get("<%= HiddenFieldIsWindowOpened.ClientID %>").removeAttribute("value");
        }
        else
        {
            $get("<%= HiddenFieldIsWindowOpened.ClientID %>").value = true;
        }
    }
     
    function pageLoad()
    {
        if ($get("<%= HiddenFieldIsWindowOpened.ClientID %>").value)
        {
            window.radopen(null, "BucketDialogCopy");
        }
    }

    Kind regards,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Darin
    Darin avatar
    11 posts
    Member since:
    Jan 2013

    Posted 05 Mar 2013 Link to this post

    Thank you. That worked but another issue is occurring. When I close the radwindow I refresh the grid on the parent page so the radwindow keeps opening.  Here is the javascript from the radwindow which refreshes the parent grid when the user clicks the close button:

    function GetRadWindow() {
                        var oWindow = null;
                        if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
                        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz az well)
     
                        return oWindow;
                    }
                    function CloseAndReload() {
                        var oWnd = GetRadWindow();
                        //oWnd.BrowserWindow.location.reload();
                        GetRadWindow().BrowserWindow.refreshGrid();
                        oWnd.close();
                    }

    I modified your page_load() by adding the "removeattribute" trying to keep the radwindow from opening after the radwindow closes and refreshes the grid but the window keeps opening up:

    function pageLoad() {
                        if ($get("<%= HiddenFieldIsBucketWindowOpened.ClientID %>").value) {
                            $get("<%= HiddenFieldIsBucketWindowOpened.ClientID %>").removeAttribute("value");
                            window.radopen(null, "BucketDialog");
                        }
                    }

    How can I keep the radwindow from opening when the radwindow is closed and the grid is refreshed on the parent page?

    Thanks for your help.
  7. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 08 Mar 2013 Link to this post

    Hello Darin,

    I have modified the project in order to resolve your issue. The idea is to remove the HiddenFieldIsWindowOpened value when the window is closed by subscribing to show and close events of the RadWindow and instead of using window.radopen use a $find("<%= BucketDialog.ClientID %>").show(); to open the window.
    function pageLoad()
    {
        var w = $find("<%= BucketDialog.ClientID %>");
        w.add_show(function ()
        {
            $get("<%= HiddenFieldIsWindowOpened.ClientID %>").value = true;
                         
        });
        w.add_close(function ()
        {
            $get("<%= HiddenFieldIsWindowOpened.ClientID %>").removeAttribute("value");
        });
        if ($get("<%= HiddenFieldIsWindowOpened.ClientID %>").value)
        {
            w.show();
        }
    }

    Kind regards,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. govind
    govind avatar
    1 posts
    Member since:
    Dec 2016

    Posted 22 Dec 2016 in reply to Prassin Link to this post

    function ValidateCheckBox() {
            //validateTextBox();
            //get target base & child control.
            var TargetBaseControl = document.getElementById('<%=this.RadGrid2.ClientID%>');
           

            if (TargetBaseControl == null) return false;

            //get target child control.
            var TargetChildControl = "CheckBox1";

            //get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");

            var Inputs = TargetBaseControl.getElementsByTagName("input");

            for (var n = 0; n < Inputs.length; ++n)
                if (Inputs[n].type == 'checkbox' &&
                   Inputs[n].id.indexOf(TargetChildControl, 0) >= 0 &&
                   Inputs[n].checked)
                    return true;

            alert('Select at least one checkbox!');
            return false;
        }

    </script>

     <asp:Button ID="btnMultipaleApprove" runat="server"
                        Text="Approve Checked Items"  CssClass="Clsbtn btn btn-info" OnClick="btnMultipaleApprove_Click" AutoPostBack="false"  OnClientClick="javascript:return ValidateCheckBox();"  Visible="false" />

     

     

     

     

  9. Eyup
    Admin
    Eyup avatar
    3845 posts

    Posted 27 Dec 2016 Link to this post

    Hello Govind,

    You can also check the attached web site samples to achieve this requirement.

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top