prevent selection of first item when remaining items transferred

[Albert Shenker]

I have noticed, when I transfer items, the item that is above the first transferred item gets selected and highlighted after the transfer. In my scenario, the first item in my left listbox is as "Add New Item" option which pops up a dialog and allows the user to add new items to the list. If the list starts out with two items (the "Add New Item" option and a real item), and the user transfers the real item, then when the transfer is done, the first item is selected automatically.. thus opening the dialog. How do I prevent the first item from getting selected after later items are transferred?

I already handle the SelectedIndexChanging event in order to create the dialog opening funcitonality. So, I want the dialog to open when the User clicks on the Add New item.. but, this item should never be automatically selected because the item(s) below it were transferred. 

function HandleCampaignItemSelecting_SE(sender, eventArgs) {
                var value = eventArgs.get_item().get_value();

                if (value == 'AddNew') {
                    // open dialog
                    eventArgs.set_cancel(true);
                }
            }

[Genady Sergeev]

Hi Albert Shenker,

The approach that you use (cancelling the changing event) seems to work fine. What is the exact problem that you experience with this solution?

Best wishes,
Genady Sergeev
the Telerik team

[Albert Shenker]

My code doesn't distinguish between the user clicking on "Add New..", and "Add New..." getting automatically selected. If the user clicks on it, then yes, I want to open the dialog and cancel the selectedindex changing event. If it is getting automatically selected, I don't want to open the dialog. I included:

// open dialog

in my example just to represent the code that would run to open the dialog. I need to prevent this code from running during the automatical selection.

[Peter Filipov]

Hello Albert,

Could you please send us a sample project which demonstrates the issue to examine it locally?

Best wishes,
Peter Filipov
the Telerik team

[Albert Shenker]

How do I send a sample project ina forum thread? Ayhow, here's the markup for the page. It's pretty simple. When you select Item1 and Item 2 from the left hand list and transfer them, then it seems like "Add New" gets selected by default and the dialog gets opened. I don't want this to happen. The "Add New" dialog should only open when the user clicks on "Add New".

<telerik:RadCodeBlock ID="rcb1" runat="server">

        <script language="javascript" type="text/javascript">

            function HandleItemSelecting(sender, eventArgs) {
                var value = eventArgs.get_item().get_value();
                if (value == 'AddNew') {
                    alert('open dialog to add new')
                    eventArgs.set_cancel(true);
                }
            }

        </script>

    </telerik:RadCodeBlock>

    <telerik:RadListBox runat="server"
        ID="rlbSource"
        Height="270px"
        Width="200px"
        SelectionMode="Multiple"
        AllowTransfer="True"
        AllowTransferOnDoubleClick="True"
        TransferToID="rlbSelected"
        OnClientSelectedIndexChanging="HandleItemSelecting"
    >
    <Items>
        <telerik:RadListBoxItem Text="Add New Item..."  Value="AddNew" />
        <telerik:RadListBoxItem Text="Item 1"  Value="Item1" />
        <telerik:RadListBoxItem Text="Item 2"  Value="Item2" />
    </Items>
    </telerik:RadListBox>

    <telerik:RadListBox runat="server"
        ID="rlbSelected"
        Height="270px"
        Width="200px"

    />

[Peter Filipov]

Hi Albert Shenker,

Here is my solution regarding your scenario:

<telerik:RadCodeBlock ID="rcb1" runat="server">
            <script language="javascript" type="text/javascript">

                function HandleItemSelecting(sender, eventArgs) {
                    var domEvent = eventArgs.get_domEvent();
                    if (domEvent != null) {
                        var value = eventArgs.get_item().get_value();
                        if (value == 'AddNew') {
                            alert('open dialog to add new')
                            eventArgs.set_cancel(true);
                        }
                    }
                    else {
                        eventArgs.set_cancel(true);
                    }
                }
        </script>
        </telerik:RadCodeBlock>
        <telerik:RadListBox runat="server" ID="rlbSource" Height="270px" Width="200px" SelectionMode="Multiple"
            AllowTransfer="True" AllowTransferOnDoubleClick="True" TransferToID="rlbSelected"
            OnClientSelectedIndexChanging="HandleItemSelecting" >
            <Items>
                <telerik:RadListBoxItem Text="Add New Item..." Value="AddNew" />
                <telerik:RadListBoxItem Text="Item 1" Value="Item1" />
                <telerik:RadListBoxItem Text="Item 2" Value="Item2" />
            </Items>
        </telerik:RadListBox>
        <telerik:RadListBox runat="server" ID="rlbSelected" Height="270px" Width="200px" />

Regards,
Peter Filipov
the Telerik team

[Albert Shenker]

This seems to work, but I have another scenario where I would like to prevent the automatic selection of an item after transfer.  i modified your code to basically cancel the selecting even if it wasn't fired as a result of the user click:

function HandleItemSelecting(sender, eventArgs) {
               var domEvent = eventArgs.get_domEvent();
               if (domEvent == null) {
                   eventArgs.set_cancel(true);
               }
           }

The issue I have run into is it seems this fix interferes with the drag/drop functionality of the list transfer. When the user clicks to drag an item, it gets highlighted, but when they try to drag/drop, the drop doesn't work. It appears that what is happening is the item never gets selected when the user clicks to drag. What the user needs to do is click on the item to select it, then release their mouse button, then click on it again to drag/drop. So, basically is there a way to prevent the listbox from automatically selecting an item while keeping the drag/frop funcitonailty?

Just as an aside, I'd be interesteed in knowing the reasoning behind the default behavior of the listbox being to select an item for you after the transfer.  I can think of one or two scenarios where this might be a minor convenience for people, but in general, the behavior is confusing for users. If they don't explicitly select something, then the listbox should not be selecting it for them.

[Peter Filipov]

Hi Albert Shenker,

Please review the code below:

<form id="form1" runat="server">
   <div>
       <telerik:RadScriptManager runat="server" ID="RadScriptManager">
       </telerik:RadScriptManager>
       <telerik:RadListBox runat="server" ID="rlbSource" Height="270px" Width="200px" SelectionMode="Multiple"
           AllowTransfer="True" AllowTransferOnDoubleClick="True" TransferToID="rlbSelected"
           OnClientTransferring="onClientTransferring" OnClientTransferred="onClientTransferred"
           EnableDragAndDrop="true">
           <Items>
               <telerik:RadListBoxItem Text="item 3" Value="item3" />
               <telerik:RadListBoxItem Text="Item 1" Value="Item1" />
               <telerik:RadListBoxItem Text="Item 2" Value="Item2" />
           </Items>
       </telerik:RadListBox>
       <telerik:RadListBox runat="server" ID="rlbSelected" Height="270px" Width="200px"
           EnableDragAndDrop="true" />
   </div>
   </form>
   <script type="text/javascript">
       var previous;
       var next;
       function onClientTransferring(sender, args) {
           args.get_item().set_selected(false);
           previous = args.get_item().get_previousSibling();
           next = args.get_item().get_nextSibling();
       }

       function onClientTransferred(sender, args) {
           setTimeout(function () {
               if (previous) {
                   previous.set_selected(false);
               }

               if (next) {
                   next.set_selected(false);
               }
           }, 200);
       }
   </script>

Regarding your last questions, the reason that an item is selected after transfer is because in that way it is easy to transfer the next item of the RadListBox or transfer the item back.

All the best,
Peter Filipov
the Telerik team