I'm having trouble loading the collection which defines the insertHtml text/value pairs using a datasource.
What I'd like to do is have the user choose a template to edit, and have the insertHtml load accordingly. Therefore I have global datasources for the templates and the insertHtml data, and the change event on the template selector triggers a read on the insertHtml datasource:
For some reason this won't work. I'm getting an error in kendo.all.min.js:8 "Uncaught TypeError: Cannot call method 'removeClass' of undefined " when it tries to read into the insertHtml datasource.
What I'd like to do is have the user choose a template to edit, and have the insertHtml load accordingly. Therefore I have global datasources for the templates and the insertHtml data, and the change event on the template selector triggers a read on the insertHtml datasource:
<script type="text/javascript"> var templateSource = new kendo.data.DataSource({ schema: { data: "d", model: { id: "title", fields: { title: { type: "string" }, value: { type: "string" }, type: { type: "number" } } } }, transport: { read: { contentType: "application/json; charset=utf-8", type: "POST", url: "http://localhost:23035/foo/bar" }, parameterMap: function (data, operation) { if (operation == "read") { return JSON.stringify({ user_id: arg('foo') }) } } } }) var tokenSource = new kendo.data.DataSource({ schema: { data: "d" }, transport: { read: { contentType: "application/json; charset=utf-8", type: "POST", url: "http://localhost:23035/foo/rab" }, parameterMap: function (data, operation) { var type = $('#templateSelector').data("kendoDropDownList").dataItem().type; return JSON.stringify({ email_template_type_id: type }) } } }) $(document).ready(function () { $("#templateSelector").kendoDropDownList({ dataTextField: "title", dataValueField: "value", dataSource: templateSource, change: function () { var value = $("#templateSelector").val(); var editor = $("#editor").data("kendoEditor"); editor.value(value); tokenSource.read(); } }); $("#editor").kendoEditor({ tools: [ "insertHtml" ], insertHtml: tokenSource.data() }); }) </script>For some reason this won't work. I'm getting an error in kendo.all.min.js:8 "Uncaught TypeError: Cannot call method 'removeClass' of undefined " when it tries to read into the insertHtml datasource.
4 Answers, 1 is accepted
0
David
Top achievements
Rank 1
Rank 1
answered on 23 Jul 2012, 05:57 PM
BUMP!
Seriously: this is not working for me. Help?
I've worked out all other issues with the tools but the insertHtml always appears unable to get its data from the datasource. It returns no errors but never contains any data. I've looked at the webservice that is sending the data and it's perfectly well-formed.
Seriously: this is not working for me. Help?
I've worked out all other issues with the tools but the insertHtml always appears unable to get its data from the datasource. It returns no errors but never contains any data. I've looked at the webservice that is sending the data and it's perfectly well-formed.
var tokenSource = new kendo.data.DataSource({ schema: { data: "d", model: { fields: { text: { type: "string" }, value: { type: "string" } } } }, transport: { read: { contentType: "application/json; charset=utf-8", type: "POST", url: "http://foo/bar" }, parameterMap: function (data, operation) { return JSON.stringify({ description: $("#templateSelector").data("kendoDropDownList").dataItem().title }) } } }); $("#editor").kendoEditor({ tools: [ "insertHtml" ], insertHtml: tokenSource.data() });
0
David
Top achievements
Rank 1
Rank 1
answered on 24 Jul 2012, 09:03 PM
It looks to me like insertHtml might be broken.
I've tried everything I can think of and I can't get it to accept data from a datasource. There's little documentation of this feature but it does say that it takes an array of text/value pairs, which is what my dataSource.data() gives it. Regardless it doesn't work and I get no javascript errors.
Any comments?
I've tried everything I can think of and I can't get it to accept data from a datasource. There's little documentation of this feature but it does say that it takes an array of text/value pairs, which is what my dataSource.data() gives it. Regardless it doesn't work and I get no javascript errors.
Any comments?
0
Kevn
Top achievements
Rank 1
Rank 1
answered on 25 Sep 2012, 01:49 PM
Did you ever get a solution to this issue?
0
David
Top achievements
Rank 1
Rank 1
answered on 25 Sep 2012, 09:09 PM
Yes, eventually.
It's a bit convoluted and not documented at all, but here's the gist: you need to get the selectBox that is the DOM object the javascript converts to the insertHTML control, then assign a dataSource to it. Here's an example:
The dataSource needs to have a well-defined schema for this to work, and must return an enumerable set of text/value pairs.
You also need to set a default value for insertHTML for it to use until it gets data from the dataSource:
Good luck!
It's a bit convoluted and not documented at all, but here's the gist: you need to get the selectBox that is the DOM object the javascript converts to the insertHTML control, then assign a dataSource to it. Here's an example:
var selectBox = $(".k-insertHtml select").data("kendoSelectBox"); selectBox.options.autoBind = false; selectBox.setDataSource(tokenSource); selectBox.text("Insert Token");The dataSource needs to have a well-defined schema for this to work, and must return an enumerable set of text/value pairs.
You also need to set a default value for insertHTML for it to use until it gets data from the dataSource:
$("#editor").kendoEditor({ tools: [ "insertHtml", "bold", "italic", "underline", "strikethrough", "fontName", "fontSize", "foreColor", "backColor", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "formatBlock", "createLink", "unlink", "insertImage" ], insertHtml: [{ text: "Templates not loaded yet", value: ""}]});Good luck!