IndexChanging canceling action

[Romain]

Hi Telerik and the community ! I'm french dev so sorry for my english .. i've got a problem with a scenario. I try to cancel by javascript the indexchanging on my radlistbox. When i set_cancel(true) my action seems to be canceled but the previous index is not selected and no one of my listitems are selected. After that I can't selected no items.

I hope my explanations are good ... So for exemple my first index is selected, I click on my second inex and I set_cancel(true) and I would like to keep my first item selected.

My radkustbix (populate in pageload for my test)

<telerik:RadListBox runat="server" ID="ListBoxFile" Height="100px" OnClientSelectedIndexChanging="onClientSelectedIndexChangingHandler"
SelectionMode="Multiple" AutoPostBack="false">
</telerik:RadListBox>

My JS script

function onClientSelectedIndexChangingHandler(sender, e)
{
       if(ok)
        {
           do something
         }
         else
          {
           e.set_cancel(true);
          }
 }

I searched since yesterday ... I found not solution for the moment. Hope you can help me. I would like to cancel and keep my previous index selected. I tried to re-set my index with set_selected but I created a loop and indexchanging is recall again and again ..

Thank

Roms

[Shinu]

Hi Romain,

Please have a look at the following code I tried which works fine at my end. The RadListBox contain three items in which if you try to select the second item, the item wont get selected and the previously selected item would remain as selected.

ASPX:

<telerik:RadListBox runat="server" ID="ListBoxFile" Height="100px" OnClientSelectedIndexChanging="onClientSelectedIndexChangingHandler"
    SelectionMode="Multiple" AutoPostBack="false">
    <Items>
        <telerik:RadListBoxItem runat="server" Text="Item 1" />
        <telerik:RadListBoxItem runat="server" Text="Item 2" />
        <telerik:RadListBoxItem runat="server" Text="Item 3" />
    </Items>
</telerik:RadListBox>

JavaScript:

<script type="text/javascript">
    function onClientSelectedIndexChangingHandler(sender, args) {
        if ((args.get_item().get_text()) == "Item 2") {
            //cancelling the action if the Item 2 is selected
            args.set_cancel(true);
            sender.findItemByText(sender._element.value).select(true); //selecting the previously selected item.
        }
        else {
        //your code here
        }
    }
</script>

Thanks,
Shinu.

[Romain]

Hi Shinu, thank a lot for your quick answer. I reproduced your case and it works great too for me. I try in my own case for my project and I've got the same problem than I already explain. An infinite loop is created and indexchanging is called again and again. In my own case my first condition is a requierdfieldvalidator

If fields are valide the user can pass to next item if validator is not valid the action must be canceled and the same item must stay selected. So I think my condition it's alway true whereas you test if item is item "text2".

I'm surprised because why we have to "re"set the selected item ?

In my case the listbox is populate by server-side. So this is my code JS.

JS

function onClientSelectedIndexChangingHandler(sender, e)
            {
                var lb = $find("<%= ListBoxFile.ClientID %>");

                if(Page_ClientValidate())
                {
                  /* Do something */

              }
              else
                   {
                       e.set_cancel(true);
                       sender.sender.get_selectedItem().select(true);
                   }

            }

Exemple of control with field validator

<telerik:RadTextBox runat="server" ID="txtBoxName">
  </telerik:RadTextBox>
 <asp:RequiredFieldValidator ID="validatorTxtBox" runat="server" ControlToValidate="txtBoxName"
    Display="Dynamic" ErrorMessage="*">
  </asp:RequiredFieldValidator>

Thk Roms ;)

[Romain]

So no one to help me ? I search hard since a couple of day .. :( but I'm still block ...

Thanks Romain

[Nencho]

Hello Romain,

I tried to replicate the issue you are facing, base on the provided code snippets, but to no avail. Here is a video, demonstrating the behavior at my end. Please correct me if I am doing anything wrong.

Kind regards,
Nencho
the Telerik team

[Romain]

Yes thanks you Nencho, It's like me except that I bind my list by server but it's a detail ... it seems to work but it's not very "userfriendly" because when we cancel the action the last item doesn't stay selected and maybe user can think that no elements are selected .... But when we put the text inside field, the list box comes back normal with selection OK ... I hope you understand me

In the precedent case show by Shinu the previous Item stay selected .. this is what I want

Roms

[Nencho]

Hello Romain,

Actually, the previously provided implementation was note the proper one, because as you had well observed the item gets unselected, when we set cancel to the eventArgs. Therefore, I would suggest you the following workaround:

function onClientSelectedIndexChangingHandler(sender, e) {

           var lb = $find("<%= ListBoxFile.ClientID %>");

           if (Page_ClientValidate()) {
               /* Do something */
           }
           else {
               e.set_cancel(true);

               var item = sender.get_selectedItem();

               if (item) {
                   item._setSelected(true);
                   sender._registerSelectedIndex(item.get_index());
               }
           }
       }
   </script>

Please give it a try and let me know the results.


Regards,
Nencho
Telerik

[Romain]

Yeah ! thank you so much It works perfectly :)