I'm creating an extjs grid panel which has a user configurable set of columns. The Ext.grid.Panel component provides a handy reconfigure(store, columns) method for exactly this purpose.
This method works as expected to reconfigure a grid's store/columns without having to completely destroy and recreate the grid. However, if you are using the Ext.grid.plugins.RowEditing plugin to provide inline row editing, the columns get out of sync after the grid has been reconfigured with new columns.
This is particularly frustrating as the RowEditing plugin already watches for add/removing/resizing columns and handles those correctly. I suspect this is just an oversight in the current 4.1 release of ExtJs.
What I want is for the RowEditor to update its editors list and widths when the grid is reconfigured with new columns without destroying/recreating the grid/view.
After much googling it appears I am not alone in the search for an easily re-configurable column list with inline editing support.
The Ext.grid.Panel provides a 'reconfigure' event that is fired after any time the reconfigure() method is called. However, in the current 4.1 release of ExtJs the RowEditing plugin does not hook into this event!
It seems we need to do our own heavy lifting. The final solution is rather simple, although it took several hours to arrive at the final code.
The RowEditing plugin creates an instance of the RowEditor component (got it? keep those two seperate in your mind, similar names but different components!). The RowEditing plugin is what ties into the grid hooking into the necessary events to know when to show the row editor, etc.. The RowEditor is the visual component that popups over your row for inline editing in the grid.
At first I tried re-configuring the row editor probably a dozen different ways. I tried calling internal methods, init methods, resize methods, etc... Then I noticed something nice about the architecture. There is a single internal reference to the RowEditor instance with a method to fetch the row editor and lazy load if required. That was the key!
You can destroy the RowEditor without destroying the RowEditing plugin (you can't dynamically load/unload plugins) and then recreate the RowEditor.
There is one more catch, which is that the Editing plugins for the Ext grid add some extension methods to each column for getEditor() and setEditor() which are used to get/set the correct editor type for each column. When you reconfigure the grid, any applied extension methods are 'gone' (well you have some new columns that never had those methods applied). So you also need to re-apply those accessor methods by calling the initFieldAccessors() method on the plugin.
Here is my handler for the grid panel's reconfigure event:
/**
* #event reconfigure
* Fires after a reconfigure.
* #param {Ext.grid.Panel} this
* #param {Ext.data.Store} store The store that was passed to the {#link #method-reconfigure} method
* #param {Object[]} columns The column configs that were passed to the {#link #method-reconfigure} method
*/
onReconfigure: function (grid, store, columnConfigs) {
var columns = grid.headerCt.getGridColumns(),
rowEditingPlugin = grid.getPlugin('rowEditor');
//
// Re-attached the 'getField' and 'setField' extension methods to each column
//
rowEditingPlugin.initFieldAccessors(columns);
//
// Re-create the actual editor (the UI component within the 'RowEditing' plugin itself)
//
// 1. Destroy and make sure we aren't holding a reference to it.
//
Ext.destroy(rowEditingPlugin.editor);
rowEditingPlugin.editor = null;
//
// 2. This method has some lazy load logic built into it and will initialize a new row editor.
//
rowEditingPlugin.getEditor();
}
I attached this in my grid panel using a config listener:
listeners: {
'reconfigure': Ext.bind(this.onReconfigure, this)
}
It appears that this problem has since been corrected in the latest ExtJS versions - Version 4.1.1a at least integrates functionality similar to Ben Swayne's implementation.
Related
I have two separate tabs (Tab A & Tab B). These two tabs share a single store wherein each are in their respective indices. [0] - A , and [1] - B.
My controller initializes the load upon click on its menu leaf such as:
oMe.control({
'#role-permission-grid-panel': {
edit: oMe.save,
beforerender: oMe.loadData,
},
'#roles-applicationtype button': {
click: oMe.filterByApplication
}
});
applicationtype button is the filter where tab switching of loaded data happens.
When trying to catch the value of the current filter, the controller successfully shows which one was clicked. However, this no longer refreshes the grid panel data.
SampleGridPanel /view:
console.log('Application',oController.sDefaultToggle);
Simply put, I update the data from SampleController, and try to catch it from my SampleGridPanel by calling filterApplication. My SampleGridPanel only loads the store once due to initComponent. I want to pass the updated data (in this case the selected tab) from the controller to the view. How do I notify my view that this change occurred when it only identifies data on initial load?
I'm also a bit confused. On my controller, when calling oMe.loadData beforerender, it knows the last tabbed value, but when I call oMe.loadData from a custom filter function, it no longer reloads the entire store. It only loads the filtered information based on the filter value.
You could listen to the activate and deactivate events of the tabpanel. These are also available in older versions of ExtJS.
If you are using ExtJS 6, you should really consider using ChainedStore.
A Store contains the data.
The grids aren't bound to the store, but to a ChainedStore each.
The ChainedStores have their source set to the store, and use different filter to only get the data that should be shown in their respective grid.
Please note that as of ExtJS 6.0.1 there were bugs in ExtJS that exhibited when combining ChainedStore with GroupingFeature or CellEditing. These should be fixed in ExtJS 6.0.2.
I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.
I'm trying to reload a jqGrid with new rows, colNames and colModel. The row data seems to load fine but the columns don't seem to be refreshed. I've tried using GridUnload and GridDestroy but I end up losing the jQuery DOM instance entirely and no longer loads any data as well.
var grid = $('#my-grid');
if(grid[0].grid == undefined) {
grid.jqGrid(options);
} else {
grid.setGridParam(options);
grid.trigger('reloadGrid');
}
The grid instance is important because it will be passed to other objects as a param. These objects may attach listeners or trigger events.
I'm using version 4.4.2
reloadGrid reload only the body of the grid and not changes the column headers which will be created when the grid was created.
If you need to change number of columns or to use colNames and colModel on place of old grid you have or recreate grid. You can use GridUnload method first and then create new grid (call grid.jqGrid(data) in your case). It's important that if you cached jQuery selector to grid in a variable like grid in your code you have to assign grid one more time after call of GridUnload, so you should do something like grid = $("#grid"); directly after call of GridUnload.
See the answer for more details and the code example.
It seems that jqGrid removes the initial <table></table> from the DOM and replaces it or forgets the reference (I haven't looked that hard into it).
So you have to reselect the new table everytime you want to create a new grid ie. $('table#my-grid'). This makes it tricky if you want to pass a reference of the grid's table about to other parts of your app as a parameter.
My work around involves deleting the grid reference and replacing the grid's wrapped div with the original table. then creating a jqGrid in the normal way with the new colModel and colNames.
grid.empty();
delete grid[0].grid;
$('#gbox_my-grid').replaceWith(grid);
grid.jqGrid(options);
It isn't the tidiest of solutions but it does allow me to keep a permanent reference to the original <table>. I'm uncertain how other jqGrid plugins will be affect by this though.
Edit
it turns out jQuery DataTables is better suited for customisation and we have adopted this instead of using jqGrid.
I have combined both answers and made some modification in order to have it to work.
var grid = $('#tableID');
if(grid[0].grid == undefined) {
grid.jqGrid(options);
} else {
delete grid;
$('#tableID').GridUnload('#tableID');
$('#tableID').jqGrid(options);
}
I am trying to understand some slightly odd behavior I am seeing in a page I am making using KnockoutJS. An observable array seems to get duplicate items every time I clear and reapply bindings. The quickest way to understand the problem is to look at this JSFiddle demo. Just click any edit button several times, and watch this list grow!
The heart of the code for this demo is in the following method:
var _bindItemDetail = function (jsonData) {
//clear existing bindings
ko.cleanNode($("#itemdetails").get(0));
// observables in selected item.
_viewModel.SelectedItem(ko.mapping.fromJS(jsonData));
// Apply Bindings
ko.applyBindings(_viewModel.SelectedItem, $("#itemdetails").get(0));
};
The essence of what I am trying to achieve is to create a list and details page in one. The list JSON is fetch on initial page load, and the detail JSON is fetched and bound to the "detail" html whenever an edit link is clicked.
In addition to solving the problem, I am trying to understand the behavior, and learn some lessons about how to clean up stale resources properly when using knockout.
Thanks for any help
The problem is that in your _bindItemDetail function, you are reapplying the bindings on your modified view where you already had replicated the elements.
var _bindItemDetail = function (jsonData) {
//clear existing bindings
ko.cleanNode($("#itemdetails").get(0));
// observables in selected item.
_viewModel.SelectedItem(ko.mapping.fromJS(jsonData));
// Apply Bindings
ko.applyBindings(_viewModel.SelectedItem, $("#itemdetails").get(0));
};
ko.cleanNode() merely removes bindings from the elements, it doesn't revert the view back to its initial state. In general, you should only ever call ko.applyBindings on a set of nodes once. Doing it more than once, is just asking for problems.
Frankly you're not really making good use of knockout. The majority of your code is using jquery to handle all the low-level details. The point of using knockout is to not have to worry about those lower level details.
I've adjusted your fiddle a bit to make better use of knockout with less emphasis on using jquery.
In the view:
Used the click binding to handle your Edit click events.
Used the with binding to conditionally show the editor fields. The stopBindings handler is not needed.
In the view model:
Added the click handler editClicked to the view model.
Removed jquery event bindings.
Removed the ko.cleanNode/ko.applyBindings combo you had when binding items. You shouldn't do that and you just don't need it, knockout will handle all that for you.
Updated fiddle
I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.
You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.
Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.