Develop Reference

Kendo Toolbar event after render

I have a Kendo UI Toolbar:
$("#toolbar").kendoToolBar({
items : [ {
type : "button",
text : "List"
} ]
})
and I have a script in my app that will translate strings according to the chosen language; i.e. it will find the word 'List' and change it to 'Liste'.
The problem is with timing. There is a finite time that the Toolbar takes to render, so calling my translation function inside
$(document).ready(function() { })
Is too early.
The Kendo Toolbar component doesn't have an onRendered event handler. Otherwise I could use that.
Is there any way to define an event that occurs after all Kendo components, including Toolbar have been rendered?

First of all: Ain't there a better way to localize your page?
Besides that: I've created a small JavaScript function which waits until a given list of elements exist. Just call it as shown in the comment in $(document).ready(function() { }).
// E.g. waitUntilKendoWidgetsLoaded({ "toolbar": "kendoToolBar" }, doTranslation);
function waitUntilKendoWidgetsLoaded(widgets, action) {
var allLoaded = true;
for (var key in widgets) {
if (widgets.hasOwnProperty(key)) {
allLoaded = allLoaded && $("#" + key).data(widgets[key]) !== undefined;
}
}
if (allLoaded) {
action();
}
else {
setTimeout(waitUntilKendoWidgetsLoaded, 500, widgets, action);
}
}
But be aware: The only thing you know for sure is that the element exists. It does not ensure that the element has finished loading. Especially with Kendo widgets which use a datasource you should use the existing events to trigger your function at the right moment.

CkEditor - Uncaught TypeError: Cannot read property 'getSelection' of undefined

I am implementing the CKEditor in my app. When I am trying to instantiate CKEditor to the textarea I am getting following error
Cannot read property 'getSelection' of undefined
at below line of ckeditor
getNative: function() {
return void 0 !== this._.cache.nativeSel ? this._.cache.nativeSel : this._.cache.nativeSel = B ? this.document.$.selection : this.document.getWindow().$.getSelection() }
Any help is much appreciated.

I have a list of articles.
every time I clicked on any article a "dialog / modal" should be open.
in such dialog or modal there was a ckeditor element for the content of my article.
when I clicked on the first it worked like a charm.
the problem was after clicking on the 2nd, 3rd, 4th etc.
Then I started to have this error.
TypeError: Cannot read property 'getSelection' of undefined
at CKEDITOR.dom.selection.getNative (ckeditor.js:448)
at new CKEDITOR.dom.selection (ckeditor.js:446)
at a.CKEDITOR.editor.getSelection (ckeditor.js:443)
at new CKEDITOR.plugins.undo.Image (ckeditor.js:1182)
at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1177)
at a.<anonymous> (ckeditor.js:1173)
at a.n (ckeditor.js:10)
at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at a.setData (ckeditor.js:275)
The solution for me was easy, tell the computer to destroy the ckeditor instance when the dialog / modal is closed. easy!..
Now is working like a charm =)
$mdDialog.show({
parent: parentEl,
targetEvent: $event,
templateUrl: '/md-templates/blog-article.html',
controller: DialogController,
scope: $scope,
preserveScope: true,
onRemoving: function (event, removePromise) {
if (CKEDITOR.instances.body) CKEDITOR.instances.body.destroy();
}
});

I got same error, and I solved by initialize CKEditor, in
$(document).function(ready());
$(document).ready(function () {
CKEDITOR.replace('editor1', {
language: 'tr',
height: '300'
});
});
I think when you initialize before page load, it doesn't find dom element(textarea)

This is likely your application is attempting to access and set the data of the CKEditor before the editor is ready. This can be the result of a race condition, causing the error to be intermittent. There are a few things you can do to prevent this issue.
First, the CKEditor endorsed method of testing if the editor is loaded first.
if ( CKEDITOR.status == 'loaded' ) {
// The API can now be fully used.
doSomething();
} else {
// Wait for the full core to be loaded and fire its loading.
CKEDITOR.on( 'load', doSomething );
CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
}
Second, if you are unable to control the timing associated with setting of the editor value, you could wrap the CKEDITOR.dom.window object in an async/await Promise that tests if the editor is loaded first, and if not, listens for the editor to load, and then complete setting the value. (note, this code is not fully tested)
CKEDITOR.dom.window = (function(window) {
if ( CKEDITOR.status == 'loaded' ) {
// The API can now be fully used.
return window;
} else {
return (async function() {
return await function() {
return new Promise(resolve => {
CKEDITOR.on( 'load', () => {
resolve(window);
});
});
};
})();
CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
}
})(CKEDITOR.dom.window);

You can have a try
CKEditor.destroy();

change the function f.$.onload inside ckeditor.js to the below
f.$.onload=function(){var toutMs =5000;
if(CKEDITOR.document.getHead().$.childElementCount > 6)
{
toutMs=0;
}
setTimeout(function(){
A(b,!0)
},toutMs)
}

Load a TinyMCE editor inside a TinyMCE modal in wordpress

I'm using TinyMCE to open a modal. And inside that modal i would want to add an instance of tinyMCE. I'm opening the modal passing some objects. I followed this guide
editor.windowManager.open(
// Properties of the window.
{
title: "TDSK's Dumb Shortcode Creator", // The title of the dialog window.
file: url + '/tinymce-dialog.html', // The HTML file with the dialog contents.
width: 1000, // The width of the dialog
height: 600, // The height of the dialog
inline: 1 // Whether to use modal dialog instead of separate browser window.
},
// Parameters and arguments we want available to the window.
{
editor: editor, // This is a reference to the current editor. We'll need this to insert the shortcode we create.
jquery: $, // If you want jQuery in the dialog, you must pass it here.
tinymce: tinymce
}
);
In the tinymce-dialog.html
var passed_arguments = top.tinymce.activeEditor.windowManager.getParams();
var $ = passed_arguments.jquery;
var jq_context = document.getElementsByTagName("body")[0];
$( function() {
passed_arguments.tinymce.execCommand( 'mceAddEditor', false, $( '#sectionContent_1', jq_context )[0] );
} );
This actually creates an instance of TinyMce which is not working though
probably the reason is an error
TypeError: elm is undefined
which points to
aria: function(name, value) {
var self = this, elm = self.getEl(self.ariaTarget);
if (typeof value === "undefined") {
return self._aria[name];
}
self._aria[name] = value;
if (self.state.get('rendered')) {
elm.setAttribute(name == 'role' ? name : 'aria-' + name, value);
}
return self;
},
what could be causing this?

In the end, I had to stop using TinyMce modal and use bootstrap modals.

Show JqueryUI tooltip based on parsley validation

I am having some trouble with getting the JQueryUI Tooltip Widget working with parsley validation. This is my code:
$.listen('parsley:field:error', function (fieldInstance) {
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
if(fieldInstance.$element.tooltip('instance') != undefined) {
fieldInstance.$element.tooltip('destroy');
}
fieldInstance.$element.tooltip({
items: fieldInstance.$element,
content: messages,
show: 'pulsate'
});
fieldInstance.$element.tooltip('show');
});
My methology is:
Check if a tooltip exists (as multiple validation occur), if it does destroy it.
Create the tooltip with the appropriate message
Show the tooltip
But I just get a consol error:
Uncaught Error: no such method 'show' for tooltip widget instance
Also, if anyone thinks there is a better way of doing this please don't hesitate to answer!

You have a few issues with your code:
The main issue is that you're calling .tooltip('show'); but there is no such method or event, according to the API documentation. You have to use .tooltip('open').
The content option accepts a function or string and you're passing an array. You need to implode the messages array with something like messages.join('<br />')
In order to show the errors only within the tooltip, you need to change the default options of parlsey, specifically errorsContainer and errorsWrapper.
Your final code will be something like this (test in this jsfiddle):
$(document).ready(function() {
$("#myForm").parsley({
errorsContainer: function (ParsleyField) {
return ParsleyField.$element.attr("title");
},
errorsWrapper: false
});
$.listen('parsley:field:error', function (fieldInstance) {
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
if(fieldInstance.$element.tooltip('instance') != undefined) {
fieldInstance.$element.tooltip('destroy');
}
fieldInstance.$element.tooltip({
content: messages.join('<br />'),
items: fieldInstance.$element,
show: 'pulsate'
});
fieldInstance.$element.tooltip('open');
});
});

how to wait for loading data into the store

There are menu button ("clients"), tree panel with clients list (sorted by name) and viewer with selected client details. There is also selectionchange action..
My task - on button click switch to client view and select and load details for first client every time button has been clicked. My problem - store is not loaded, how waiting until ext js will autoload data to the store?
my controller code:
me.control({
'#nav-client': {
click: me.onNavClientClick
},
...
'clientlist': {
// load: me.selectClient,
selectionchange: me.showClient
}
});
onNavClientClick: function(view, records) {
var me = this,
content = Ext.getCmp("app-content");
content.removeAll();
content.insert(0, [{xtype: 'clientcomplex'}]);
var first = me.getClientsStore().first();
if (first) {
Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
}
},
...
Two main questions:
is it good solution in my case? (to select first client in tree panel)
var first = me.getClientsStore().first();
// i use another store to get first record because of i dont know how to get first record (on root level) in TreeStore
...
Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
i know this code works ok in case of "load: me.selectClient," (but only once),
if i place this code on button click - i see error
Uncaught TypeError: Cannot read property 'id' of undefined
because of me.getClientsListStore() is not loaded.. so how to check loading status of this store and wait some until this store will be completely autoloaded?..
Thank you!

You can listen the store 'load' event. Like this:
...
onNavClientClick: function(view, records) {
var me = this;
// if the store isn't loaded, call load method and defer the 'client view' creation
if (me.getClientsStore.getCount() <= 0) {
me.getClientsStore.on('load', me.onClientsStoreLoad, me, { single : true});
me.getClientsStore.load();
}
else {
me.onClientsStoreLoad();
}
},
onClientsStoreLoad : function () {
var me = this,
content = Ext.getCmp("app-content");
content.removeAll();
content.insert(0, [{xtype: 'clientcomplex'}]);
var first = me.getClientsStore().first();
if (first) {
Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
}
},
...