Custom Toolbar Command and setting the DataSource

[Bob]

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"
        }
    });

[Dimo]

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

[Ankita]

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

[Dimo]

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