Hi!

I've stumbled upon an issue with positioning of resize handlers for an image placed inside a table.
The resize handlers appears above the table altogether.

Steps to replicate:

• Go to https://demos.telerik.com/aspnet-core/editor 
• Copy the image that is already in the editor
• Paste image inside one of the cells of the table
• Select image
• Resize handlers does not appear along the edge of the image

Expected behaviour:

• Select image
• Resize handlers appear along the edge of the image
  

I have replicated the same problem in Chrome, Edge, Opera and Firefox.

See attached image for more details.

Is this something you are looking into, or should i try to make my own fix?
If you are looking into this, when could I expect a possible fix?

Kindest regards,
Tobias Nordby

I want to disable drag and drop images from local folders or copy paste the images from clipboard into the Kendo Editor (https://demos.telerik.com/aspnet-core/editor). 
I am using this function emailEditorPaste() to prevent such ,

function emailEditorPaste(e) { var clipboardData = e.event.clipboardData || window.clipboardData; var items = clipboardData.items; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.type.indexOf("image") !== -1) { e.preventDefault(); console.log("Images cannot be pasted here"); break; } } }

and I have appended it to the Paste events on Editor as in here
@(Html.Kendo().EditorFor(m => m.MsgT.body) . .Tools(tools => tools .Clear() .FontName().FontSize() .Bold().Italic().Underline() .JustifyLeft().JustifyCenter().JustifyRight() .ForeColor().BackColor() .InsertUnorderedList().InsertOrderedList() .Outdent().Indent() .CreateLink().Unlink() .InsertImage() ) .Events(events => events .Change("emailEditorChange") .Paste("emailEditorPaste")

emailEditorPaste() works fine in not allowing me the user to drag and drop the images but when I have a text copied to clipboard and I try to paste it into editor , it doesn't paste on first attempt and throws a console error:
"Cannot read properties of undefined (reading 'clipboardData')
TypeError: Cannot read properties of undefined (reading 'clipboardData')" .

On second attempt the text is pasted into the editor just fine.

I looked all places but I am still missing something, can you please share me some resources on how to disable the drag and drop images into the editor.

Say I am uploading an Image - k-file-preview shows this link --> https://demos.telerik.com/aspnet-mvc/imagebrowser/thumbnail?path=thumbnail1.jpg
and upon insert the image into the editor the image url shows as --> https://demos.telerik.com/aspnet-mvc/content/userfiles/images/thumbnail1.jpg

does this mean we have thumbnails for the uploaded image stored in another folder, and upon calling thumbnail path it looks for the path n gives the preview??

then again for asp .net core i see k-listview-item i do not see a k-file-preview but on asp .net mvc and for jQuery I can see the thumbnail on demo -->  https://demos.telerik.com/aspnet-mvc/editor/imagebrowser

Hi everyone,

I'm using the Telerik UI for ASP.NET Core Editor to add my content from a Word file, but I'm encountering an issue. When I copy content from the Word file and paste it into the editor, additional CSS classes are being added to the tags.

For example: I copied paragraph from Word File and its looking like this (Class of MsoNormal and other style properties are added)

<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">Drivida Marketplace provides a comprehensive guide to school owners with tools to manage their educational institutions effectively.</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">&nbsp;</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">This comprehensive guide aims to provide school owners with a clear understanding of the suite of tools available within the platform, enabling them to manage their educational institution effectively. Here's what you can do with the School Portal:</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">&nbsp;</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">&nbsp;</p>

Is there any way to Remove these Class and other properties from Telerik Editor HTML Code? 

Can anyone help me resolve this issue?

I am also attaching sample Word File

Thank you!

Good afternoon,

I've noticed an inconsistency with the styles of textboxes when editing inline in a grid for textboxes and numeric textboxes.

In the demo they appear correctly, having had the surrounding span added, and have the theme's colouring and styling:

https://demos.telerik.com/aspnet-core/grid/editing-inline?autoRun=true&theme=classic-opal

However, if you edit in Telerik REPL (and the same happens for me in my dev environment) the numeric textboxes display differently, and don't pick up the theme's styling:

I've also notice that the EditorTemplates for Boolean, Date and DateTime are not working correctly as the closing bracket appears too early and renders the text:

HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})

I have fixed this by editing the templates.

Kind regards,

Richard

Hello I have searched multiple forum responses on similar issues for this answer seen the cascading dropdown demos and the MVC5 dropdown demo. I can't seem to make my cascading inline grid dropdown recognize the parent object to enable the second dropdown.

I have been able to access the cascade effect when the initial dropdown is not in the grid. So I can make a dropdown that cascades I just cant seem to get it to work in the grid while editing.

Any suggestions? Thanks!

code below

subedit.cshtml

@model CircuitStatus
@(Html.Kendo().DropDownList()
          .Name("subdrop")
          .OptionLabel("Select option")
          .DataTextField("station_name")
          .DataValueField("station_id")
          .DataSource(source =>
            {
                source.Read(read =>
                        {
                            read.Action("station_Read", "CircuitStatus");
                        }).ServerFiltering(true);
            })
        )
 

cascadedropdowntemplate.chtml

@(Html.Kendo().DropDownList()
          .Name("circuit")
          .HtmlAttributes(new { style = "width:100%" })
          .OptionLabel("Select product...")
          .DataTextField("circuit_name")
          .DataValueField("circuit_id")
          .DataSource(source =>
                  {
              source.Read(read =>
              {
                  read.Action("cirucitBystation_Read", "CircuitStatus")
                      .Data("getSubstationName");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("subdrop")

          )

<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbySubstationName: $("#subdrop").val()
        };
    }
</script>

finally the index.cshtml

<div class="row"><div class="col-12">
        @(Html.Kendo().Grid<QCReview.Models.CircuitStatus>()
                .Name("grid")
                .Columns(columns =>
                {
                columns.Bound(p => p.STATION_NAME).EditorTemplateName("subedit").Filterable(filterable => filterable.Multi(true).CheckAll(true));
                columns.Bound(p => p.CIRCUIT_ID).Title("Circuit ID").EditorTemplateName("cascadedropdowntemplate");
                    columns.Bound(p => p.QA_EXT).ClientTemplate("<input type='checkbox' disabled #=QA_EXT ? checked='checked' :'' # />").Title("QA Ready");
                    columns.Bound(p => p.OMS_READY).ClientTemplate("<input type='checkbox' disabled #=OMS_READY ? checked='checked' :'' # />").Title("OMS Ready");
                    columns.Bound(p => p.INSERT_DATETIME).Format("{0:MM/dd/yyyy}").Title("Insert Date");
                    columns.Bound(p => p.QA_DATETIME).Format("{0:MM/dd/yyyy}").Title("QA Date");
                    columns.Bound(p => p.LAST_UPDATE_DATETIME).Format("{0:MM/dd/yyyy hh:mm tt}").Title("Last Update Date");
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                })
                .Events(events =>
                    events.Edit("edit")
                    )
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable(filter => filter.Extra(false)
                .Operators(operators => operators
                .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
                )))
                .Groupable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(50)
                .Events(events =>
                {
                    events.Error("error_handler");
                    events.Change("onChange");
                })
        .Model(model =>
        {
            model.Id(p => p.CIRCUIT_ID);
            model.Field(p => p.STATION_NAME).Editable(true);
            model.Field(p => p.CIRCUIT_ID).Editable(true);
            model.Field(p => p.INSERT_DATETIME).Editable(false);
            model.Field(p => p.SUBSTATION_NAME).Editable(true);
            model.Field(p => p.LAST_UPDATE_DATETIME).Editable(false);
    })
    .Create(create => create.Action("CircuitStatus_Create", "CircuitStatus"))
    .Read(read => read.Action("CircuitStatus_Read", "CircuitStatus"))
    .Update(update => update.Action("CircuitStatus_Update", "CircuitStatus"))
    .Destroy(update => update.Action("CircuitStatus_Destroy", "CircuitStatus"))

    )
    )
<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbystationName: $("#subdrop").val()
        };
    }
</script>
 
    

I have an editor (classic mode) I use in an editor template like @(Html.Kendo().EditorFor(m => m.Content) for a grid to create and update HTML content coming from the database that has inputs and selects. When I first load the content to the editor, I have a processEditorInputs() JavaScript function that loops thru all the inputs and selects in the editor's iframe, adds a css class to them, and adds a dblclick event listener so they can be edited via a kendo dialog I have also in my view. Everything is working fine but I have an issue I have not been able to figure out. After the undo action is performed in the editor, either by ctrl+Z or toolbar action, all my inputs in the editor lose their doubleclick binding and therefore cannot be edited again via the dialog. I tried subscribing to the 'Execute' event of the editor to call my processEditorInputs() function again after undo is performed like below:

function onExecute(e) {
            if(e.name == 'undo'){
                processEditorInputs();
            }            
}

This seems to be only working after executing undo multiple times only and it does not seem reliable.

Here is my editor.

@(Html.Kendo()
        .EditorFor(m => m.Content)
            .StyleSheets(css => css.Add(Url.Content("~/css/site.css?3")))
            .Tools(tools => tools            
            .Clear()
            .ViewHtml()
            .CustomTemplate(ct => ct.Template("<li class='k-tool-group k-button-group' role='presentation'><button type='button' onclick='openInsertCheckbox();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Checkbox'><i class='mdi mdi-checkbox-marked-outline'></i></button><button type='button' onclick='openInsertInput();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Input'><i class='mdi mdi-form-textbox'></i></button><button type='button' onclick='openInsertSelect();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Select'><i class='mdi mdi-form-dropdown'></i></button></li>"))            
            .Undo()
            .Redo()
            .Bold()
            .Italic()
            .Underline()
            .Strikethrough()
            .JustifyLeft()
            .JustifyCenter()
            .JustifyRight()
            .JustifyFull()
            .InsertUnorderedList()
            .InsertOrderedList()
            .Outdent()
            .Indent()
            .CreateLink()
            .Unlink()
            .InsertImage()
            .InsertFile()            
            .SubScript()
            .SuperScript()
            .TableEditing()            
            .Formatting()
            .CleanFormatting()
            .FontName()
            .FontSize()
            .ForeColor()
            .BackColor()
            .Pdf()
            .Print()
            .CustomTemplate(ct => ct.Template("<li class='k-tool-group k-button-group' role='presentation'><button type='button' onclick='insertPageBreak();' role='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-tool' title='Insert Page Break'><i class='fas fa-grip-lines'></i></button>"))
            ).Events(events => events                
                .Execute("onExecute")                
            ))

My javascript functions.

$(document).ready(function () {
        $(".t-placeholder").on("dragstart", function (e) {
            e.originalEvent.dataTransfer.setData("text", $(this).html());
        });  
        processEditorInputs();
    });

function processEditorInputs() {
            let iframe = document.getElementsByClassName('k-iframe')[0];
            let inputElements = iframe.contentWindow.document.getElementsByTagName('input');
            let selectElements = iframe.contentWindow.document.getElementsByTagName('select');

            //inputs
            for (let i = 0; i < inputElements.length; i++) {
                //style                
                styleEditorField(inputElements[i]); 
                //add unique identifier
                if (!inputElements[i].id || inputElements[i].id == '') {
                    var id = generateUniqueId();
                    inputElements[i].id = `input-${id}`;
                }                
                //add double click event listener to edit according to input type (if not already bound only)
                bindEditOnDoubleClick(inputElements[i]);                
            }

            //selects
            for (let i = 0; i < selectElements.length; i++) {
                //style
                styleEditorField(selectElements[i]);
                //add unique identifier
                if (!selectElements[i].id || selectElements[i].id == '') {
                     var id = generateUniqueId();
                    selectElements[i].id = `select-${id}`;
                }               
                //add double click event listener to edit
                bindEditOnDoubleClick(selectElements[i]);
            }
        }

        function generateUniqueId(){
            return Date.now() + Math.floor(Math.random() * 1000000);
        }

        function bindEditOnDoubleClick(input){
            //debugger;
            if($(input).is('select')){
                input.addEventListener("dblclick", function () {
                    openInsertSelect(this);
                });
            }
            else{
                switch (input.type) {
                    // If the input type is text, date, time, number
                    case 'text':
                    case 'date':
                    case 'time':
                    case 'number':
                        input.addEventListener("dblclick", function () {
                            openInsertInput(this);
                        });
                        break;
                    // If the input type is checkbox
                    case 'checkbox':
                        input.addEventListener("dblclick", function () {
                            openInsertCheckbox(this);
                        });
                        break;
                }
            }            
        }

        function styleEditorField(input){
            input.classList.add('k-edt-field');           
        }

I would appreciate your assistance with this matter. Please let me know if more information is needed.

Thanks.