Questions on Kendo UI for jQuery Forum

1 answer

14 views

Editor change event triggered when text not changed

I have an editor configured like this:

                @(Html.Kendo().EditorFor(m => m.MyTextData)
                    .Tag("div")
                    .Name("MyTextData")
                    .Resizable(x =>
                    {
                        x.Content(true);
                        x.Min(120);
                        x.Max(400);
                        x.Toolbar(false);
                    })
                    .StyleSheets(css => css.Add(Url.ContentVersioned("~/Content/EditorStyles.css")))
                    .Encode(false)
                    .Events(e => e.Change("onEditorChangeOfContent"))
                    .Tools(tools => tools
                        .Clear()
                        .Bold()
                        .Italic()
                        .Underline()
                        .JustifyLeft()
                        .JustifyCenter()
                        .JustifyRight()
                        .InsertUnorderedList()
                        .InsertOrderedList()
                        .InsertLowerRomanList()
                        .InsertUpperRomanList()
                        .Indent()
                        .Outdent()
                        .FirstLineIndent()
                        .SubScript()
                        .SuperScript()
                        .TableEditingWithCellBorder()
                    )
                )

When first clicking in the editor text area then clicking out of the text area without changing any of the text, the blur function is called and in the blur function a comparison is made between "value" and "old". In this first call to blur, old is undefined so the match is not made and the change event is triggered as if the text was changed. Note that if the same action of clicking in and out of the text area is done again, old contains the correct value and no change event is triggered, so it works differently the second time. The change event should not be triggered on the first action as the text was not changed.

Here is the blur function in Kendo:

         _blur: function() {
                var textarea = this.textarea;
                var old = textarea ? textarea.val() : this._oldValue;
                var value = this.options.encoded ? this.encodedValue() : this.value();

                this.update();

                if (textarea) {
                    textarea.trigger("blur");
                }

                if (value != old) {
                    this.trigger("change");
                    if (textarea) {
                        textarea.trigger("change");
                    }
                }

Editor

answered on 22 Dec 2025

1 answer

30 views

How to track all content changes in Kendo UI Editor (including delete, backspace, paste, image removal)?

I’m using the kendo UI and need to track all changes made by the user. The scenarios include:

Removing an image by backspace or delete.
Using Backspace or Delete to remove text.
Selecting text and deleting it by keyboard or mouse like (cut option using right-click context menu.).
Copying text from outside and pasting into the editor (via keyboard or mouse).
Pasting images or text using right-click context menu.

Is there a single common event or the best approach to handle all these cases?
I’ve checked the change event, but it doesn’t seem to fire for all scenarios (e.g., backspace or image removal). Should I use keyup, paste, or a combination of events? Or is there a recommended way to detect any DOM/content change in the editor?

Any guidance or best practices would be appreciated.

Editor

answered on 07 Nov 2025

3 answers

228 views

HTML editor.value() and editor.body.innerHTML return different values

Hello,

When focused in the HTML editor, I set the default font and font size and add a p tag to the outermost.
Then when I try to get the editor value with editor.value() it automatically gets a space ' ' is being added, but when I read it with editor.body.innerHTML there is no space.
This does not allow you to check whether the space was added by the user.

If from now on I get the editor value with editor.body.innerHTML, could problems occur?
Or what can I do so editor.value() doesn't automatically add spaces?

Thanks

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({ tools: [
    "bold", "italic", "underline", "fontName", "fontSize"
  ]});

var editor = $("#editor").data("kendoEditor");

$(editor.body).focus(function (e) {
    editor.exec("fontName", { value: "Tahoma" });
    editor.exec("fontSize", { value: "10pt" });
    var content = editor.value();
    
    if (content.indexOf('<p') !== 0)
        editor.value('<p>'+ content +'</p>');

    console.log(editor.value());
    console.log(editor.body.innerHTML);
});

</script>

Result:
editor.value():  
editor.body.innerHTML:

Editor

answered on 07 May 2025

1 answer

59 views

Arabic Conversion not happening

We tried to apply the arabic conversion logic to the page. We have control like textbox, dropdown, date and grids with labels. The labels of all controls was changed without any issue. The grid column header caption and the data was also changed.

But the value inside the textbox, dropdown was not changed. Any guidance to resolve this issue.

I used the below code to enable the Google Translation in page.

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'ar,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}

I herewith shared a video for your reference.

answered on 05 Feb 2025

1 answer

91 views

We are trying to create a Editor custom toolbar button with a defined SVG. No matter what we try, we are unable to change the default SVG button.

I am are trying to create a custom toolbar button with a defined SVG.

No matter what we try, we are unable to change the default SVG button.

The documentation says that the name will be used to apply a k-name class. We can then use that to apply our own SVG. How can we change the SVG on a custom button?

Example - https://dojo.telerik.com/NyxxkxYJ

The following example demonstrates how to add a custom tool button. To enable styling where toolName is the specified name in the custom tool configuration, the custom buttons get a k-toolName CSS class. The undo and redo tool names are reserved.

Editor

answered on 08 Jan 2025

1 answer

62 views

Table Accessibility with Caption alignment

This can be tested using the Kendo editor demo on the website. Create a table using the Wizard and under the Advanced tab, create a Caption in the Accessibility options. Select a bottom alignment for the caption. Although the style of vertical-align: bottom is applied to the caption, the text of the caption is still shown above the table. Is this the correct way for the caption alignment to work? Our clients expected the caption to be positioned below the table when selecting one of the bottom alignment options. Thanks for any help.

Editor

answered on 19 Dec 2024

1 answer

150 views

Programmatically add Font Sizes to Editor

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.

Editor

answered on 20 Nov 2024

1 answer

55 views

Regarding link customization

Hi,

Can we customize the hyperlink dialog in your editor?

Editor

answered on 07 Nov 2024

1 answer

178 views

Editor custom button class name missing

Hi, I just updated from 2022.3.1109 to 2024.3.806 and noticed that the CustomButton method for editor tools no longer creates a class with the provided name. We previously used this as a way add custom images as button icons. It was also the only way to have a unique identifier for the button, which is it's own separate issue. I didn't see anything in the release notes about this functionality being removed so I'm wondering if this is a bug or if we are supposed to use some new method of adding custom button icons. I see there is an Icon method available but it seems to be for using existing telerik icons and I don't see any way to add our own.

This answer in this older question shows two methods, of which we were doing the latter:

https://www.telerik.com/forums/how-to-add-a-customized-button-or-image-button-to-editor-tools

I understand we could probably switch to using CustomTemplate instead, but that seems like added maintenance whenever the default kendo classes or styling changes since we want it to match the appearance of the built-in kendo buttons.

Editor

answered on 11 Oct 2024

1 answer

81 views

Preventing row-level editing from being cleared when filters are applied

Hi,

We are attempting to set the default values of new rows in a grid based on some user-specified filters. The desired functionality is that if, for example, the "Year Level" filter is set to "Year 1", when a new row is created it will have its Year Level value automatically set to Year 1 AND will be visible in an edit state in the grid.

We have read the previous Q&A here, however this solution is not suitable as it makes ALL rows with no "Year Level" value become visible when a new row is created.

As the "edit" event does not seem to fire when creating a new row whilst filters are applied, the implementation we are attempting involves saving those filters when the "Add" button is clicked and then re-applying them after the row has been created. This mostly works, but the new row is inserted as an un-editable dirty record and clicking its "Edit" button does nothing.

The code below is a combination of a couple of different approaches. Any guidance would be greatly appreciated!

let currentEditRow;
let currentModel;

$(".k-grid-add").click(function () {
    var grid = $("#grid").data("kendoGrid");

    // Save the current filters before clearing them
    savedFilters = grid.dataSource.filter();
    grid.dataSource.filter([]); 

    // Add a new row and enter edit mode
    currentEditRow = grid.addRow(); 
    grid.editRow(currentEditRow); // Attempting to force new row into edit mode here does not work
});

$("#grid").kendoGrid({
    dataSource: ds,
    sortable: true,
    toolbar: ["create"],
    columns: [
        {
            field: "Yearlevel",
            sortable: false,
            title: "Year Level",
            editor: cmbEditorYearlevelForHomegroup,
            template: "#=Yearlevel?.Name ?? ''#",
            editable: isEditable
        },
        // Other columns here
        { command: ["edit", "destroy"], title: "Action", width: "180px" }],
    editable: "inline",
    edit: function (e) {
        currentEditRow = $(e.container); // Save reference to the editing row
        currentModel = e.model; // Save the current model

        if (e.model.isNew()) {
            var yearLevelDropdown = $("#yearLevel").data("kendoDropDownList");
            e.model.set("Yearlevel", { // Update the values in the new row based on the selected filters
                Code: yearLevelDropdown.value(),
                Id: 0,
                Name: yearLevelDropdown.text()
            });

            var grid = $("#grid").data("kendoGrid");
            if (savedFilters) {
                grid.dataSource.filter(savedFilters); // Re-apply the filters
            }
            if (currentEditRow && currentModel && currentModel.isNew()) {
                var grid = this;
                setTimeout(function () {
                    grid.editRow(currentEditRow); // Attempting to re-enter edit mode for the new row; this also does not work
                });
            }
        }
    }
});

Editor

Filter

Grid

answered on 10 Oct 2024