IndexChanging canceling action

8 posts, 0 answers
  1. Romain
    Romain avatar
    15 posts
    Member since:
    May 2013

    Posted 14 May 2013 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Romain
    Romain avatar
    15 posts
    Member since:
    May 2013

    Posted 14 May 2013 Link to this post

    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 ;)
  5. Romain
    Romain avatar
    15 posts
    Member since:
    May 2013

    Posted 17 May 2013 Link to this post

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

    Thanks Romain
  6. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 17 May 2013 Link to this post

    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
    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.
  7. Romain
    Romain avatar
    15 posts
    Member since:
    May 2013

    Posted 17 May 2013 Link to this post

    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
  8. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 22 May 2013 Link to this post

    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
    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.
  9. Romain
    Romain avatar
    15 posts
    Member since:
    May 2013

    Posted 22 May 2013 Link to this post

    Yeah ! thank you so much It works perfectly :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017