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);
}
Related
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();
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)
I am using c1truedbgrid. I have columns added in the grid with one column having button which is displayed is every row. I need to disable the button in a particular row depending on some business logic. How this can be done?
I am not sure why there aren't any answer.
Its fairly simple. Lets say I want to disable the buttons from those rows where ID is even.
for(int i = 0; i< c1truedbgridobject.Splits[0].Rows.Count; i++)
{
if(Convert.ToInt32(c1truedbgridobject[i,1].ToString())%2 == 0)
{
//Disable here
}
}
However the disable part is dependent on how you are adding button to a cell. Since add button is referenced to whole column and not to a particular cell.
Anyhow using a OwnerDrawCell is also an option.
EDIT:
This seems as a limitation of C1TrueDBGrid. You may use C1FlexGrid as an alternative.
You need to make property of that column as "locked=True" as Below example when you initializing grid.
C1TrueDbGridName.Splits(0).DisplayColumns("YourColumnNameHavingButton").Locked = True
it will make your row not to be editable
I have two edit boxes in an XPage and one label.
Leave Start Date : EDIT BOX
Leave End Date : EDIT Box
Holidays Taken : label
I want to calulate the diffence in dates and get it computed in the label using the following code in onChange event of second(Leave End Date) edit box but on chaging the value of the edit box it clears the two field and nothing gets computed:
var leaveStartDate = document1.getValue("fld_Leave_Start_Date1");
var leaveEndDate = document1.getValue("fld_Leave_End_Date1");
var difference = null;
try{
var nDateStart = session.createDateTime( leaveStartDate );
var nDateEnd = session.createDateTime( leaveEndDate );
difference = nDateEnd.timeDifference(nDateStart);
difference = (Math.floor(difference/86400)) + 1;
}catch(e)
{
return e
}
document1.setValue("fld_NoOfDays",difference);
I tried getComponent("fld_Leave_Start_Date1").getSubmittedValue(), but didn't work either.
Can someone please help.
Thanks a lot in advance!
If the edit boxes are getting cleared, it sounds like you've set the event to do a full refresh instead of a partial refresh.
The other possible cause of clearing fields is if you're using Partial Execution Mode (execMode="Partial" in the source pane for the eventHandler) but have specified a execId that does not include the two edit boxes. (Partial Execution by default runs on the current component, so you should not lose the values of that Edit Box.) But I don't think that's the case.
I'm trying to set the assigned value to a YUI Menu Button in order to use values from previous operations.
Something like remembering previous choices.
For label I already know that I can change it with:
button.set("label", "my label")
unfortunatelly I cannot change the value using: button.set("value", "my value")
Any ideia on how can I do this?
Other way would be to force a selection, but I have no ideia on how to do that.
Thanks
just found out that you can use:
var menu = button.getMenu();
var item = menu.getItem(index);
button.set("selectedMenuItem", item);
all that is left for me now is finding the needed index