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

Customer dropdownlists in Editor toolbar?

2 Answers 97 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Manu
Top achievements
Rank 1
Manu asked on 24 Jan 2017, 07:32 AM

Hello,

currently I have a trial version of UI for ASP.NET MVC and I am working on a test web application. My goal is to design a simple page with an editor widget on it. I would like to integrate into the toolbar several dropdownlists (about 5). The dropdownlist should work similarly to the 'insert html' snippet.

For that purpose I would:

1. need customer labels/titles for the dropdownlists

2. need to use a remote datasource (table form an azure sql db) to populate the dropdownlists

3. need an event that places the selected item of the dropdownlist into the editor box at the cursor position

I studied the documentation for the editor widget but was not able find out wether my goal can be realized.

If someone could give me advice about the feasibiltiy of and how to realize my goal.

Thanks in advance.

Manfred

 

 

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Ianko
Telerik team
answered on 25 Jan 2017, 02:34 PM

Hello Manu,

Typically, the solution you are looking for is demonstrated here: http://demos.telerik.com/aspnet-mvc/editor/custom-tools. The CustomTemplate option illustrated there. 

This, however, is using client-side widgets in the template of the editor's toolbar. If, however, you need to use server-side MVC wrapper instead, you can feed the CustomTemplate method's overload with the needed MVC wrapper. For example: 

...
tools.CustomTemplate(temp => temp.Template(
    Html.Kendo().DropDownList()
        .Name("ddl1")
        ...
        .ToClientTemplate()
        .ToHtmlString()
    ));
...

Further, you can use the exec method to insert HTML using the insertHtml command:

$("#editor").data("kendoEditor").exec("insertHtml", { value: "some HTML" })


As per to your questions:

I am not sure what exactly those labels and titles should be taken from and where they should be rendered. If the idea is to customize the text and value of the items, you can use the dataTextField and dataValueField with some data binding.

You can see a demo for remote data binding here: http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource. And as the  created in the editor toolbar is a client-side widget there is nothing different with data binding.

With the Kendo you have the change event, which you can use to trigger some logic. Placing HTML at the cursor position is done by using the exec("insertHtml", { value: "..."}) method shown above.

If you are rather interested in using the MVC server-side helper of the Kendo DropDownList you can take a look at this example here:

 

@(Html.Kendo().Editor()
    .Name("editor")
    .Tools(tools => {
            tools.CustomTemplate(temp => temp.Template(
                Html.Kendo().DropDownList()
                    .Name("ddl1")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<object>
                    {
                        new { Text = "text 1", Value = "Value 1" },
                        new { Text = "text 2", Value = "Value 2" },
                        new { Text = "text 3", Value = "Value 3" },
                        new { Text = "text 4", Value = "Value 4" }
                    })
                    .Events(events => events.Change("onChange"))
                    .ToClientTemplate()
                    .ToHtmlString()
                ));
    })
)
 
<script>
    function onChange(e) {
        $("#editor").data("kendoEditor").exec("insertHtml", { value: e.sender.value() })
    }
</script>

Of course, you can get more guidance about data binding and everything else regarding the Kendo DropDownList for MVC by following the corresponding demo examples: http://demos.telerik.com/aspnet-mvc/dropdownlist/.  

 

Regards,
Ianko
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.
0
Manu
Top achievements
Rank 1
answered on 25 Jan 2017, 02:46 PM
Thanks for the thorough discussion and info. This will keep my bussy for a while.
Tags
Editor
Asked by
Manu
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Manu
Top achievements
Rank 1
Share this question
or