Drag and drop Table headers - javascript

I've found a few plugins that does this, but they either have more than what I want which gets in the way and none of them do exactly what I need. Some I simply can't get to work with firebug showing syntax errors in the style sheets even though it seems perfectly fine.
I want something very simple in terms of visuals. Basically I want this:
http://demos.devexpress.com/aspxgridviewdemos/groupingsorting/grouping.aspx
If you look at the link then you will see that you can re-order the columns by dragging the headers, but you can also drag the headers out to where it says "Drag a column header here to group by that column"
I just want a plain way to do this in javascript/jquery with some callback so I can store the column order in an array after you change the order. The data changes I can handle, it's the dragging of the columns and then changing the order or removing the column and adding it to the Group space above that I have issues with.
We actually do you devexpress controls, but for what we're doing it's to slow with all the callbacks their grid needs to do when you do anything on the thing. So we're in the process of creating our own ajax grid that does what we want and how we want it with only what we need.
I hope this makes sense and that someone can help.

I have recently looked at implementing something similar, so while I can't post a code example, I'd recommend looking at jQuery UI Draggable to let you drag the columns to where you want them.
Make the table column order configurable through javascript first. Then make the column headings draggable and based on the new position redraw the table based on the new column layout.
This approach should be faster as you can optimise for your use cases.

Related

ag-grid Filter menu appears behind the rendered cells

Background
I am using headerComponent and cellRenderer in my grid as well as infinite scrolling.
I now wanted to use filtering and maybe sorting and I followed the instructions in the documentation.
Problem
The icons/buttons for the filter and the sort do not appear.
I thought it might be related to the Renderers and this seems to be the case. I tried not using the headerComponent and then I could see the filter and sort icons in the header. But then the menu which opened was behind the cells in the table. The cells are still handled by their cellRenderer. I tried messing with the z-index but I did not manage to bring that menu to the front.
Is there something I should know about this? I did some searches but did not find anything useful on the topic. I can avoid using the Renderer for the headers but I cannot avoid them in the cells.
Related question?
On a maybe related topic, I do not manage to show the overlays at all. Maybe these too are actually hidden behind the cells?

Handle long time sorting in ag-grid (pure JS)

I am working with a big amount of data (1M - 5M), and rows in the grid should be groupable, sortable, and filterable. As ag-grid can populate table with data quickly enough, I use in-memory row model to satisfy requirements.
However, when I click column in order to sort all rows by this column, it takes some time to do this. Moreover, sequential clicking on columns while rows are still being sorted may crash grid as well as browser application.
Are there any ways to prevent user from clicking on columns (disable sorting, show loading overlay, or something like this)?
I am trying to use beforeSortChanged and afterSortChanged events to show overlay or modify DOM elements (to make grid a little bit grey and show loading circle), but it doesn't work properly: beforeSortChanged event handler seems to be stuck for a moment and then only executed.
Ag-grid is used inside Ember framework as a component.
How about using onCellClicked which is an attribute of the columnDefs. Should work in a similar manner to what you are looking for with beforeSortChanged.

How to get a list of all tables that have datatables applied?

I need a list of all tables that have jQuery DataTables applied. I searched the docs and the API but I could not find an array or something like that that holds the tables.
You're looking for $.fn.dataTable.tables() - DataTables's static function.
It can be useful to be able to get a list of the existing DataTables
on a page, particularly in situations where the table has scrolling
enabled and needs to have its column widths adjusted when it is made
visible. This method provides that ability.

Displaying sub-data rows inside a row in SlickGrid Table

I've started using SlickGrid and have to implement a kind of functionality where I need to show sub-row inside a parent row of SlickGrid.
Here's the scenario
Here's Asia, Europe is having sub categories in Services Column and these service columns are expandable/collapsible
I'm trying to customize this for first column.
Is any other link/source available to refer to accomplish the feature.
Are you aware of the grouping/aggregates example ?
http://mleibman.github.io/SlickGrid/examples/example-grouping
This offers very similar behaviour, but the exact 'cell-merging' behaviour you show is not currently available in SlickGrid. Slickgrid tends to use tree structures rather than a flat structure. That said, it may not be too hard to hack up, but it seems everyone wants a different visual layout and it becomes very hard to support them all.
If you don't need editing or scrolling, I'd suggest this would work best as an HTML table, or even a PDF.

Dojo Datagrid Sorting Mask

I'm currently working with a dojo datagrid that works perfectly well except for one small problem. Due to a large number of fields that must be accounted for, clicking on a column to sort the contents of the grid by the value within that column can be rather time consuming (several seconds). Is there any way to display to my users that the content of the grid is "loading"/"sorting"/etc during this downtime? I've looked around the web but only found loading masks and no sorting masks. As far as I can tell there are no built-in methods for detecting sorting or changes in sorting.
Thanks in advance.
This Post handles the onHeaderCellClick event which would catch the onClick in the header.
Declarative dojox.grid.datagrid's header has onclick event?
Theres a fiddle in the Post, which disrcibes it very well.
You can use it to make a loadingimage visible and hide it again, when sortig ends.
Regards, Miriam

Categories