javascriptdrag-and-dropdojodom-eventsdgrid

dGrid: Using DnD and Paginaiton together

I am using Dgrid with pagination extension to display Data. For the same grid I have implemented grid's DnD. So I can move rows up and down and rearrange row index using it.

But now, as the number of rows have increased, the grid is divided into more than 5 pages. In this case, how can I move the rows from my 5th page to 1st page using DnD?

One possibility I see is by changing the page on hover of pagination bar at bottom. As per the docs there is one method called as gotoPage which switches the page programmatically. But, how to capture grid pagination hover event? And how to get page number on hover so that can be passed to gotoPage method above.

Solution

  • Solved this using Dgrid events on dom nodes. So basically, we can attach event for pages like below

    grid.on('.dgrid-footer .dgrid-pagination .dgrid-navigation .dgrid-page-link:mouseover',function(event){
var pageindex  = event.target.textContent.trim();
    if(!isNaN(pageindex)){
       grid.gotoPage(pageindex);
    }
})

    This will give control to dragged page number and then you can handle the rest afterward.