Custom Toolbar Command and setting the DataSource

4 posts, 0 answers
  1. Bob
    Bob avatar
    17 posts
    Member since:
    Aug 2013

    Posted 16 Jan 2014 Link to this post

    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"
            }
        });
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Ankita
    Ankita avatar
    2 posts
    Member since:
    Aug 2015

    Posted 19 Nov 2015 Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Nov 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready