Custom dropdownlist in toolbar of kendo UI editor

Thread is closed for posting
5 posts, 2 answers
  1. Manu
    Manu avatar
    16 posts
    Member since:
    Jun 2016

    Posted 19 Jan 2017 Link to this post

    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
  2. Answer
    Nikolay
    Admin
    Nikolay avatar
    84 posts

    Posted 24 Jan 2017 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Manu
    Manu avatar
    16 posts
    Member since:
    Jun 2016

    Posted 24 Jan 2017 in reply to Nikolay Link to this post

    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).

  4. Answer
    Nikolay
    Admin
    Nikolay avatar
    84 posts

    Posted 27 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Manu
    Manu avatar
    16 posts
    Member since:
    Jun 2016

    Posted 27 Jan 2017 in reply to Nikolay Link to this post

    Hi Nikolay,

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

    Regards.

Back to Top