How to drag and drop selected row(s) in JqWidgets grid - javascript

I am displaying task list using JqWidgets grid. Now I have requirement that user can prioritize there task by drag and drop the selected task (one or multiple).
As you can see in the attached grid, user has selected multiple item from grid. Now user can priortize the items in the grid with simple drag and drop event.
I am sharing a demo JSFiddle link
Can you please help me to do that...
For reference grid see this link
I will appreciate you if you share a nice example of it to do the same in JqWidgets grid
Thanks,
~Chandan

This example: Drag jQWidgets Grid Records shows how to drag and drop records in jqxGrid. In your case, you will have to use the same approach, write your own logic what happens on Drop and I suggest you to use the jqxGrid's "updaterow" method to update existing rows on Drop.

Related

React virtual list component: Programmatically scroll down

I use React Grid with Virtual Scrolling. Unfortunately, it doesn't have "scroll to row feature". Sometimes, I need programmatically select a row in my React Grid and show the selected row to a user. I know the ID of the desired row, but I am not able to use document.getElementById('elementID').scrollIntoView() because this row has not been generated in the DOM so far.
Any ideas how to solve it? I need a virtual list because of performance and need any that supports grouping of items.
you can use react-scroll-to-component, it will make a smooth scrolling to the referenced component.
I use it and it works great.
Running example I've made

Drag and Drop - Create a new Grid Row while dragging

I am using Sortable Grid from here to perform a drag and drop in my app. However, I want to dynamically create a Row while dropping.
I mean say if there are two rows in Sortable Grid. If user drags an element and thinks of creating the third row before dropping it, then he/she should be able to do it by dropping below the second row. How do I do it?
Use a div below the boxes, and use ondragenter to prepare the program for a new row. I don't know how the plugin works, but this should help. Make the div however high you want, and that will be the distance beneath the list that can be selected (I recommend the height of the grid boxes)

Sortable rubaxa hide floating ghost but not actual row

I am using Sortable from Rubaxa to sort rows from a Bootstrap table.
The table rows have cells which include Bootstrap inputs.
Now, the rows sort alright, but the "ghost" image only shows buttons which are in the row, not the inputs. I want to include the inputs in this "ghost" image, or even better; do not show the actual "ghost" image at all.
A suggestion for a better solution than Sortable is appreciated as well, I just want to drag rows from a Bootstrap table in a particular order, no floating "ghost" image needed/wanted.
For future reference, I solved my issue by disregarding Sortable from Rubaxa and by using sortable() of jQuery UI and by using this solution.

How can I drop drag-able items into drop-zone which contains children drop-zones in Ext JS?

I'm facing a problem with Ext JS drag and drop zones and trying to make it works as I expected:
Please take a look into my Fiddle.
I want to create multiple overlapping drag-and-drop-zones like the attachment: Drag and drop
I have a main drop-zone panels and some panels within it (also are drop zones) and some drag-able items.
In my Fiddle, it works fine except:
I can't drop items into drop-zones that inside another drop-zone(the
1st panel - Drop zone 1).
In the 3rd panel(title: "I'm not a drop zone"), I can drop items into its children.
I want to drag drag-able items into drop-zones, not only into parent drop-zone but also into its children drop-zones too.
How can I do that?
Thank you.
Sorry my bad English.

jqGrid Drag and Drop Rows

jqGrid has a feature that you can drag and drop columns from one table into another table. It can be seen at http://www.trirand.com/blog/jqgrid/jqgrid.html under New in version 3.6 under Drag and Drop Rows
I have two main problems. First of them when I remove a row from one table to another table row id changes(may be its jquery-ui's feature). It can be inspected from trirand's example. Second of them is I loose one of my columns at every move(I will provide more information about second problem)
Any ideas?

Categories