Validation and SelectedIndex issues

[Brian]

I have tried to get the validation to work with this control, but have failed miserably trying to implement as you have described here - https://docs.telerik.com/devtools/aspnet-ajax/controls/checkboxlist/functionality/aspnet-validators-support

It never validates on the client. I have two controls, one a textbox the other a checkboxlist. the textbox does fail correctly, the checkboxlist never fails. Using your code, i can still not get to happen what you describe - "To use the RequiredFieldValidator, you just need to set the ControlToValidate property to the CheckBoxList's ID. This will trigger validation when the user submits and the validation control will validate against the SelectedItem property and return the appropriate validation result."

1) Please help get this thing to validate correctly using the asp validators are described in your documentation.

2) Seems there is indeed an issue with the get_selectedIndex(), as it should have the correct index after the "checked" has been fired. use my code below and checkout what the alert sends back. At the checked changed event it should have the correct index, no? I even get "undefined" when after unchecking and checking a box. It should always be "-1" or a number of the first selected item index number, if checked. This issue breaking the validation?

 

 

<div style="float: left; width: 100%;">
    <telerik:RadCheckBoxList runat="server" ID="RadCheckBoxListMembers" AutoPostBack="false" RenderMode="Lightweight" ClientIDMode="Static">
        <ClientEvents OnItemCheckedChanged="OnItemCheckedChanged" OnLoad="function(sender) { radCheckBoxList = sender; }" />
        <Items>
            <telerik:ButtonListItem Text="All Family" Value="-1" />
            <telerik:ButtonListItem Text="Bob" Value="0" />
            <telerik:ButtonListItem Text="Mary" Value="1" />
            <telerik:ButtonListItem Text="Jimmy" Value="2" />
        </Items>
    </telerik:RadCheckBoxList>

    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please select a member(s)" ValidationGroup="ValidationGroup"
        Display="None" ControlToValidate="RadCheckBoxListMembers" EnableClientScript="true" />
</div>

<div style="float: left; width: 100%;">
    <telerik:RadTextBox runat="server" ID="RadTextBoxName" Label="Name:" />
    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please enter a name" ValidationGroup="ValidationGroup"
        Display="None" ControlToValidate="RadTextBoxName" EnableClientScript="true" />
</div>

<div style="float: left; width: 100%;">
    <telerik:RadButton runat="server" ID="RadButtonSubmit" CausesValidation="true" ValidationGroup="ValidationGroup" Text="Submit"
        RenderMode="Lightweight" AutoPostBack="true" Width="200px" Enabled="true" OnClick="RadButtonSubmit_Click">
        <Icon PrimaryIconCssClass="rbOk" />
    </telerik:RadButton>
</div>

<div style="float: left; width: 100%;">
    <asp:ValidationSummary runat="server" ValidationGroup="ValidationGroup" />
</div>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        //![CDATA[

        var radCheckBoxList;

        function OnItemCheckedChanged(sender, args) {

            alert(radCheckBoxList.get_selectedIndex());

        }

//]]>
    </script>
</telerik:RadScriptBlock>

 

 

 

[Doncho]

Hi Brian,

Thank you for the code provided!

I have tested it on my side, and the validation is working as expected.

Concerning your second point:

• In the OnItemCheckedChanged event listener, the current selection is still not present in the selected items collection of the RadCheckBoxList. To reach the updated collection in that event you need to use a setTimeout function.
  

  function OnItemCheckedChanged(sender, args) {
      setTimeout(function () { alert(radCheckBoxList.get_selectedIndex()); }, 0)
  }

• You can also use the OnSelectedIndexChanged event. When it is fired the SelectedItems collection includes the current selection.
• get_selectedIndex() returns:
  • '-1' - if there are no pre-defined selected items on the initial load of the control
  • the index of the first selected item - If a selection is made
  •  'undefined' - If items of a RadCheckBox List have been deselected and currently no items are selected

   

 

I have attached the sample for you to try. (You need to copy the Telerik.Web.UI.dll and Telerik.Web.UI.xml in the bin folder to run it). It would be beneficial if modify the sample so that it replicates the issue you are experiencing and send it back to us for further troubleshooting.

I hope that will help.

 

Kind regards,
Doncho
Progress Telerik

[Brian]

Wow, okay I was able to use your code in an existing empty project and validation didnt work on the CheckBoxList. So looked into the webconfig. I point to app.config and copied over to your project and started to remove items. Cache has not been my friend at this point as its fails, i put the code back in and it still fails. I close and restart and it still fails, the vs cleaning has been a nightmare.

 

So i think this is causing issues

 

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

Could that be the case?

Steps:

1) Dont enter any text or choose listboxitem

2) click submit - validation on textbox only

3) fill in textbox

4) click submit - serverside code hit and then validation on listboxitem shows up

5) keep clicking submit and validation still passes, shows server hit and listbox validation message shows

 

Default.cs

protected void RadButtonSubmit_Click(object sender, EventArgs e)
    {
        Response.Write("<script>alert('Submitted');</script>");
    }

 

App Config

<appSettings>

    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

    <add key="Telerik.Skin" value="Telerik" />
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />

</appSettings>

 

Web.Config

<?xml version="1.0"?>
<configuration>
  <appSettings configSource="app.config"/>
  <!--<appSettings>
        <add key="Telerik.Skin" value="Bootstrap" />
        <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
        <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />
    </appSettings>-->
  <system.web>
    <compilation debug="true" targetFramework="4.7.2"/>
    <httpRuntime targetFramework="4.7.2"/>
    <pages>
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>
      </controls>
    </pages>
    <httpHandlers>
      <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>
      <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <remove name="ChartImage_axd"/>
      <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_Web_UI_SpellCheckHandler_axd"/>
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_Web_UI_DialogHandler_aspx"/>
      <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_RadUploadProgressHandler_ashx"/>
      <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_Web_UI_WebResource_axd"/>
      <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>
    </handlers>
  </system.webServer>
</configuration>

I made some changes to the webconfig, default.cs (response) and the app.config. I could not attach the zip, its only 5kb, but the upload error states that its a 2MB max. Let me know what you find.

Thanks for the help!

[Doncho]

Hi Brian,

Nice catch! The UnobtrusiveValidationMode is the key.

The reason for the experienced behavior is that the Client-side validation of the RadCheckBoxList is not supported by the RequiredFieldValidator. Therefore, only the RadTexBox is validated on the client.

I suggest you keep the UnobtrusiveValidationMode to None and use a Custom Validator to validate the RadCheckBoxList on the client.

<script type="text/javascript">
    function Rcb_selectone(src, args) {
        var rcb = $find("<%= RadCheckBoxListMembers.ClientID %>");
        if (rcb.get_selectedItems().length > 0) {
            args.IsValid = true;
            return;
        }
        else args.IsValid = false;
    }
</script>
<telerik:RadCheckBoxList runat="server" ID="RadCheckBoxListMembers" AutoPostBack="false" RenderMode="Lightweight">
    <Items>
        <telerik:ButtonListItem Text="All Family" Value="-1" />
        <telerik:ButtonListItem Text="Bob" Value="0" />
        <telerik:ButtonListItem Text="Mary" Value="1" />
        <telerik:ButtonListItem Text="Jimmy" Value="2" />
    </Items>
</telerik:RadCheckBoxList>
<asp:CustomValidator Display="None" ErrorMessage="Please select a member(s)" ClientValidationFunction="Rcb_selectone" runat="server" ValidationGroup="ValidationGroup" />

I hope this will prove helpful

Kind regards,
Doncho
Progress Telerik