I've posted my question in a wrong forum,

So I reposted the quesiton again here.

Scenario:

I am trying to enable and disable CheckBoxGroup items,

and it dependes on whether if the categories of the item has values.

For example, If there are two categorie, which are animals and fruits.

If I recieved no datas of fruits, I'll disabled the CheckBoxGroup item "fruits".

What I've tried so far

I search through documents and found this tutorial of the BindTo() method,

However, I got an error message saying "Cannot convert from System.Collections.Generic.List<MyCheckBoxItemModel> to string []

Questions

1. According to the method, how can I convert List<model> to string[] in my .cshtml ?

2. (Extension Question) In the tutorial, I'm awared that in the "InputGroupItemModel" there was a "Enabled" attribute.

Is it mean that if passed it to the front end and attached it with the BindTo() method, the CheckBoxGroup will automatically enable or disable the checkbox item?

(I'll show my code below)

Code

CheckBoxItemDto.cs

 public class CheckBoxItemDto
    {
        //public IDictionary<string, object> HtmlAttributes { get; set; }

        //public string CssClass { get; set; }

        public bool? Enabled { get; set; }

        //public bool? Encoded { get; set; }

        public string Label { get; set; }

        public string Value { get; set; }
    }

CheckBoxItemViewModel.cs

public class CheckBoxItemViewModel
    {
        public List<CheckBoxItemDto> Items { get; set; }

        public string[] CheckBoxGroupValue { get; set; }
    }

MyViewModel.cs

public class EqInstsDataViewModel
    {
        public IEnumerable<MyOtherViewModel> MyOtherViewModel { get; set; }
        public CheckBoxItemViewModel CheckBoxItemViewModel { get; set; }
    }

Controller

 
public IActionResult GetChartPartialView()
        {
            try
            { 
                List<CheckBoxItemDto> checkBoxItemDto = GetCheckBoxItem();  //Get CheckBox Items
                CheckBoxItemViewModel checkBoxItem = new CheckBoxItemViewModel() { Items = checkBoxItemDto };

                MyViewModel myViewModel = new MyViewModel() { Items = checkBoxItem }

                return PartialView("~/Views/Shared/_MyPartialView.cshtml", myViewModel);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

public List<CheckBoxItem> GetCheckBoxItem()
        {            
            try
            {
                #region CheckBoxItems

                var itemsList = new List<CheckBoxItemDto>()
                {
                    new CheckBoxItemDto()
                    {
                        Label = "Animals",
                        Value = "1",
                        Enabled = true
                    },
                     new CheckBoxItemDto()
                    {
                        Label = "Friuts",
                        Value = "2",
                        Enabled = false
                    } ,
                };

                #endregion

                return itemList;
            }
            catch(Exception)
            {
                throw;
            }
        }

_MyPartialView.cshtml

@(Html.Kendo().CheckBoxGroup()     
        .Name("MyCheckBox")
        .BindTo(Model.CheckBoxItemViewModel.Items)  //Cannot convert from List<CheckBoxItemDto> to string[]
        .Value(Model.CheckBoxItemViewModel.CheckBoxGroupValue)
        .Layout("horizontal")
     )

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