Questions on Kendo UI for jQuery Forum

2 answers

127 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 02 May 2025

1 answer

27 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

48 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

34 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

63 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

33 views

Regarding link customization

Hi,

Can we customize the hyperlink dialog in your editor?

Editor

answered on 07 Nov 2024

1 answer

82 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

56 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

0 answers

47 views

Insert Video from Editor

I didn't find any preconstructed mode, from editor to add a video to the content.

If it can help anyone, here is my solution:

In the html

<div id="kVideoDialog"></div>

in script

$(document).ready(function () {
	var videoDia = $("#kVideoDialog");
		functionpasteVideoTo(editorToPaste) {
			let source = $("#source").val();
			let autoplay = $("#play").val() == 1 ? " autoplay" : null;
			let controls = $("#ctrl").val() == 1 ? " controls" : null;
			if(source != "") {
				editorToPaste.exec("insertHtml", { value: '<video' + controls + autoplay + '><source src="' + source + '"></video><p></p>'});
				return true;
			}
			return false;
				
			
		}
	
	functionopenVideoDialog(editorToPaste) {
		videoDia.kendoDialog({
			title: "Select Video",
			closable: true,
			modal: true,
			actions: [
				{ text: 'OK', primary: true,
					action: function (e) {

						return pasteVideoTo(editorToPaste);
				},
				},
				{ text: 'Annulla' },

			]
		});
		videoDia.data("kendoDialog").open();
		videoDia.html('<div id="videomanager"></div><div><label for="source">Sorgente Video:</label><br><input type="text" style="width: 100%;" id="source"><br><label for="play">Autoplay</label><input type="checkbox" value="1" id="play"><br><label for="ctrl">Show Controls</label><input type="checkbox" value="1" checked id="ctrl"></div>');
		
		$("#videomanager").kendoFileManager({
                dataSource: {
                   schema: kendo.data.schemas.filemanager,
                   transport: {
                    read: {
                        url: "/kendo-video-reader.php",
                        method: "POST"
                    },
                    create: {
                        url: "/kendo-fm-dir-maker.php",
                        method: "POST"
                    },
                    update: {
                        url: "/kendo-fm-updater.php",
                        method: "POST"
                    },
                    destroy: {
                        url: "/kendo-fm-deleter.php",
                        method: "POST"
                    }
                  }
               },
            uploadUrl: "/kendo-video-uploader.php",
		select: function(e) {
			let video = JSON.stringify(e.entries);
			const json = JSON.parse(video);
			const source = json[0].path;
			if(source.endsWith(".mp4") ||source.endsWith(".ogg") ||source.endsWith(".webm"))
				$("#source").val("/" + source);
			else
				$("#source").val("");
		},
            toolbar: {
                items: [
                    { name: "createFolder", text: "New Folder" },
                    { name: "upload", text: "Upload" },
                    { name: "sortDirection", text: "Sort" },
                    { name: "sortField", text: "Sort by" },
                    { name: "changeView", text: "Change View"},
                    { name: "spacer" },
                    { name: "details", text: "Details" },
                    { name: "search", text: "Search" }
                ]
            },
            contextMenu: {
                items: [
                    { name: "rename" },
                    { name: "delete" }
                ]
            },
            draggable: true,
            resizable: true
        });
            var filemanager = $("#videomanager").getKendoFileManager();
	}

//then in editor custom tools:
{  
	name: "insertVideo",
	text: "Insert Video",
        tooltip: "Select and insert Video",
        exec: function (e) {
                   var editor = $("#editor").data("kendoEditor");
	           openVideoDialog(editor);
         },
        icon: {
            viewBox: '0 0 512 512',
            content: '<rect style="fill: none;" width="523" height="523"/></rect>'+
		     '<path style="fill: #A59994;" d="M81 268l360 0 0 203 -360 0 0 -203zm199 63c10,0 19,9 19,19 0,10 -9,19 -19,19 -10,0 -19,-9 -19,-19 0,-10 9,-19 19,-19l0 0zm57 -38l-152 0c-7,0 -13,6 -13,13l0 127c0,7 6,13 13,13l152 0c7,0 13,-6 13,-13l0 -127c0,-7 -6,-13 -13,-13l0 0zm0 108l-25 -25 -32 32 -51 -51 -44 44 0 -95 0 0 152 0 0 0 0 95z"/></path>' + 
                     '<path style="fill: #A59994;" d="M81 52l360 0 0 203 -360 0 0 -203zm248 101l-68 31 -68 31 0 -62 0 -62 68 31 68 31z"/></path>' +
                     '<path style="fill: ##86776F;" d="M510 52l-68 0 0 203 -360 0 0 -203 -68 0 0 419 68 0 0 -203 360 0 0 203 68 0 0 -419zm-484 12l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm429 -353l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42z"/></path>'
        } 
 }

}

Bye.

Alessandro

Editor

updated question on 24 Sep 2024

0 answers

82 views

Filter and Grid Cell Editing Date Format

I am running into an issue with allowing copy/paste of dates into the filter and cell input fields. Currently, the date fields have validation to support MM/dd/yyyy, and users of the app may be trying to copy dates in that are MM/dd/yy. I would expect Kendo to auto format the date to MM/dd/yyyy after the paste happens, or at least allow support for that, but it doesn't seem to happen.

In the cell, when putting in MM/dd/yy, a validation message appears saying the date is invalid, and there doesn't appear to be a way to override that. In the filter, when putting in MM/dd/yy and submitting the filter, it doesn't stick and completely ignores the date put in.

Is there any way with the latest version of Kendo (I am on 16) to allow for different date formats in these fields, or is there the possibility that this is something coming in the future?

asked on 11 Sep 2024