I have an editor grid that is populated using XML static data. Using the TAB key, I need to be able to navigate between the sections of content, until finally arriving to the inside of the editor grid. This part works fine.
However, the default behavior demands that the use hit the Enter key to begin editing the field. Is there any way to enable editing on the custom editor (TextField) when the user TAB's into a cell? The grid's config already has clicksToEdit set to 1.
I have attempted to set up a cellSelectionModel with a listener on the selectionchanged event. This code fails when using the mouse as well.
this.cm = new Ext.grid.CellSelectionModel({
listeners: {
selectionchanged : function(foo, selected) {
//using the selected.cell[] I can get the cell row and col
//This next line blows up
foo.grid.startEditing(selected.cell[0], selected.cell[1]);
//I want to be able to edit the cell when the user clicks or TAB's into the cell.
}
}
})
Does anyone have any ideas on how to approach enabling the custom editor when tabbing into th field with the keyboard?
Related
I am using Tabulator to implement an editable table and I encountered an issue.
The user can either manually edit cells one by one (through a dropdown) or select multiple cells and click a button to set them all to the same value.
Then, when the user is done editing, a save button is available and sends everything back to the server.
The save button only saves edited cells (accessed by table.getEditedCells()).
My issue is that cells edited through a button (to set a common value for multiple cells) are not marked as edited, thus are not present in the table.getEditedCells() list.
Is there a function to force a cell to be marked as edited ?
Or would you have suggestions on how I should change the save button behavior ?
Some code
At first, the buttons updated the cell values through
row.update({column:value}); but this didn't trigger the cellEdited callback.
I now use :
var cell = row.getCell("field");
cell.setValue(value);
fixEditedCells.push(cell);
cell.setValue triggers cellEdited callback (the change can now be undone with history table.undo() ; that wasn't the case when I used update)
My temporary fix is to store the cells modified through the button in an array (fixEditedCells) and then merge it with the .getEditedCells() when saving...
Thank you for your help !
Cells only get flagged as edited by user interaction not by use of the 'setValue' function. This is by design to allow developers to update the table without it being registered as an edit by the user.
I think to have an issue with W2UI's grid. I have the "cell" selection type and I see that the whole column is selected if you click on a cell with the mouse right button.
Specifically it happens when you have no cell selected or you click on a cell in another column than the selected cell's one. To test the described behaviour, you can use any of the available demos on jsFiddle, setting selectType: 'cell' in grid options.
It's a strange behaviour in my opinion and I would like to know how to change it. Is it possible?
Option 1
The easiest way to work around this, is to set the grid context menu to an empty function:
grid.contextMenu = function() {};
or in the constructor:
$('#grid').w2grid({
name: 'grid',
contextMenu: function() {}
});
This will however then show the browser's default context menu on right click.
Option 2
If you do not want the browser's context menu to show up, instead of an empty function, implement a function that executes event.preventDefault():
grid.contextMenu = function(recid, column, event) { event.preventDefault(); return false; }
Here's a fiddle based on the Spreadsheet Like Grid Demo
Option 3
If you need the w2ui default context handling, and only want to get rid of the column selection, I'm afraid you'll have to modify the source and remove the following line in the contextMenu function:
if (!selected && column != null) obj.columnClick(this.columns[column].field, event);
or copy the whole original code (sans the mentioned line) for your own implementation of your grid's contextMenu function.
I am trying to modify the handsontable doubleclick event to have additional functionality. My current code is as follows:
hot.view.wt.update('onCellDblClick', function (row,cell) {
console.log("sucess");
});
This will sucessfully fire when a cell is double clicked on. However, it removes the current editing functionality of the cell.
Is there any way to update the on cell double click event whilst maintaining its current functionality?
Alright I ended up figuring this one out myself. So I thought I'd post the answer in the chance it helps anyone in the future.
hot.view.wt.update('onCellDblClick', function (row,cell) {
//Get editor and begin edit mode on current cell (maintain current double click functionality)
var activeEditor = hot.getActiveEditor();
activeEditor.beginEditing();
//Do whatever you want...
});
Thanks to the answer in the following post for defining how to manipulate the editor.
When using Handsontable how to force a selected cell into edit mode?
I have a Custom Command button in a Kendo Grid, however its functionality is linked to the row itself. Is there any way to only show the custom command button AFTER an insert?
The grid is currently in inline edit mode, so when you click insert the custom command is shown all the time, and clicking on it produces an error since the data does not yet exist (the user hasn't clicked the update button)
See image for example :-
I'm trying to have the Edit Teams, Export and Set Active button only visible after the data has been entered into the DB (ie after the update button is clicked).
You can handle onEdit event and disable the custom command button using jquery code.
please post your code in order to get it working.
I've found a way to do this using CSS only - Kendo applies the k-grid-edit-row class to any grid row thats in the editable state, Using that I can do :-
/* Hide the buttons on an edit row */
.k-grid-edit-row .k-grid-EditTeams,
.k-grid-edit-row .k-grid-Export,
.k-grid-edit-row .k-grid-SetActive {
visibility: hidden;
}
Where k-grid-EditTeams, Export and SetActive are my button classes.
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.