This is a migrated thread and some comments may be shown as answers.

Custom Toolbar Command and setting the DataSource

3 Answers 236 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 16 Jan 2014, 04:27 PM
I have a custom tool bar command that inserts HTML Snippets....

How do I programmatically load these elements (I have 100)...   It is the insertHTML command that I want to load from my database Table.

$("#editor").kendoEditor({
        tools: [
            "insertHtml",
            "bold",
            "italic",
            "underline"
        ],
        insertHtml: [
            { text: "Client First Name(s)", value: " [FIRSTNAME] " },
            { text: "Client FullName", value: " [FULLNAME] " },
            { text: "Client Since", value: " [CLIENTSINCE] " }
        ],
        messages: {
            insertHtml: "Insert Tags"
        }
    });

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Jan 2014, 02:16 PM
Hi Bob,

The easier option is to load all snippets before creating the Editor, so that a ready-to-use array of values is assinged to the insertHtml property.

An alternative option is to load the snippets after the Editor has been created. In this case you will need to obtain a reference to the InsertHtml tool's DropDownList and rebind it.

var dropDownList = $("#EditorID").data("kendoEditor").toolbar.element.find("select.k-insertHtml").data("kendoSelectBox");

SelectBox inherits from DropDownList and adds some Editor-related features. In other words, you have all the DropDownList API at your disposal:

http://docs.kendoui.com/api/web/dropdownlist#methods-setDataSource

Actually, you can pass an array of objects directly:

dropDownList.setDataSource([
   {text: "...", value: "..."},
   {text: "...", value: "..."}
]);


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ankita
Top achievements
Rank 1
answered on 19 Nov 2015, 05:37 PM

What should be 1st approach here incase if we dont have to go with alternative option?

I am having same question. how to bind HTMLElement with Database value?

$("#editor").kendoEditor({
        tools: [
            "insertHtml",
            "bold",
            "italic",
            "underline"
        ],
        insertHtml: [
            { text: "dataItem.Name", value: "dataItem.Value" }             
        ],
        messages: {
            insertHtml: "Insert  Value"
        }
    });

 

Thanks ,

Ankita

0
Dimo
Telerik team
answered on 20 Nov 2015, 07:22 AM
Hello Ankita,

The first and recommended approach is to:

- load the items for the InsertHtml tool in advance by using any implementation that fits your scenario and preferences
- make sure the items are available as a JavaScript array of objects on the client
- initialize the Editor widget and pass the above array in the widget declaration

http://demos.telerik.com/kendo-ui/editor/snippets

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
Bob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ankita
Top achievements
Rank 1
Share this question
or