Programmatically add Font Sizes to Editor

[Bob]

Having a Kendo editor declared like this:

                @(Html.Kendo().EditorFor(m => m.MyEditor)
                            .Name("MyEditor")
                            .Resizable(true)
                            .StyleSheets(css => css.Add(Url.Content("~/Content/EditorStyles.css")))
                            .Messages(messages => messages
                                .FontNameInherit("Default")
                                .FontSizeInherit("Default")
                            )
                            .Tools(tools => tools
                                .Clear()
                                .Bold()
                                .Italic()
                                .Underline()
                                .JustifyLeft()
                                .JustifyCenter()
                                .JustifyRight()
                                .InsertUnorderedList()
                                .InsertOrderedList()
                                .Indent()
                                .FontName(fonts => fonts
                                    .Add("Arial", "Arial")
                                    .Add("Courier New", "Courier New")
                                    .Add("Helvetica", "Helvetica")
                                    .Add("Times New Roman", "TimesNewRoman")
                                    .Add("Verdana", "Verdana")
                                )
                                .FontSize(sizes => sizes
                                    .Add("8", "8pt")
                                    .Add("9", "9pt")
                                    .Add("10", "10pt")
                                    .Add("12", "12pt")
                                    .Add("14", "14pt")
                                    .Add("16", "16pt")
                                    .Add("18", "18pt")
                                    .Add("20", "20pt")
                                )
                        ))

Is there any way to programmatically add the font sizes instead of with the fixed .Add method?  I need to read a configuration file in the model then based on the font sizes of the configuration, add only those font sizes to the dropdown.  I am a little stumped on how to do this using the EditorDropDownItemBuilder approach.  Thanks for any help.

 

 

 

 

[Alexander]

Hi Bob,

If you wish to remove the overhead of adding multiple font sizes within the boundaries of the "FontSize()" API configuration, more heavy-lifting would be required. A possible recommendation would be to employ a custom extension method. Similar to how it is illustrated in the following article:

• Defining Custom HtmlHelper Methods

Here is an example in the context of your scenario:

public static class EditorExtensions
{
    public static EditorToolFactory FontSize(this EditorToolFactory factory, IEnumerable<EditorToolItem> items)
    {
        List<EditorTool> container = factory
            .GetType()
            .GetProperties(BindingFlags.NonPublic | BindingFlags.Instance)
            .FirstOrDefault(member => member.Name == "Container")
            .GetValue(factory) as List<EditorTool>;

        EditorTool editorTool = new EditorTool
        {
            Editor = factory.Editor,
            Name = "fontSize",
            Items = items as List<EditorToolItem>
        };

        container.Add(editorTool);

        return factory;
    }
}

Let's say we supposedly have the following scenario:

public IActionResult Index()
{

    var model = new DropDownTreeItemModel
    {
        Text = "Test"
    };

    return View(model);
}

You can then make an assertion based on the model's value and utilize the previously defined extension method:

@using static EditorExtensions

@{
    var items = new List<EditorToolItem>();

    if(Model.Text == "Test")
    {

        items.AddRange(new List<EditorToolItem>()
        {
            new EditorToolItem
            {
                Text = "8",
                Value = "8pt"
            },
            new EditorToolItem
            {
                Text = "5",
                Value = "5pt"
            }
        });
    }
    else
    {
        items.AddRange(new List<EditorToolItem>()
        {
            new EditorToolItem
            {
                Text = "8",
                Value = "8pt"
            },
        });
    }
}


@(Html.Kendo().EditorFor(m => m.Text)
	...
	.FontSize(items)
)

I hope this helps. On second thought, this is a valid enhancement candidate. Thus, I will personally embark on the initiative of verifying the validity of such a feature and will keep you posted if there is a green light :)

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Bob]

Hi Alexander, this extension looks like it should do the job, but unfortunately I do not have any definition for EditorToolItem, and the definition for EditorTool in Kendo.MVC does not match the code you provided:

#region Assembly Kendo.Mvc, Version=2024.3.1015.462, Culture=neutral, PublicKeyToken=121fae78165ba3d4
// C:\Projects\EPIC\EPIC Examinations\PRO-Work4.5.2\EPICWeb\lib\KENDOUIMVC\2024.3.1015.462\Kendo.Mvc.dll
// Decompiled with ICSharpCode.Decompiler 8.1.1.7464
#endregion

namespace Kendo.Mvc.UI;

public class EditorTool : IEditorTool
{
    public string Name { get; set; }

    public EditorTool(string name)
    {
        Name = name;
    }
}

I tried to find a reference for these classes, but only old PHP references came back in the search results.  Can you tell me where these classes are located?  Thanks!

[Alexander]

Apologies, it appears that I have made blunder here. What I have shared falls within the jurisdiction of the Telerik UI for ASP.NET Core components.

Here is how this would look like for the Telerik UI for ASP.NET MVC suite:

public static class EditorExtensions
{
    public static EditorToolFactory FontSize(this EditorToolFactory factory, List<DropDownListItem> items)
    {
        EditorDropDownItemBuilder obj = new EditorDropDownItemBuilder(items);

        var tool = new EditorListTool("fontSize", items);

        var group = factory.GetType().GetField("group", BindingFlags.NonPublic | BindingFlags.Instance)
            .GetValue(factory) as EditorToolGroup;

        group.Tools.Add(tool);

        return factory;
    }
}

This can be then leveraged in the following manner:

@{ 
    var items = new List<DropDownListItem>()
    {
        new DropDownListItem
        {
            Text = "8",
            Value = "8pt"
        },
        new DropDownListItem
        {
            Text = "2",
            Value = "2pt"
        }
    };
}

@using  TelerikMvcApp134.Models

@(Html.Kendo().Editor()
	.Name("editor")
    .Tools(tools =>
    {
        tools.Clear();
        tools.FontSize(items);
    })
)

At least, the positive thing here is that two scenarios are tackled which could help members of the community from either of the suites, if they stumble upon this article :)

[Bob]

Thank you Alexander, this works perfectly!  

[Alexander]

Happy to help :)