This is a migrated thread and some comments may be shown as answers.

Client-Side Validation for the CheckBoxes Inside a RadGrid

8 Answers 198 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Prassin
Top achievements
Rank 1
Prassin asked on 30 Jul 2012, 11:46 AM
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

8 Answers, 1 is accepted

Sort by
0
Antonio Stoilkov
Telerik team
answered on 31 Jul 2012, 07:51 AM
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.
0
Prassin
Top achievements
Rank 1
answered on 31 Jul 2012, 09:03 AM
Hi Antonio Stoilkov,

Thanks so much for help.. its working 

Regards
Prassin
0
Darin
Top achievements
Rank 1
answered on 28 Feb 2013, 07:11 PM
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
0
Antonio Stoilkov
Telerik team
answered on 05 Mar 2013, 08:23 AM
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.
0
Darin
Top achievements
Rank 1
answered on 05 Mar 2013, 03:20 PM
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.
0
Antonio Stoilkov
Telerik team
answered on 08 Mar 2013, 07:48 AM
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.
0
govind
Top achievements
Rank 1
answered on 22 Dec 2016, 11:14 AM

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" />

 

 

 

 

0
Eyup
Telerik team
answered on 27 Dec 2016, 09:16 AM
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.
Tags
Grid
Asked by
Prassin
Top achievements
Rank 1
Answers by
Antonio Stoilkov
Telerik team
Prassin
Top achievements
Rank 1
Darin
Top achievements
Rank 1
govind
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or