Custom dropdownlist in toolbar of kendo UI editor

[Manu]

Hello,

I would like to use the kendo UI editor in my asp.net mvc web application, but I am not sure if the following scenario can work with it.

My web application stores data in a database and one feature must be the generation of an html-document that contains data from the database.

The scenario:

1. My web app presents a page that contains a kendo UI editor box with many of the build-in editor tools at the top.
2. In addition I would like to add several custom dropdownlists into the top of the page or preferably into the tool bar of the editor. The dropdownlists contain lists of tags that represent certain content of the database of my web app.
3. When the user selects an item from a dropdownlist the tag (for example: #companyName#) is placed into the editor box
(similar to the html-snippet tool).
4. The user then places static content (text, images, ...) into the template.
5. The user then saves the entire content of the editor box as an html-document; lets call this a template.
6. Later the template is used to generate a copy of the template where all tags are replaced with real content from the database.

My question:
1. Is it possible to design dropdownlist and have them work together with the kendo UI editor as decribed above?

Kind regards
Manu

[Nikolay]

Hi Manu,

Yes, the described scenario can be achieved by the Kendo Editor. I have prepared for you a sample dojo example which includes the editor and a custom dropdown. Similar case for custom dropdown in MVC can be found here - http://demos.telerik.com/aspnet-mvc/editor/custom-tools.

The inserted "tags" by the dropdown could be non editable which is controlled by immutables option and contenteditable="false" attribute of the inserted HTML element. Additional information about the immutable elements in the editor could be found here - http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#configuration-immutables.

Feel free to contact us again in case of any questions.

Regards,
Nikolay
Telerik by Progress

 

 

[Manu]

Hi Nikolay,

thank you for the help. Just 1 more question:

Is it possible to populate the items of the dropdownlist with data from a remote datasource (table form an azure sql db)?

Regards

Manu

 

ps: Sorry for posting at two differnet places (see: http://www.telerik.com/forums/customer-dropdownlists-in-editor-toolbar).

[Nikolay]

Hi Manu,

Please see the modified dojo example from my previous post: http://dojo.telerik.com/AVAyay/11 and the MVC version:

@(Html.Kendo().Editor()
    .Name("editor")
    .Tools(tools =>
    {
        tools.CustomTemplate(template => template.Template(
            Html.Kendo().DropDownList()
                .Name("ddl1")
                .DataTextField("Text")
                .DataValueField("Value")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetData", "Editor");
                    });
                })
                .Events(events => events.Change("onChange"))
                .ToClientTemplate()
                .ToHtmlString()
            ));
    })
)

<script>
    function onChange(e) {
        $("#editor").data("kendoEditor").exec("insertHtml", { value: e.sender.value() })
    }
</script>

Controller:

public partial class EditorController : Controller
    {
        public JsonResult GetData([DataSourceRequest] DataSourceRequest request)
        {
            var data = new List<SomeData>
                    {
                        new SomeData { Text = "text 1", Value = "Value 1" },
                        new SomeData { Text = "text 2", Value = "Value 2" },
                        new SomeData { Text = "text 3", Value = "Value 3" },
                        new SomeData { Text = "text 4", Value = "Value 4" }
                    };

            return Json(data, JsonRequestBehavior.AllowGet);
        }
    }

    public class SomeData
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }

Regards,
Nikolay
Telerik by Progress

[Manu]

Hi Nikolay,

thank you again. This is exactly what I needed. Perfect.

Regards.