›

QUERY: JS CTRL, SHIFT, Context Menu

dhruba.bandopadhruba.bandopa
in JavaScript
I am wondering if anyone knows good code that implements the Windows Explorer selection mechanism (for a DataGrid or HTML table). I know the basics of assigning attributes to DataGrid rows (eg. objDataGrid.Rows(index).Attributes("onclick")) which applies to HTML tables. But wondering if there's a good technique to do, for example:

1. Left-click on file/row to select it.
2. Left-click on a different file/row to select it, reseting previous selections.
3. Hold down CTRL + left-click on different files/rows to multiple select, thus retaining all selections during CTRL key is down.
4. Hold down SHIFT + left-click on different file/row and all files/rows between first left-click and second left-click + SHIFT key are selected.
5. Right-click on one of the selected files/rows brings up a context menu.
6. Right-click on a non-selected file/row selects it, deselects all others, and brings up context menu.


I have googled around and there are many examples, especially using the IE's onContextMenu event. However I still haven't found any code/library which does all 6 of the above (all-in-one). I am looking for something which is cross-browser too.

Anyone seen such a code/library that does the above 6?

Comments

  • dhruba.bandopadhruba.bandopa
    declarative context menus?

    I have managed to create a nice CTRL, SHIFT selection & context menu system with my DataView (table).

    CTRL select works nicely. However the SHIFT selection always seems to create a drag-selection between the start and ending rows.

    A little reminder. CTRL select is when one holds the CTRL key and mouse left-click on rows to select individual rows (eg. row 1, 3, 5). SHIFT select is when one holds the SHIFT key and left-click on row 1 and then row 10 to automatically select all rows between 1 and 10.

    Does anyone know how to prevent IE & FF from selecting the text inbetween the SHIFT selection phase?


    Currently I use td background-color for selection and knowing what to delete, etc. Is there a better way to do this?
  • mac_doggiemac_doggie
    : declarative context menus?
    :
    : I have managed to create a nice CTRL, SHIFT selection & context menu system with my DataView (table).
    :
    : CTRL select works nicely. However the SHIFT selection always seems to create a drag-selection between the start and ending rows.
    :
    : A little reminder. CTRL select is when one holds the CTRL key and mouse left-click on rows to select individual rows (eg. row 1, 3, 5). SHIFT select is when one holds the SHIFT key and left-click on row 1 and then row 10 to automatically select all rows between 1 and 10.
    :
    : Does anyone know how to prevent IE & FF from selecting the text inbetween the SHIFT selection phase?
    :
    :
    : Currently I use td background-color for selection and knowing what to delete, etc. Is there a better way to do this?
    :
    Why not do it the phpmyadmin way, and place checkboxes in front of each row, so you can select them...

    I've made you an example... ofcourse this is only step one, but you can build a nici object around it. I always start like this making html with some JavaScript Functions and then make an object that lets you create multiple instances so that the ID of the table doesn't matter anymore for the functions etc... makes it a lot easier.

    In this example I didn't quite get the event.x working in firefox, but in IE it does work. The rest of the selection procedure does work in IE and FF. only thing that goes wrong in FF is that the contextmenu appears on the wrong location...

    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />


    website - page






    .selected { background-color : #EDEDED; }
    .notselected { background-color : #FFFFFF;}
    .contextmenu {border : 1px solid orange;background-color:yellow;color:blue;}
    #theTable tr {cursor:pointer; cursor:hand;}



    var selection = Array();
    var selecting = false;

    function select(obj, event) {
    if(event.ctrlKey) {
    addToSelection(obj)
    }else if(event.shiftKey) {
    extendSelection(obj)
    }else {
    selection = new Array();
    selection[0] = obj.id;
    }
    setStyles();
    //alert(selection);
    }

    function addToSelection(obj) {
    // Check if it is allready in the selection, then remove it
    //
    var selected = false;
    for(i=0;iCopy';
    context.style.margin = '0px';
    context.style.padding = '0px';
    context.onmouseout = function() {document.body.removeChild(document.getElementById('context'));};
    return false;
    }

    function Copy() {
    alert('Rows Copied...');
    // ToDo:...
    }


    abcd
    abcd
    abcd
    abcd
    abcd
    abcd



    [/code]

    Hope this is what you meant. What you put in the contextmenu you must decide for your own ofcourse...

    good luck with it.
    ;-)
    -mac-
    mailto:mac_doggie@hotmail.com
    the Netherlands...


  • dhruba.bandopadhruba.bandopa
    Mac Doggie? Did you get my email?
  • mac_doggiemac_doggie
    : Mac Doggie? Did you get my email?
    :
    Sorry,

    no didn't get it... check your programmersheaven mailbox

    -mac-
    ;-)
    -mac-
    mailto:mac_doggie@hotmail.com
    the Netherlands...


  • mac_doggiemac_doggie
    : : Mac Doggie? Did you get my email?
    : :
    : Sorry,
    :
    : no didn't get it... check your programmersheaven mailbox
    :
    : -mac-
    : ;-)
    : -mac-
    : mailto:mac_doggie@hotmail.com
    : the Netherlands...
    :
    :
    :
    Hi,

    I haven't been sitting still last week and enjoyed making this cool multiselect table, so I pimped it a little... I've now managed to create a class around it so you can make all tables in your HTML like the example I gave last week. While I was busy just kept thinking of possible functionality I could build in, so I've been programming every evening for an hour or so, and got it quite working... THis is not the definite version of this script, but I thought Why not post what I have build so far for now? If you copy and paste the code below in two files, it will give you two MultiSelect Table instances, you can select only one row in the upper table, and multiple rows in the lower one... You can also move rows from one table to the other, or move a row up or down . As a special bonus feature I added some functionality to edit the values inside the table. You can doubleclick a row and you get some input boxes in wich you can edit the contents of the tablecells. There are different kinds of contenttypes for a cell, you can have text (textarea) varchar (input type=text) or enum (select) Even password, only password is not really usefull yet because it displayes what you typed after you confirm your edit... (You can confirm your edited values with ctrl-enter or cancel them with escape or clicking on another row.)
    I am planning on making more content types like integer, float or even a date selector. I also want to build in a function that lets you get all values as a form, so you can submit the whole table, or only the row you edited... BUt that is for the final version. For now here is version 0.1 alpha... Enjoy and let me know what you think of it...

    Hmmm. I see that my message has gotten too long and I can''t save it with my code in it, so If you want to see it just send me a personal mail through the mail system of programmershaven (put in your email address in case those messages must be short too...)

    ;-)
    -mac-
    mailto:mac_doggie@hotmail.com
    the Netherlands...


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

In this Discussion