[Solved] Using selectable and reorderable at the same time, drag and drop individual rows without selecting

[Kris]

We have implemented reorderable.rows in our grid, which uses the columns.draggable handler, alongisde the columns.selectable checkbox. We want to achieve two things:

• Dragging and dropping single rows without needing to select a checkbox (e.g. user loads the grid, drags and drops using the handler, rows are reordered)
• Multi-row dragging and dropping (e.g. user loads in, selects 2 checkboxes, uses the handler to reorder both rows at the same time)

According to the documentation, both behaviors are seemingly not achievable at the same time. Is there a work around or a different feature that we could use to get the desired result?

Also, we would like to make the handler display data as well. In essence, we want another column that displays a date to be the one column that you can use for dragging and dropping. My thinking was to give the draggable column a template with the data, but it seems to always be overwritten with the three stripes icon. Is there a way to achieve this?

Thank you,

Kris

[Neli]

Hello,

• Your understanding of the documentation is correct: the built-in Kendo UI for jQuery Grid features for row reordering (reorderable.rows) and multi-row selection (selectable with checkboxes) are not designed to work together seamlessly for both single-row and multi-row drag-and-drop. There is currently no built-in option to achieve both behaviors simultaneously, as drag and selection events can conflict. However, if it is suitable for your scenario, you can add the checkbox column using a template as demonstrated in the following KB: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/grid-selection-checkbox 
• In the same example, you can enable the  selectable: "multiple, row", which will allow drag-and-drop of multiple rows
• Regarding customizing the drag handle appearance, what you can try is replacing the '.k-drag-cell' content when the Grid is loaded (in the dataBound event handler):

$('.k-drag-cell').empty().append('<span>Test</span>')

Here you will find a modified Dojo where all of the above is implemented: https://dojo.telerik.com/BaqpiqiS/3 

I hope this helps. 

Regards,
Neli
Progress Telerik

[Kris]

Hi Neli, thanks for your response.

We implemented a small workaround for the single row dragging by activating the selection of a row on mousedown on the handler, thus activating the drag and drop for it without having to release the click and click again, which works well enough for our purposes. Since we're trying to replicate some old behavior that our customers are used to, our constraints are quite specific, but we found a decent compromise.

We'll try your handler customization idea as well.

Cheers,
Kris

[Neli]

Hi Kris,

Thank you very much for your feedback.

I am glad to hear that you have found a solution that suits your scenario.

If you have additional questions or need further assistance related to the Kendo UI for jQuery components, please let us know and we will be happy to help.

Regards,

Neli