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?
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.
Dear StackOverflow Users
I am currently working on a data analysis web app.
Now in this app you can drag and drop graphs and you can remove it by unselecting it. Also you can add the graph with a plus button. Only problem is there is no way to unselect it when you add it by that plus button(Which I put the code of ""$("#tb_add").button"" )
What I am trying to do is find a way to write a function button that would undo what the add graph button did, or close it or delete it, since there is no unselect button.
My question is: "Is there such a javascript function that would undo or remove what the $("#tb_add").button did.
so let's say I want to add a button called $("#tb_remove").button
is there any simple javascript that would simply undo what was added ?
If there is what is it called ? can you direct me to it ?
Thank you
In your click handler you could add a way to remove the section. jQuery has a .remove() function. You could use classes to control it as well.
if($(this).hasClass("added")){
$(this).removeClass("added");
$("panel selector").remove();
$(this).addClass("removed");
} else {
analysis.addPanel();
$(this).removeClass("removed");
$(this).addClass("added");
}
something along those lines should help you.
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.
Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}
Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);
Im looking for a way to render an html table as an editable datgrid, with the ability to clone individual rows. I dont need to save any of the changes made, just superficially edit the cells because i then use a jquery plugin to scrape the table as is on screen and save it.
Ive tried jeditable, but its designed for posting the output of its edits to a page, not just superficially making the changes.
Ideally, i could control what types of inputs are displayed onclick based on what column they are on. The table cells are unnamed. If they need to be named, there are a total of 34 columns, so i would need to know how to name those individually.
Thanks in advance.
Jeditable's target can be a function (see the "Submitting to function instead of URL" section of the jeditable homepage) - you could pass an empty handler and use it.
[Edit]
The handler should return a string (that will be displayed on the page)
(taken from the example page)
$('#test').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
It work nicely, I just tried it out.
[/Edit]