Can I select multiple ranges in an Ace editor? I don't want to use markers in this case, I want to set more than one selection in the editor. I have this code:
selectedCodeBlocks.forEach(selectedCodeBlock => {
const aceRange = new AceRange(selectedCodeBlock.startRow, selectedCodeBlock.startColumn, selectedCodeBlock.endRow, selectedCodeBlock.endColumn);
this.aceEditor.getSelection().setSelectionRange(aceRange, false);
});
but it only seems to select the last one. Can I select all of them?
It appears this does the trick for selecting multiple ranges:
this.aceEditor.getSelection().addRange(aceRange);
Related
I have a grid with several columns, most of which have values selectable from a given set. (i.e. they are shown as dropdown boxes when inserting/updating.) I want to enable filtering, but not necessarily on all columns at once. So I tried adding an empty option for each column, but this means it also shows up in the dropdown for insert/update, which is not what I want.
So how should I solve this? Do I need to override one or more of the row renderer functions?
You can redefine filterTemplate of the column like the following:
filterTemplate: function() {
var $select = jsGrid.fields.select.prototype.filterTemplate.call(this);
$select.prepend($("<option>").prop("value", "0").text("(All)"));
return $select;
}
Here is the working fiddle http://jsfiddle.net/tabalinas/g68ofLs1/
Let's say I currently have this selection:
te[st<p>test1</p>te]st2
The [] represents the selection.
I would like to expand out the selection to include all <a> elements and remove all the <a> elements.
I tried expanding out using the startContainer and endContainer:
var selection = editor.getSelection();
var range = selection.getRanges()[0];
range.setStartBefore(range.startContainer.getParent());
range.setEndAfter(range.endContainer.getParent());
var style = new CKEDITOR.style( { element: 'a', type: CKEDITOR.STYLE_INLINE, alwaysRemoveElement: 1 } );
editor.removeStyle( style );
But this only removed the stuff in the selection and did not expand the selection.
How can I expand the selection so that it includes whole elements if they are partially selected.
These lines:
range.setStartBefore(range.startContainer.getParent());
range.setEndAfter(range.endContainer.getParent());
Will only change the range object's properties. And range does not mean selection, it's only a logical representation of delimited piece of content. Read more in the CKEDITOR.dom.range documentation.
The editor.removeStyle() method works on a real selection though and therefore the above range modification did not affect the result. So you either need to select that range using range.select() and then use editor.removeStyle() or you can use style.removeFromRange().
I'm having a inline editable div. I can type, delete, add. Works great. I wanted the text within he div to be selected on focus (or if you click it). So I added the following to the code
var editor = CKEDITOR.instances.div#{attr};
var element = editor.document.getById('div#{attr}');
editor.getSelection().selectElement( element );
This works too. Fully selected on focus. However, if I press the delete key or any other character key to overwrite the programmatically selected text, it doesn't change. It's as if more than only the text is selected, and the browser doesn't let me delete it. If I select the text manually, it works.
The selection#selectElement method will start selection before passed element and end after it. This means that not only editable's content will be selected but also non-editable parts of contents outside it and therefore selection may not be editable.
This is a correct solution:
var editor = CKEDITOR.instances.editable,
el = CKEDITOR.document.getById( 'editable' ),
range = editor.createRange();
editor.focus();
range.selectNodeContents( el );
range.select();
But the easiest solution is to use selectAll command defined in selectall plugin:
editor.execCommand( 'selectAll' );
I wanted to identify which Slick editor is being used in the current selected Column. Is there anyway to do this?
Ok, I got.
We can use activeCell with columns to get the current select column. Then from the column.editor attribute, we cloud compare what is the editor currently select cell possess.
var column = columns[activeCell];
if(column.editor && column.editor === Slick.Editors.Text)
{
// Code with identification.
}
Is it possible to render a Grid with one row selected as default (set the right page number and highlight the row)?
For highlighting, try using the "OnRowDataBound" event
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
with something like
function onRowDataBound(e) {
var myId = $('#MyId').val();
if (e.dataItem.Id == myId)
e.row.className = 't-state-selected';
}
I'm still trying to figure out how to set the correct initial page number. This bloke might be on to something.
Use the Grid RowAction method, eg:
.RowAction(row => row.Selected = row.DataItem.CustomerCode.Equals(ViewBag.ID))
It is perhaps possible if you iterate in the grid source, locate the row which has to be selected in it, than use a formula to detect on which page will be displayed, and finally change the page index on initial load and select it.