Using Right-Click to Effect Left-Click

[Robert]

Please take a look at the enclosed screenshot.  Notice that the 3rd item (in blue) in the RadListBox has been previously selected (via a traditional left-click).  But then the user chose to go to the 7th item (in yellow) and right click there.  Ideally what I'd want to happen, if the user chooses a valid menu item, is for this 7th item to be processed instead of the 3rd.  In other words, if the user chooses "Move Muck" in the Context Menu then I'd first want the 7th item in the RadListBox to be selected.

But, search as I might, I could not find out where to detect that the Context Menu was hovered above the 7th item.

How would I resolve this?

Robert

[Kate]

Hello Rmdw,

To achieve the desired behavior you could use client-side and find the menu item that is clicked (in case this is the item with text "Move Muck") , then find the desired ListboxItem and use the select property to set the  desired item of the RadListBox.

Regards,
Kate
the Telerik team

[Robert]

Kate,

You wrote:

To achieve the desired behavior you could use client-side and find the menu item that is clicked (in case this is the item with text "Move Muck") , then find the desired ListboxItem and use the select property to set the  desired item of the RadListBox.

Using my initial example, the 3rd item had been previously selected.  Then they right-clicked on the 7th item.  The RadListBox's selectedIndex property will be set to 2 [0,1,2] yet it is Index #6 that I wish to obtain.  I don't think your suggested solution would provide the value of 6, would it?

Robert

[Kate]

Hello Robert,

Using the code below you can make the right-clicked item selected and then operate with it according to your logic. For a testing purpose I left the alert() function that returns the index of the right-clicked item

<script type="text/javascript">
        function OnClientContextMenu(sender, args) {
            args.get_item().select();
            alert(args.get_item().get_index());
         }
    </script>

 
markup:

<telerik:RadListBox runat="server" ID="listb1" OnClientContextMenu="OnClientContextMenu">
        <Items>
            <telerik:RadListBoxItem Text="item1" Value="1" />
            <telerik:RadListBoxItem Text="item2" Value="2" />
            <telerik:RadListBoxItem Text="item3" Value="3" />
            <telerik:RadListBoxItem Text="item4" Value="4" />
            <telerik:RadListBoxItem Text="item5" Value="5" />
            <telerik:RadListBoxItem Text="item6" Value="6" />
            <telerik:RadListBoxItem Text="item7" Value="7" />
        </Items>
    </telerik:RadListBox>
    <telerik:RadContextMenu runat="server" ID="contextmenu">
        <Targets>
            <telerik:ContextMenuControlTarget ControlID="listb1" />
        </Targets>
        <Items>
            <telerik:RadMenuItem Text="item1">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="item2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="item3">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>

Let me know if this is the desired behavior or I am missing something.

Kind regards,
Kate
the Telerik team

[Robert]

Very interesting technique, Kate.  Thank you!

I didn't realize that one could intercept the ContextMenu call and still have the menu appear.  But then I remembered from my server-side programming that one can attach many event handlers to a single event.

Your general approach works perfectly.  My situation is a tad more complicated because a server-side event is is called whenever the user changes the Selected Index.  This has the effect of showing and then quickly hiding the Context Menu.  But I think I can fix this.

Once again, thank you!

Robert

[Robert]

Kate,

Actually, maybe you can help me resolve something related to my original post.  Based on your earlier post and some further research I've done, here's a Javascript function I've created:

  function rlbContextMenu(sender, args) {<br>    // Cancel the immediate display of of the Context Menu<br>    var rawEvent = args.get_domEvent().rawEvent;<br>    $telerik.cancelRawEvent(rawEvent);<br><br>    // Explicitly select the item that was right-clicked upon.<br>    // This inadvertently causes 'rlbClicked' to be called.<br>    args.get_item().select();  <br><br>    // Set a timer to display the Context Menu in a moment<br>    setTimeout(function() {<br>      var menu = $find("<%= radContextMenu_ListBoxStopes.ClientID %>");<br>      menu.enable();<br>      alert(menu.get_enabled());<br>    }, 1000);<br>  }

Here's what I'm attempting to do in this function:

1. Cancel the immediate display of the Context Menu.
2. Left-click the item that was right-clicked.  This in turn calls my local click-handler, which itself calls a server-side click handler.
3. Setup a timer which is to display the Context Menu a bit later (after the server-side code has done its thing).  

I initially chose a 1000 ms delay for the timer simply for test purposes.  I added the 'alert' call simply to show me whether the system thought the menu was being displayed.  Unfortunately the menu is not actually appearing.  I'm not sure why.  Might you?

Robert

[Kate]

Hello Robert,

Can you please clarify at which moment you call the rlbContextMenu function (meaning what event of the RadListBox control you use to call the ContextMenu)?

Best wishes,
Kate
the Telerik team

[Robert]

Kate,

I just have the ContextMenu connected to the RadListBox in the "traditional" way.  Here's the layout definition for each:

<telerik:RadListBox ID="radListBoxStopes" runat="server" Width="100%" Height="100%" OnClientSelectedIndexChanged="rlbClicked" OnClientItemDoubleClicked="rlbDoubleClicked" <br>                              onselectstart="return false;" OnItemCreated="radListBoxStopes_ItemCreated"><br><br><telerik:RadContextMenu ID="radContextMenu_ListBoxStopes" runat="server" OnItemClick="radContextMenu_ListBoxStopes_Click" CollapseAnimation-Duration="1">

Robert

[Peter]

Hello Robert,

When you right-click a RadListBox item and then handle

function OnClientContextMenu(sender, args) {
          args.get_item().select();
       }

, calling select() should not cause a postback. It is my understanding however that in your case it this does cause a postback. I suggest you try to figure out what is causing this and prevent it. Could you please send us a simple sample code sufficient to replicate the issue so we can create a working sample out of it and test it locally? I am especially interested to better understand what you mean by the following -

Explicitly select the item that was right-clicked upon.<br> // This inadvertently causes 'rlbClicked' to be called.


Regards,
Peter
the Telerik team

[Robert]

Peter,

First off, my apologies for the slow response.  I was busy during the holidays and then got a terrible flu immediately after.  Only now am I getting back to work.

If we may, let's go back to basics about what I'm trying to accomplish: I want to be able to right-click on a RadListBox item and effectively have this cause a left-click just before.

As per your request, I have mocked up a demo app of what I'm trying to accomplish.  You can download it here: http://mwtech.com/downloads/public/RadListBox_Test.zip

Now, keep in mind, this is extremely simplified.  In point of fact, when the user left-clicks on a RadListBox item, not only will it select it but, more significantly, this will cause server-side code to draw a complex flowchart associated with that particular item.  While I'm not using the double-click server-side functionality in the demo app, I will be doing so in the actual app.

To illustrate the heart of the problem I'm facing, do this:

1. Left-click on the first item [Apples : 58 units]
2. Now, right-click and Add or Subtract an item.

Everything appears to work correctly, yes?

But, now do this, as a user might be apt to do:

1. Hover over the fourth item [Dates : 41 units]
2. Now, right-click and Add or Subtract an item.

As you & I would expect, the tally of the first item got altered because it's the one that is currently selected.  BUT any average user would naturally expect the item being hovered over to be operated upon.

That is my dilemma.  Do you have a solution to this problem?

Robert

[Peter]

Hi Rovert,

Thank you for providing a sample. It helped me understand what the problem is.

I can suggest the following workaround:

1. Add a hidden field to the page:

<asp:HiddenField ID="HiddenField1" runat="server" />

2. Attach to the OnClientContextMenu event.

<telerik:RadListBox ID="RadListBox1" runat="server" Width="100px" Height="300px"
                 OnClientContextMenu="OnClientContextMenu" onselectstart="return false;" OnClientSelectedIndexChanged="rlbClicked"
                 OnClientItemDoubleClicked="rlbDoubleClicked">

3. Handle OnClientContextMenu to set the value of the hidden ifeild to the index of the right-clicked item:

function OnClientContextMenu(sender, args) {
          document.getElementById("HiddenField1").value = args.get_item().get_index();
      }

4. Use the value of the hidden field in the RadMenu's Item click handler like this:

protected void RadContextMenu1_Click(object source, RadMenuEventArgs e)
   {

     * * *

     int idx =  Convert.ToInt16(HiddenField1.Value);//RadListBox1.SelectedIndex;

     * * *

   }

I hope this is an acceptable solution for your case.

All the best,
Peter
the Telerik team

[Robert]

Peter,

Thank you for the Hidden Variable tip.  Interesting approach.

Unfortunately I don't have the option to simplify things like you do with respect Single & Double clicks.  But I have adopted your general approach here: http://mwtech.com/downloads/public/RadListBox_Test2.zip

Where I'm stuck is with function showMenu    Something appears wrong with the source parameter but I don't know what to change.  I'm hoping you might have some ideas.

So that we're 100% clear, use this test approach:

1. Click on the first listbox item.
2. Right-click on the 4th listbox item.

What *should* happen when you engage Step #2 above is:

1. It stores the index value of the 4th listbox item (ie. index = 3) into the hidden variable
2. It calls the Single Click function and through the logic therein determines that Index 3 is the one the user wishes to "click".
3. It simulates a server-side click with Index 3, doing all the processing therein.
4. Since the listbox item was right-clicked upon, the Context Menu must still appear.

That's what I'm hoping to accomplish.

Robert

[Peter]

Hello Robert,

I tested your sample, but I couldn't understand what exactly the problem is. Here is a video capture of my test  -
http://screencast.com/t/OlcHNZon. Do you get different behavior at your side?

All the best,
Peter
the Telerik team

[Robert]

Peter,

On my system, it's crashing just below that "debugger" statement.  I'm enclosing a screenshot to show you where.

Is it possible that you're running VS2010 and I'm running VS2008 and that's where the problem lies?

Something appears wrong with the 'src' here:   menu.show(src);

This may help you pinpoint the problem:

? src
{...}
    altKey: Member not found.
    altLeft: Member not found.
    behaviorCookie: Member not found.
    behaviorPart: Member not found.
    bookmarks: Member not found.
    boundElements: Member not found.
    button: Member not found.
    cancelBubble: Member not found.
    clientX: Member not found.
    clientY: Member not found.
    constructor: {...}
    contentOverflow: Member not found.
    ctrlKey: Member not found.
    ctrlLeft: Member not found.
    data: Member not found.
    dataFld: Member not found.
    dataTransfer: null
    fromElement: Member not found.
    keyCode: Member not found.
    nextPage: Member not found.
    offsetX: Member not found.
    offsetY: Member not found.
    origin: Member not found.
    propertyName: Member not found.
    qualifier: Member not found.
    reason: Member not found.
    recordset: Member not found.
    repeat: Member not found.
    returnValue: Member not found.
    screenX: Member not found.
    screenY: Member not found.
    shiftKey: Member not found.
    shiftLeft: Member not found.
    source: Member not found.
    srcElement: Member not found.
    srcFilter: Member not found.
    srcUrn: Member not found.
    toElement: Member not found.
    type: Member not found.
    url: Member not found.
    wheelDelta: Member not found.
    x: Member not found.
    y: Member not found.


Robert

[Peter]

Hello Robert,

I used VS 2008 to open your sample, so the VS version couldn't be causing the discrepancy in behavior. What browser do you use for testing this? Can you try with various browsers such as IE9, FF and Chrome and let me know if you steadily experience the problem with all of them?


Regards,
Peter
the Telerik team

[Robert]

Peter,

I use IE8 for my development work but I have to as it's the standard of the client I'm developing the software for.  Indeed, I could test it with other browsers but that won't really resolve anything for the reason I explained.

You're 100% sure that the creation of the 'src' parameter is correct?  Might there be any substitutes or a different approach to forcibly display the context menu?

Robert

[Robert]

Peter,

It's a few days later and I have not yet heard anything back from you about the problem I'm experiencing.  I'm using VS2008, IE8, and your latest set of controls and it is consistently crashing.

I appreciate the fact that the same project is not crashing on your system but unfortunately that doesn't help me resolve the situation here on my end.

Do you have any suggestions about what I could try to fix this?

Robert

[Peter]

Hello,

Here is a workaround with the showAt(x,y) method, that worked fine at my side with IE8:

var x;
  var y;

  function rlbContextMenu(sender, args) {
    // Cancel the immediate display of the Context Menu
    var rawEvent = args.get_domEvent().rawEvent;
    x = rawEvent.clientX;
    y = rawEvent.clientY;

    $telerik.cancelRawEvent(rawEvent);

    document.getElementById('hidFldIdxVal').value = args.get_item().get_index();

    // Explicitly select the item that was right-clicked upon.
    // This inadvertently causes 'rlbClicked' to be called.
    args.get_item().select();

    // Set a timer to display the Context Menu in a moment
    setTimeout(function() { showMenu() }, 1000);
  }

  function showMenu() {
    //debugger
    var menu = $find("RadContextMenu1");
    menu.showAt(x,y);
  }

Regards,
Peter
the Telerik team

[Robert]

Peter,

Thank you SOOOOOO MUCH!!!!   Your solution works perfectly and resolves a big problem for me!

I took your code, modifying only the selection of items using jQuery to accommodate the more complex nested nature of my web form.

As an acknowledgement of your great efforts, I've prepared a video for you: http://mwtech.com/downloads/public/RadContextMenuProblemSolved.7z

Thank you again!!!

Robert Werner
Vancouver