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
Related
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([]);
I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.
I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.
I added this code to the parent panel:
var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();
just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.
I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.
I would use the new cellkeydown event for grid panels.
Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.
You can find out if it was a TAB key from the 7th argument passed by this event.
You can find out if it is the last cell in the grid from the 3rd argument passed by the event.
The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.
Event handlers can be added to components using the on method by the way.
You can also look up the functions that need to be called to start cell editing in the API here.
If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.
I have a very big table filled with data
1st - i want to use show/hide columns:
the problem is when my columns pass 10-12 to more it got really slow
for this i gave each a class for the column it is in and call it
for toggle with assocciated anchor().
2nd & 3rd - i want to use fixed headers as my row go way more than 1000's,
as i do this i can not effectively use my search which i wrote it with js
and really is a lightweight code.
PS. plz remember i have a very large json generated table with more than 20 columns and way more than 1000's of rows and i ** CANT USE ANY FRAME WORKS EXCEPT JQUERY AND JQUERYUI **
EDIT: ADDS SOME CODE FOR SHOW/HIDE
$('#columnSelect').on('click', 'li', function(){
var columnTmp = $(this).children('a').text()
$('#dataTable').find('.'+columnTmp).toggle()
})
i have a list of my tags which is also created dynamically with my first ajax call
i got the text of anchor and match it with
then toggle that column tds
I use a combination of two plugins for some of my "large tables"
This is used to format the table, provides sorting and other functionality:
http://www.tablefixedheader.com/fullpagedemo/
And, this provides filtering, this is fast and very effective, it may well help if you have a lot of columns/data. Have a search box or drop down discretely at the top of each column which will allow for filtering on that column and a "quick find" type search box which will search/filter across all columns
http://www.picnet.com.au/picnet-table-filter.html
If you are really jQuery lover then I suggest to go with some free jQuery Grid APIs such as Slick Grid or Flexi Grid
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 have an application (using SlickGrid) where I need to get the column name or id at any time when user clicks on a cell (this pulls up a menu specific to the data in that column/cell). Grid works fine initially but if the column is moved (drag/drop), the column name/id does not follow the drop but remains mapped to it's initial column position.
Has anyone else seen this and, if so, how did you fix it?
Thanks
Are you trying to reuse the list of columns defined in your html code? You should get the list of columns from the grid instead. The following code should do what you are expecting (i.e. printout the name of the column in which you clicked a cell):
grid.onClick.subscribe(function(e,args) {
var allColumns=grid.getColumns();
console.log(allColumns[args.cell].name);
});
You can add that code in one of the examples provided with the source code (say "example3-editing.html"), drag-drop some columns around and check the console after clicking on a cell.