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.
Related
I am using Material UI table components (which is not more than a styled and convenient API for HTML table elements) and I want to make my columns expand collapse on click.
This means that I need that when I click on a column, its sub-columns will be visible and all the rows will also show values for the sub-columns, and when I click on the main column again, the sub-columns will collapse and be invisible again, along with all the values in the rows for those sub columns.
I would also like it to be animated with a nice transition of the columns expanding from the main column into view and collapsing into the main column to invisible.
It doesn't necessarily need to be in react or using MUI, it could regular HTML and CSS, but the animations are crucial!
Thank you in advance for the help :)
I tried to use MUI tables components with the Collapse component (which is an animation component to put things into view with a nice transition) but it was neither smooth nor pretty and not even working properly as the columns were sometimes not aligned..
I've looked everywhere on google and couldn't find any example/library for such a feature anywhere.
I was only able to find examples for expand/collapse rows..
Some of the tables in my web application can be reordered with drag and drop, using this code:
http://isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/
This uses the standard JavaScript insertBefore method to move a table to a different DOM position, like this:
dragObject.parentNode.insertBefore(dragObject, currentRow.nextSibling);
It works fine, but the movement seems abrupt. I would like to update this so that as I drag a table row, the other rows animate to their new positions. This is the same effect that iOS has when you drag a table row in an editable table.
I thought this could be a job for jQuery, so I tweaked the code to change the standard insertBefore methods to jQuery's insertBefore functions, which I thought I could then animate:
jQuery(".dragging").insertBefore(currentRow.nextSibling)
But after playing with different animation options I realized that they could only animate the row that's moving, not the other rows around it.
Has anyone seen a solution for this -- basically simulating the iOS table reordering in HTML? I would prefer a solution that works with my existing table rows so I don't have to completely change my code, but I'll consider changing to a div-based markup if necessary.
Why not use jQuery sortable?
I think it will do what you are looking for.
I refer to my previous question on JQuery Rotating List. You can view the post here.
JQuery Rotating List
My previous post was to make elements in my table list move horizontally. Applying td:first-child and referencing it to my jQuery script as a selector, it works.
But now I'm trying to make my table move vertically. I tried referencing it to tr:first-child but the script just doesn't seem to work.
If I were to change my (tr) to (td), table will be screwed as there are no (tr)'s to seperate the different items in my list. I wonder if there are any way around it.
Or else the other option is to use <li> which will require me to change a whole bulk of code.
Anyone who can offer some advice here will be greatly appreciated.
You mean moving rows of the table vertically, like in this jsfiddle? Or do you want to move individual table cells?
Wondering if anyone can help with this.
I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.
Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.
I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.
Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?
I tried disabling the 'spacer' cells but could not really understand how its done :/
Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.
(The far right and left blocks need to be up against the end of the container)
JSFiddle: http://jsfiddle.net/JsJMH/
Any help would be really appreciated! Many thanks!
Answer: http://jsfiddle.net/morrison/JsJMH/13/
Notes:
Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td.
I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
This is very possible without using tables: http://jsfiddle.net/morrison/quneb/.
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.