In SlickGrid you can enable row reordering (drag and drop). See http://mleibman.github.io/SlickGrid/examples/example9-row-reordering.html
My problem is that once I reorder a row (e.g. put row 3 above row 1) I can't sort the entries anymore. If a column is named "date" and I click on that column, nothing happens. On the other hand, if I do not reorder the rows manually and then sort by column, it works.
I don't mind that the "sort by column" will destroy my manual order. I just want to keep the option to sort it by column after the reorder.
Any tips are appreciated.
(I am using SlickGrid because there's a nice fork which features sticky rows/columns. I haven't found this feature elsewhere, so it's my only option)
When the grid is manually reordered the function subscribed to moveRowsPlugin.onMoveRows is executed. This function is calling grid.setData(data) to update the reordered rows onto the grid. Calling grid.setData(data) overrides the DataView and directly sets the data on the grid. Updates made to the DataView (e.g. sorting) are therefore no longer reflected on the grid.
To resolve this change grid.setData(data) to dataView.setItems(data) in the function subscribed to moveRowsPlugin.onMoveRows (line 364 of the inline JavaScript). I'd also recommend clearing the sort fields so the sort indicator is removed.
//Set updated data in DataView
dataView.setItems(data);
//Clear sort columns
grid.setSortColumns([]);
Related
In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha
You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it
values in my grid table can change at any time. I would like to keep it sorted after every value change in a sorted column. Is there any grid or column API I can call in onCellValueChanged event?
Regards
You could try something like
gridOptions.api.setSortModel(gridOptions.api.getSortModel())
but this may be overkill - you can also get the state off the current column sort and apply that accordingly
I am using the DataTables plugin for jQuery and I would like to reorder the columns after the data is loaded. I know I can reorder them upon creating the table.
What I would like to do is to draw the table, load the data from the server and then, based on the response from the server, to reorder the columns.
How can I achieve this?
It is possible to do so by using the DataTables plugin ColReorder. After enabling the plugin the columns can be moved with the fnColReorder(from, to) like this:
var table = jQuery("#table_id").dataTable(settings);
table.fnColReorder(4, 10);//move the 4th column on the 10th position
table.fnAdjustColumnSizing();//a good idea to make sure there will be no displaying issues
But there should be payed some attention when using the column indexes: these are the indexes from within the table's columns array. These means, that the index does not have to match the column's number in the table(some columns can be hidden, according to your specification).
I am trying to find the proper way to dynamically add/remove columns in a GridPanel that uses CellEditing plugin in Ext JS 4.0
I tried to add/remove columns dynamically in a GridPanel, using the HeaderContainer add(), insert(), remove() methods
The problem is that CellEditing plugin stops working correctly when I try to add or remove more than one column:
when existing cell in edit mode the text and cursor is not visible
first newly added column is not editable at all
second added column is editable
Steps to reproduce:
start the page
select cell in the column to insert column position before which to add new column
click add column button and type Name1 in dialog press ok
repeat steps 2-3 Using Name2 as column name
try to edit text in existing Company column and in column Name1 and Name2
You can find the full source code and example here:
http://jsbin.com/otorix/edit#source / http://jsbin.com/otorix/edit#preview
Can you reproduce this behavior?
Can you confirm this as bug?
Or what am I doing wrong?
I will be grateful for any help you can provide
you were right, there was a bug, but apparently it was induced by the way you reconfigured your grid, I added some modifications to your code ( just for the add column) i guess the remove should be fairly easy, so my corrections:
the memory data for the store rangeData was an array , while the reader was expecting an Object with an array inside an items attribute (this didn't seem to cause any errors but it's much clearer this way)
The column reconfigure was the main issue, i removed the part where you create a new column and just write the config for the new column, after that added the new column at the end of your column array, or somewhere in the middle using splice. The reconfigure function on the grid offers the posibility to reconfigure the store and the columns so is safer then adding the newly created column in the header container.
you have the modified code here http://jsbin.com/otorix/17/edit
I'm trying to hack the tablesorter jQuery plugin with no success. What I'm wanting is this...
I have a table (list of sports teams) and a row is set to a specific class. This basically is to show qualificatoin for finals series, so it must always STAY in that place. eg. if someone sorts the table by wins, I still want the 8th row to have the class I gave it at the start with this:
$("table.ladder tr:nth-child(8)").addClass("finals");
As tablesorter is at the moment, when the table is sorted, this TR obviously moves around. What's the best way to make tablesorter KEEP the nth row like this?
Hope this makes sense!!
tableSorter has a under-documented internal function called 'sortEnd' that you can bind to...
$("table.ladder")
.tablesorter()
.bind("sortEnd", function(){
$("table.ladder tr").removeClass("finals");
$("table.ladder tr:nth-child(8)").addClass("finals");
})
I'm assuming you only want to move the class, and not the data. if you have a data row that is always supposed to be at the bottom, you can use the <thead/><tbody/><tfoot/> structure and place that row in <tfoot/>