I have a Tabulator (4.9.3) with values that use an editor of type text. As I tab through the table, I want each value to be selected so I can overwrite it without having to clear it first. I have tried putting the usual range selection code into the cellEditing callback and the Tabulator source code where the input gets created. Here is one variation of the code (I can't show them all because the node differs based on context):
try {
if (document.selection) {
// IE
var range = document.body.createTextRange();
range.moveToElementText(input);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(input);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
} catch (e) {console.log(e);}
If I double-click on the cell, the value selects as desired. How can I get this to work with keyboard navigation as well?
Since the editor is not assigned an id, finding a selector that could find it reliably was problematic without editing the source code. Since I was going to have to edit the source, I ended up adding the following line to the onRendered function of the input element under Edit.prototype.editors.
input.select();
Related
In Tabulator - when using the history module and - the function undo(): It seems that the cell flag isEdited() doesn't get cleared when the undo undoes a cell edit.
I want to mark all edited cells in a table through CSS, but after I did an undo() on the table I noticed that the edit markings were not removed - even though the cells got "undone" as they should.
To mark edited cells, I use a function that look like this:
const setEditedCellsVisibility = () => {
document.querySelectorAll(".tabulator-cell").forEach( element => {
element.classList.remove('edited');
})
//(The "Table" is set up elsewhere, but is a normal tabulator table)
Table.getEditedCells().forEach( cell => {
cell.getElement().classList.add('edited')
})
}
Do I need to "manually" clear the flag for cell.isEdited() after each Table.undo() call?
One more question. If I create a image-popup dialog, I find it only works when the frontimage (the top one in the image list). If other image is selected, the program will report "the image used in the expression does not exist". I can not understand the logic behind this error.
The following is a modified code pasted in the answer of the previous question. It can work well if the first image is selected, but the error message appears if the second image is selected.
I use GSM 2.30.xxxx
Class CMyDLG : UIframe
{
TagGroup DLG,DLGItems,imgPop
object Init(object self)
{
DLG = DLGCreateDialog("Test",DLGItems)
imgPop = DLGCreateImagePopup()
DLGItems.DLGAddElement( imgPop )
return self.super.init(DLG)
}
image GetSelectedImage( object self )
{
string selectedImageLabel
imgPop.DLGGetValue(selectedImageLabel) //DLGGetValue can return the label of the image diretly
Result("\n" + selectedImageLabel)
// From the string, get the label
//string label = selectedImageLabel.left( selectedImageLabel.find(":") )
//Result("\n" + label)
// From label, return image
//return FindImageByLabel(label)
return FindImageByLabel(selectedImageLabel)
}
}
// main
{
object dlg = Alloc(CMyDLG).Init()
dlg.Pose()
image selected = dlg.GetSelectedImage()
if ( selected.ImageIsValid() )
{
selected.SetName( "Selected" + random())
selected.ShowImage()
}
else Throw( "Error, nothing selected." )
}
Using the test code on GMS 3.3 it works except for the bug mentioned. I presume it's the same for GMS 2.3 but I haven't verified.
To make sure we test the same thing, here are exact instructions and a break-down:
Start out with two images A and B and A being front-most.
Run script
Don't change anything in the dialog
Press OK
ERROR
The dialog - taggroup does not (yet) hold any value. It possibly should, I consider this a bug.
Start out with two images A and B and A being front-most.
Run script
Click the selection box and select "A" from the drop-down
Press OK
A is correctly selected
Start out with two images A and B and A being front-most.
Run script
Click the selection box and select "B" from the drop-down
Press OK
ERROR
The dialog - taggroup does not (yet) hold any value. It definitly should, I consider this a bug. It is most likely what you were describing?
Start out with two images A and B and A being front-most.
Run script
Click the selection box and select "A" from the drop-down
Click the selection box and select "B" from the drop-down
Press OK
B is correctly selected
To summarize:
Yes, there is a bug and nothing wrong with your script.
The selection box only works after selecting an items for the second time.
The example code (first script) in this answer seems to work on any of the open images when selected.
However, there is the (mentioned) bug that it does not work on first selection, only when you select one image and then another.
If your code fails, please provided a slimmed-down code-example of the failing code so that a mistake can possibly be spotted.
I want to create a textarea where users can select a part of a text, and I will react according to their selection. So I need to
1) get the start and end positions of the selection text
2) get the position of the focus, if it is in the textarea and there is no selection
It seems that the functions to do so are different from an explorer to another. So could anyone tell me what is the approach to do that in Office Add-in?
I have tried the following 2 ways (ie, select a part of the text in myTextarea, click on button, and then debug the code), they don't seem to be the right functions.
(function() {
"use strict";
Office.initialize = function(reason) {
$(document).ready(function() {
app.initialize();
$('#button').click(showSelection);
});
};
function showSelection() {
// way 1
console.log(document.selection); // undefined
document.getElementById("myTextarea").focus();
var sel = document.selection.createRange(); // Uncaught TypeError: Cannot read property 'createRange' of undefined
selectedText = sel.text;
// way 2
console.log(document.getElementById("myTextarea").selectionstart); // undefined
console.log(document.getElementById("myTextarea").selectionend); // undefined
}
})();
Additionally, it would be great if one could also tell me how to realise the follows by code:
1) select a part of a text, from a start and end positions
2) set the focus at a certain position of the textarea
Edit 1:
I just tried window.getSelection() within my Excel add-in:
function showselection() {
var a = window.getSelection();
var b = window.getSelection().toString();
var c = window.getSelection().getRangeAt(0);
}
After selecting a text in the textarea, and clicking on button, I debugged step by step: the first line made a a = Selection {anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, is ...; the second line returned "", the third line got an error Home.js:19 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. It looks like the selection has not been successfully caught...
Here is JSBin without Excel add-in frame, which returns almost same results as above.
Use JQuery.
For instance, the following two lines get the caret position:
function showselection() {
console.log($('#myTextarea')[0].selectionStart);
console.log($('#myTextarea')[0].selectionEnd);
}
There are some plug-ins:
https://github.com/localhost/jquery-fieldselection
http://madapaja.github.io/jquery.selection/
The second one has several short samples with buttons (where we may lose selection). You could either use their API, or look into their code to see which JQuery functions they call.
If the desired selection is just the selected text in the HTML page (and not the user's selection in Excel/Word), then there are some good stackoverflow answers about accessing that selection.
One of the key features of the JavaScript APIs for Office is that they follow an asynchronous model (the code you've written above for showSelection() appears to be synchronous). I'd recommend reading the Excel and Word JS API overview pages to get a feel for how they work. As an example, here's how you'd get the text from a selection:
Word.run(function (context) {
var myRange = context.document.getSelection();
context.load(myRange, 'text');
return context.sync().then(function () {
log("Selection contents: " + myRange.text);
});
})
Then for the other specifics of your question please clarify as requested in my comment. Thanks!
-Michael (PM for Office add-ins)
My question is exactly opposite of this question. So what I'm trying is I'm trying to find a way to lose focus on a cell after user selects an item from the autocomplete combobox in that cell.
$input.autocomplete({
delay: 0,
minLength: 0,
source: args.column.options,
select: function (event, ui) {
$input.val(ui.item.label);
grid.getEditController().commitCurrentEdit();
return false;
}
});
I used this code to lose focus indirectly after finishing with editing. It works fine, however, the cell stays selected somehow.
grid.getEditController().commitCurrentEdit();
I also tried the code below to lose focus but it throws error everytime when I run the code.
grid.setActiveCell();
grid.setSelectedRows(-1);
After selecting an item from the autocomplete combobox, I want the grid to lose focus and select nothing on the viewport of the grid.
Thanks for your answers in advance.
Try calling grid.resetActiveCell().
There was a commit made to the master branch last week that might address your issue: Fix keyboard focus getting trapped when cell has tabbable elements.
You can achieve it as follows,
if (grid.getActiveCell()) {
var row = grid.getActiveCell().row;
var cell = grid.getActiveCell().cell;
grid.gotoCell(row, cell, false);
}
I was wondering if it was possible to replace one control in a TableLayoutPanel with another at runtime. I have a combo box and a button which are dynamically added to the TableLayoutPanel at runtime, and when the user selects an item in the combo box and hits the button, I'd like to replace the combobox with a label containing the text of the selected combo box item.
Basically, if I could simply remove the control and insert another at it's index, that would work for me. However I don't see an option like "splice" or "insert" on the Controls collection of the TableLayoutPanel, and I was wondering if there was a simple way to insert a control at a specific index. Thanks in advance.
Fixed this by populating a panel with the two controls I wanted to swap and putting that into the TableLayoutPanel. Then I set their visibility according to which I wanted to see at what time.
This is what I've been able to come up with for what I needed. It gets the position of the ComboBox and makes a new label using the selected value.
// Replaces a drop down menu with a label of the same value
private void lockDropMenu(ComboBox dropControl)
{
TableLayoutPanelCellPosition pos = myTable.GetCellPosition(dropControl);
Label lblValue = new Label();
myTable.Controls.Remove(dropControl);
if (dropControl.SelectedItem != null)
{
lblValue.Text = dropControl.SelectedItem.ToString();
lblValue.Font = lblValue.Font = dropControl.Font;
// Just my preferred formatting
lblValue.AutoSize = true;
lblValue.Dock = System.Windows.Forms.DockStyle.Fill;
lblValue.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
myTable.Controls.Add(lblValue, pos.Column, pos.Row);
}
}