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

Trying to set tools using Html.Kendo().EditorFor

3 Answers 1921 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Richard Lewis
Top achievements
Rank 1
Richard Lewis asked on 16 Jul 2012, 11:36 AM
I am trying to set the tools using EditorFor to create a text editor that shows with no tools 
as the default view but cannot get the syntax correct.

@
Html.Kendo().EditorFor(m
 => m.ChildViewModel.Text).HtmlAttributes(new { Width = "100%", tools = "[]" })

I would also like to show a limited number of tools using the same method for another editor
on the same page.



Please show me the correct syntax for configuring tools using the 'Html.Kendo().EditorFor'
method.

Thanks

3 Answers, 1 is accepted

Sort by
1
Karthik
Top achievements
Rank 1
answered on 09 Mar 2016, 08:44 PM

I know this post is too old. Just to help others, here is a solution 

            @(Html.Kendo().EditorFor(model => model.CustomerFeedback.Description)
                   .HtmlAttributes(new { style = "height:100px; width: 450px" })
                   .Tools(tools => tools
                             .Clear()))

Michael
Top achievements
Rank 1
commented on 07 Apr 2022, 05:18 AM | edited

Strange, I didn't know that you had to put the extra parentheses in there (i.e. after the "@" and at the end) because it generally is not needed unless of course you want to add a tool to the toolbar apparently, lol. Anyway, this worked for me, so thank you!
0
Sajitha
Top achievements
Rank 1
Veteran
answered on 21 Dec 2020, 07:37 PM

Dear All,

I need to add a new custom button on top of the editorfor() control for inserting an email signature. Please help me in this.

I tried as below with custom button, which is not helping me.

    @(Html.Kendo().EditorFor(model => model.RequestDescription)
                .Name("new_editorForRequestDescription")
                .HtmlAttributes(new {style = "height:440px", aria_label = "editor", tabindex = 195 })
                .Tools(tools=>tools
                .CustomButton(cb=>cb.Name("CustomEmailSignature").ToolTip("Insert Email Signature")))
                .Resizable(resizable => resizable.Content(true).Toolbar(true))

                )

Thanks,

Sajitha

0
Misho
Telerik team
answered on 24 Dec 2020, 09:06 AM

Hello,

Adding Custom button configuration for Editor component is demonstrated on the following demo: https://demos.telerik.com/aspnet-mvc/editor/custom-tools 

Generally speaking, all For helpers (e.g EditorFor, ComboBoxFor and etc) automatically assign a name to the widget, so manually doing that is not necessary. Removing the Name method from the widget's configuration should solve the issue. Here is an example configuration of EditorFor helper:

View:

@(Html.Kendo().EditorFor(model => model.ContactName)
 .Resizable(resizable => resizable
 .Content(true)
 .Toolbar(true))
 .Tools(t => t
 .Clear()
 .Bold()
  .CustomButton(cb => cb.Name("custom").ToolTip("Insert a horizontal rule").Exec(@<text>
                        function(e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<hr />" });
                        }
            </text>))
 )
 )

Controller:

 public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            var model = new OrderViewModel
            {
                ContactName = "My Name"
            };
            return View(model);
        }

Model:

 public class OrderViewModel
    {
        public int OrderID
        {
            get;
            set;
        }

        public string ContactName
        {
            get;
            set;
        }

You could observe the result on my end in the following screenshot:

https://www.screencast.com/t/EbljZV4IrUsT 

I hope this helps.

Please don't hesitate to contact us again if a specific issue pops up or in case you have other feedback or questions related to Kendo UI components. 

Best Regards,
Misho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Richard Lewis
Top achievements
Rank 1
Answers by
Karthik
Top achievements
Rank 1
Sajitha
Top achievements
Rank 1
Veteran
Misho
Telerik team
Share this question
or