Use case:
I have a table that users enter order lines into. The table is a list of products, they can page up and down in the table. If they've entered a quantity into one product and then page down they need to be focused on the input field in the same column they started from, but at the new row, the page down has moved to.
Problem:
The page down changes the hover location. So I can get which row has the hover state and change focus to the correct column in that row. I need code to execute after the page down has completed and a new row has: hover.
But because page down is async, getting the row with the hover state in my event handler returns the current row, not the one that will have: hover when the page down completes. How do I write a page down event handler so that code is executed after the page down has completed?
Attaching a promise to the table with code that executes after the 'keydown' type event is complete doesn't work. It runs before the new row has: hover state.
You can use document.activeElement to get the element that has focus, get the column from that and set the focus using $(columnSelector).focus() to newly populated records column.
Another way is to have focus event handler and maintain the last focused column name in a variable.
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 want to add some custom functionality on data table next and previous button. I can access click event using
$('#table').on('page.dt', function(){
// custom code
});
but here, I can not identify whether next was clicked or previous. Is there any way to identify this in page.dt? I don't want it in callback of data table
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 page that has two drop down lists. When the first dropdown list's value is changed, some function is triggered that updates the values of the second list depending on what is selected in the first list.
Is there some tool similar to FireBug, for example, that would tell me what function is being triggered by the updating of the drop down list? There is no "onChange" parameter in the Select element.
If I change the selected item manually by clicking on the element, this function is being triggered. But if I change the selected item programmatically using something such as:
MyElement.SetAttribute("SelectedIndex", 10)
the function to update the other field is not being fired. How can I find which function should be fired and how will I trigger it?
I am using VB.Net and loading/manipulating the page in a web browser control.
Not sure if it makes a difference, but the dropdown elemet has some attributes that I am not familiar with, such as "ng-model" and "ng-change".
I have a jqGrid which has a column called "Actions". In this column, each row has a number of buttons which are supposed to perform various functions on the data in that row.
Unfortunately, the only grid parameter I've found that remotely matches what I want to do is selrow. This gets the selected row. But if the user clicks one of the action buttons, this doesn't necessarily mean that row is "selected" (i.e., the user has clicked on it previously).
Is there a way I can get the row of the button the user presses? Or does it not make sense to have buttons inside of the jqGrid to begin with?
If you would use for example onCellSelect to detect which button is clicked you will have directly the rowid of the button which is clicked. The answer will get you more details about the implementation.
If you would prefer to implement custom click event handler you can just find the closest <tr> element. It's id is the rowid of the clicked button. So you can use something like $(e.target).closest("tr.jqgrow").attr("id") where e is the event of the click handler.