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.

How comes this is displaying a checkbox?   This is an ASP.NET CORE app.  I do have the mobile CSS included (not sure if that is required)

Here is the column and template.   It simply renders as a checkbox.

columns.Bound("").ClientTemplateId("switchTemplate");

<script id="switchTemplate" type="text/x-kendo-template">
    <text>
            @(Html.Kendo().Switch()
                .Name("switch#=Id#")
                .Checked(true)
                .ToClientTemplate()
            )
    </text>
</script>

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

Hi,

I saw the question and answer about import excel file to kendo grid back in 2020. Do you have any update on the topic or do you have samples? I have the project that our customers want to import data from excel file to the database. They want to see data in the grid before save to table in database. Is it possible? Any advice. Thank you.

I want to get the value and create a link to redirect to based on the selected result.

But getting undefined.

 function onSelect(e) {

            if (e.item) {
                var dataItem = this.dataItem(e.item.index());
                console.log("event :: select ( index***" + e.item.index + "***: " + dataItem.Text + " : " + dataItem.Value + ")");
            } else {
                console.log("event :: select");
            }
    }

hi 

i need pass Parameter myTicket_Id from java script to c# in razaor page .

my code is :

<script>
                        function onChange(e) {
                            var selectedRows = this.select();
                            var dataItem = this.dataItem(selectedRows[0]);

                            var myTicket_Id=dataItem.Ticket_Id

                            console.log(dataItem.Ticket_Id);

                        };
                    </script>
                    

                    @{

                        HttpContext.Session.Set("Ticket_Id", myTicket_Id);

                        Response.Redirect("/Ticket?id="  + myTicket_Id );
                    }

Hi

I Need Find Event Row click  server side In asp.net core 6 ,  Razor page.

my code is :

                    @(Html.Kendo().Grid<MSG_UserTicketsList_ForFolderModel>
                        ().Name("grid")
                        .Scrollable()
                        .Selectable(selectable => selectable
                        .Mode(GridSelectionMode.Single)
                        .Type(GridSelectionType.Row))
                        .Events(events => events.Change("onChange"))
                        .Columns(columns =>
                        {
                            columns.Bound(e => e.TicketId).Title(" ").ClientTemplate(
                                "# if ( DoerTicketStatus    == 'False') { #" +
                            "<div class='UnreaedTicket'>" +
                            "# } else { #" +
                            "<div>" +
                            "# } #" +
                            "<div class='main-mail-item' >" +
                            "<div class='main-mail-star'>" +
                            "<i class='typcn typcn-star'></i>" +
                            "</div>" +
                            "<div class='main-img-user'>" +
                            "<img src='" + Url.Content("~/UserImage/") + "#:data.TicketCreatorId#.png' />" +
                            "</div>" +
                            " <div class='main-mail-body'>" +
                            " <div class='main-mail-from'>" +
                            "Ticket#: TicketId # &nbsp; &nbsp; #: MyName # (#: UserName #) " +
                            "</div>" +
                            "<div class='main-mail-subject'>" +
                            "<strong>#: Subject #</strong>" +
                        @*      "<div class='row'>&nbsp; #: Subject # &nbsp;</div>"+*@
                        "</div>" +
                        "</div>" +
                        "<div class='main-mail-date'>" +
                        "#: LastUpdateDate #" +
                        "</div>" +
                        "</div>" +
                            "</div>"
                                );
                        })

I'm using the Kendo Validator on a Razor Page in a .NET 7 project.  I've defined an error message for the EmailAddress attribute on the page model but the Kendo Validator is not using it.  I'm using Telerik UI For ASP.NET Core UI version 2022.3.1109.

page model

[DisplayName("Email"), StringLength(256, ErrorMessage = "Email must be no larger than 256 characters"), DataType(DataType.EmailAddress), EmailAddress(ErrorMessage = "Please enter a valid email address")]
public string? EmailAddress { get; set; }

razor

<label asp-for="Input.EmailAddress"></label><br/>
<input asp-for="Input.EmailAddress" class="form-control-large input-rounded"/>
<span asp-validation-for="Input.EmailAddress" class="text-danger"></span>

javascript

var validator = $("#editLocationForm").kendoValidator().data("kendoValidator");

function validateSave() {
    if (validator.validate() || validator.errors().length === 0) {
        $('#editLocationForm').submit();
        $("#SaveConfirmationWindow").data("kendoWindow").close();
    } else {
        bootstrapWarningMessage("There was an error saving.  Please correct the errors and try again.");
    }
    window.scrollTo(0, 0);
    return true;
}

I would expect to see the error message from the attribute -> "Please enter a valid email address".

What I'm getting instead -> "Input.EmailAddress is not valid email".  

Any idea how I can get this to display the error message from the attribute?  I have Required and StringLength attributes that are properly displaying the attribute error message so maybe a bug with the EmailAddress attribute?

Using the taghelper for the orgchart. How do I turn off the edit functions (Edit, Create, Delete) using the default layout? Within the transport, I only have the read action defined. I don't really want to create a template if the default layout is adequate. Seems there is an option (editable) in Kendo UI for jQuery, but not the taghelper.

Using Telerik.UI.for.AspNet.Core 2022.3.1109

Hi,

I can use a ParentGrid Value in a Childgrid if I set the DefaultValue in the model to the TemplateField

     .Model(model => {
       model.Id(p => p.ALIASQLF);
       model.Field(f=> f.ALIASQLF).DefaultValue("#=ALIASQLF#"); //is a field in the parentgrid and will be set at new row
     })

But once I try to use a DateTime Value from the ParentGrid this approach does no longer work, as the Field expects a C# DateTime Value

Okay, just convert the Value to DateTime, right?

But the "#=FieldName#" Syntax does not seem to work as a parameter in a C# method

For Example, the following code will try to convert literally "#=ReplicationDateString#" instead of the datetime-string value:

.Model(model => {

  model.Id(p => p.ReplicationDate);
  model.Id(p=> p.VS_Jobnumber);
  model.Field(f => f.ReplicationDate).DefaultValue(DateTime.ParseExact("#=ReplicationDateString#", "yyyy-MM-dd", CultureInfo.InvariantCulture));
})

Then just convert it within kendo, aight?

.Model(model => {

  model.Id(p => p.ReplicationDate);
  model.Id(p=> p.VS_Jobnumber);
  model.Field(f => f.ReplicationDate).DefaultValue("#= kendo.parseDate("2022-02-02") #");
})

But the kendo.parseDate function always returns a string, so this did not work either, as it expects a C# DateTime.

Has anyone an Idea how to solve this problem? Is there a better approach?