We Keep Coding

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.

table design or div design, confusion

have the following screen design for my demo application.
Should this design be done using a <DIV> or a <TABLE>?
Note: when you click on the data row it expands (accordion like) and shows description row where you can see some description about the row as a single column which spans across the width of the table.
The menu works when user clicks on an image given in that column.
I know that a table is used only to represent tabular data.
I have the menu in last column as well as an accordion like hidden row for each data row showing the description when user clicks on the data row.
So, I am not sure whether it can be considered as part of a tabular data.
This is related to fulfilling the following web-guideline:
http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/complete-diff.html#H51
The data is going to be text apart from the menu. Each menu link performs different functionality. The accordion row is also text mostly.
Please advise here.
Thanks.

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

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.

jqGrid Column Sorting Issue

I have a jqGrid displaying the data in the table correctly and on gridComplete when the table loads, it applies some click functions to some icons in certain table cells on each row. When the table initially loads, all the functions work properly, but when I click a column header and sort a column in either asc or desc order, the table sorts the rows and then the click functions no longer work. Has anybody run into this issue using jqGrid before? I am using pagination with the table and when i go to the next page, the click functions work again until I sort a column. Any help would be greatly appreciated.
*I forgot to mention before that I also have a subgrid for each row that is collapsed and will expand when an arrow icon is clicked on at the beginning of the row.

Figured it out. When I created the table, I added a small div element that was hidden at the bottom of the main table div element that holds all the data. The small div slides up and down with setting options inside of it. When you sort the table, the jqgrid seems to sort the table and place it within the div inside of the main table. Since it probably doesn't specify what div to put the sorted data back into, it places it into both div elements. When i sorted the data and looked at the smaller div, the sorting recreated the table within the small div as well. So, I ended up with two tables, my original and the new one within the small div. This messed up my java scripts, because the references were all jacked up at that point. So, my solution was to remove the small div when sorting and then when the sorting finished, recreate the small div so the sorting function doesn't get confused. Also, Zikes, the gridComplete function does not run on sort for me. I put an alert statement within the gridComplete function and it shows when the table is loaded initially, but when you sort a column it never shows. I placed the alert at the very beginning of the function, so I know it wasn't running. Either the documentation you are looking at is incorrect or i have some sort of setting that disables the gridComplete function from running on sort. Thanks for the input.