drag a cell to outside slickgrid element

[lb]

I would like to be able to drag a cell information to an element outside of slickgrid (to a dynatree).

dynatree uses  jquery.event.drag-2.0

Can slickgrid be made to work with it? So far I can't do it..

Thanks

[Steve Fazekas]

Try on click event and clone the HTML node of the grid and then you can attach that as a drag event / ghost to where you want to drop it.

This way the original object stays in the grid and you simulate that the user is actually dragging that object in the size you want it. I do this for my dashboard config screen which has a section for drag elements, so I know it should work in a similar way.

Use the draggable and droppable plugins.

Each element you click on will need a .draggable class

Have fun! Let me know if you have more questions.

Steve Fazekas

Sent from my iPhone

[lb]

Thanks for your input.

I understand your solution, but I'm not getting how to implement it.

In the onClick event, I can't get the html of only the cell, bacause what is responding is the whole grid.

Do you have some code that can help?

Thanks!

[Steve Fazekas]

I'll dig something up today and send you some samples of the code I have for the on click event to create a hover div on the cell data as it would be normally shown in the cell to be truncated.

You may be able to extrapolate from there on the drag event. It took me a while to code the drag stuff to where i wanted it to be prepared to get a little frustrated...

I use the dataview btw.

Steve Fazekas

[Steve Fazekas]

This would not be the full-blown code you would use to create the cell drag event, but to get you started...
I'm not sure if there is a mouseDown event, so I'll use the double click event for an example.
This is mainly what I use for a hover onMouseEnter event to show the contents of a cell which could be truncated...

This is in your create SlickGrid declaration to create the slickgrid object...

grid.onDblClick.subscribe(function(e,args){
            e.stopPropagation();
            var obj = grid.getCellFromEvent(e);
            var row = dataView.getItem(obj.row);
            var cellVal=$.trim(row[grid.getColumns()[obj.cell].field])
            offset=$(e.target).offset(); //position of cell
// use this for your draggable, have a DIV object you can position absolute and drop the data into
            hoverObj=$("#cellContent");  // should have class draggable
            hoverObj.removeClass('hidden').css('top', offset.top);  // set some initial positioning, so it is over the cell itself and size it the way you want

// here are some considerations when using "offset".  I use UI layout,
// so any dynamic changes in the width or actual position of the grid on the screen can mess up your offset calculation
                //calc offset left, hoverObj W and page Width
                    hoverLeft=offset.left;
                    hoverW=hoverObj.outerWidth();
                    paneLeftW=$('.grid-canvas').offset().left; //left menu is open
                    scrollLeft=$('.slick-viewport').scrollLeft(); //grid is oversized, so scroll right
                    windowWidth = $('.grid-canvas').width();
                    //console.log(scrollLeft)
                    if(hoverW + hoverLeft > windowWidth){hoverLeft=windowWidth-hoverW +scrollLeft}
// do whatever else you want to the object as far as dragging it

})

I appreciate any feedback from anyone else reading this as well.
I believe I have some of this coded which only considers 1 slickgrid being loaded in the page.

Cheers,

Steve

[Michael Leibman]

https://github.com/mleibman/SlickGrid/blob/master/examples/example9-row-reordering.html