CODEWITHSUNDEEP
jqueryslickgrid
Y123
Y123

Reputation: 977

SlickGrid - Selecting a Row without custom controls

I need functionality in the application to allow users click on a row to select a row. Additionally I would want to add features for Ctrl/Shift + click to select a row.

I saw the examples where checkboxes are added to each row to select a row. I do not wish to add such checkboxes to the application.

I came across a link which is a year old but seems to answer my question http://groups.google.com/group/slickgrid/browse_thread/thread/96a5291161d41efa

Is there is a better way of doing things here?

Upvotes: 1

Views: 9770

Answers (2)

Tin
Tin

Reputation: 9082

SlickGrid DOM is NOT static - please avoid modifying it directly.

This functionality is already built into SlickGrid via a pluggable SelectionModel. There are two selection models included in the distro - Slick.CellSelectionModel and Slick.RowSelectionModel. All you have to do is call

grid.setSelectionModel(new Slick.RowSelectionModel());

See http://mleibman.github.com/SlickGrid/examples/example9-row-reordering.html for an example.

Upvotes: 6

Jasper
Jasper

Reputation: 76003

That's an 83Kb file (just the JS), which isn't horrible but is pretty large for what you are trying to do.

//select the parent table element, then select its child (the `tbody` element) then get its children which will be the `tr` elements
$('table').children().children().on('click', function (event) {

    //check to see if ctrl+shift is being held while this click occured
    if (event.ctrlKey === true && event.shiftKey === true) {

        //if ctrl+shift were held during the click then you know this element has been selected
        //and you can do what you need, in this demo I'm just adding a class to denote that the element has been selected
        $(this).toggleClass('selected');
    }
});

As you can see, if all you want to do is test if ctrl+shift were held-down while clicking on the tr element then you can use a lot less than 83KB of code (the above demo is 600 bytes).

Here is a demo: http://jsfiddle.net/YZytJ/

Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind(): http://api.jquery.com/on

Upvotes: 1

Related Questions