Client-Side Validation for the CheckBoxes Inside a RadGrid

[Prassin]

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

[Antonio Stoilkov]

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

[Prassin]

Hi Antonio Stoilkov,

Thanks so much for help.. its working 

Regards
Prassin

[Darin]

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

[Antonio Stoilkov]

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

[Darin]

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.

[Antonio Stoilkov]

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

[govind]

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

 

 

 

 

[Eyup]

Hello Govind,

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

Regards,
Eyup
Telerik by Progress