I have

@(Html.Kendo().TreeView()
    .Name("treeviewAvail")

...and...

 @(Html.Kendo().ListBox()
      .Name("listboxAvail")

How can I 'have both of those so that I can drag/drop from either into another list box?  (It's not needed to go the other way.)

@(Html.Kendo().ListBox()
    .Name("listboxSelected")

I've seen this topic, but it does not handle what I need for TreeView too

https://www.telerik.com/forums/listbox-drag-and-drop-1557506

The page has two cascades ComboBox .
With a blank page, everything works fine.
But when data is transferred to the page (for editing), then the second ComboBox  does not display and is blocked.
It turns out after loading the data in the first ! does not fit into filterCategory.
How to fix this nuance?

@model ServiceViewModel
@using Kendo.Mvc.UI

.....
<div class="row">
            <div class="col">
                @(Html.Kendo().ComboBox()
                    .Name("CategoriesServiceDrop")
                    .Value(Model.CategoriesService)
                    .AutoBind(true)
                    .HtmlAttributes(new { style = "width:100%;"})
                    .Placeholder("Выбор категории...")
                    .DataTextField("Category")
                    .DataValueField("IdCategory")
                    .Filter(FilterType.Contains)
                    .DataSource(source => source.Read(read => read.Action("CategoryServis_Read", "ServiceSubmit")))
                )
            </div>
            <div class="col">
                @(Html.Kendo().ComboBox()
                    .Name("CategoryPodServicesDrop")
                    .HtmlAttributes(new { style = "width:100%;"})
                    .Placeholder("Выбор детальной категории...")
                    .DataTextField("CategoryPod")
                    .Value(Model.CategoryPodServices)
                   // .DataValueField("Id")
                    .Filter("contains")
                    .DataSource(source => source.Read(read => read.Action("CategoryPodServis_Read", "ServiceSubmit").Data("filterCategory")).ServerFiltering(true))
                    .AutoBind(false)
                    .Enable(false)
                    .CascadeFrom("CategoriesServiceDrop")
                )
            </div>
        </div>
.....

Hello,

I am using upload as an editor template inside grid. But the actual file selected is not being passed to the controller. The controller save method always shows 0 files. Am I missing something here?

Please find the code snippets below.

Grid:

@(Html.Kendo().Grid<DocumentViewEditModel>
    ().Name("Documents").Columns(c =>
    {
    c.Command(command => { command.Edit(); command.Destroy(); }).Width(220).Visible(@readOnlyForm);
    c.Bound(d => d.DocumentId).Hidden(true);
    c.Bound(d => d.ProjectId).Hidden(true);
    c.Bound(d => d.ScagdocumentId).Title("SCAG Document").Width(140);
    c.ForeignKey(d => d.DocumentCategoryId, (SelectList)ViewData["DocumentCategoryList"]).Title("Document Status *").Width(150);
    c.ForeignKey(d => d.NoticeTypeId, (SelectList)ViewData["NoticeTypeList"]).Title("Notice Type *").Width(220);
    c.ForeignKey(d => d.EirtypeId, (SelectList)ViewData["DocumentTypeList"]).Title("Document Type *").Width(250);
    c.Bound(d => d.DocumentDescription).Title("Project Description *").Width(350).HtmlAttributes(new { style = "white-space: pre-line;" });
    c.Bound(d => d.LogDate).Title("Date Received *").Format("{0: MM/dd/yyyy}").Width(170);
    c.Bound(d => d.DueDate).Title("Due Date for Comment").Format("{0: MM/dd/yyyy}").Width(180);
    c.Bound(d => d.DateModified).Title("Date Modified").Format("{0: MM/dd/yyyy}").Width(120);
    c.Bound(d => d.ModifiedBy).Title("Modified By").Width(130);
    c.Bound(d => d.DocumentUploadEditor).EditorTemplateName("DocumentUploadEditor").Title("Upload").ClientTemplate("#:Filename#").Width(150);
    c.Command(command => command.Custom("View").Click("navigateToOpen")).Width(190);
    })
    .DataSource(d => d
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Read(r => r.Action("GetDocuments", "Projects").Data("getAdditionalData"))
    .Update(u => u.Action("UpdateDocuments", "Projects"))
    .Destroy(x => x.Action("DeleteDocuments", "Projects"))
    .Create(c => c.Action("CreateDocuments", "Projects").Data("getAdditionalData"))
    .PageSize(10)
    .Model(m =>
    {
    m.Id(d => d.DocumentId);
    m.Field("DocumentCategoryId", typeof(int));
    m.Field("NoticeTypeId", typeof(int));
    m.Field("EirtypeId", typeof(int));
    m.Field(d => d.DocumentDescription);
    m.Field(d => d.LogDate);
    m.Field(d => d.DueDate);
    m.Field("ScagdocumentId", typeof(string)).Editable(false);
    m.Field(d => d.ModifiedBy).Editable(false);
    m.Field(d => d.DateModified).Editable(false);
    m.Field("ProjectId", typeof(int));
    })
    )
    .Pageable()
    .Sortable()
    .Scrollable(s => s.Virtual(GridVirtualizationMode.Columns).Height("auto"))
    .HtmlAttributes(new { style = "width:1420px" })
    .Editable(e => e.Mode(GridEditMode.InLine))
    .ToolBar(toolbar => { if (@readOnlyForm) { toolbar.Create(); } })
    )

Editor Template:

@(Html.Kendo().Upload()
        .Name("DocumentUploadEditor")
        .Async(a => a
            .Save("UploadNoticeObjects", "Projects")
            .AutoUpload(true)
        )

        .Events(e => e.Upload("onNoticeUpload")
                .Success("onSuccess"))

 )

Controller:

I am trying to do ServerPaging with this example from telerik:  https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/grid/razor-pages-custom-datasource-date-editing/RazorPageGridTest/Pages/Customer

I have modified OnPostReadRecords by adding [DataSourceRequest] DataSourceRequest request

public JsonResult OnPostReadRecords([DataSourceRequest] DataSourceRequest request)

And I have added .ServerPaging(true) to the grid definition.

The resulting value of request is default and the page number is always '1'.

I am new to the telerik controls, so it's really like casting spells for me.

Hello,

When using HtmlHelper I can do something like this if I want to change the UpdateText and CancelText to blank: 

columns.Command(command => {
    command.Edit()
    .Text(" ")
    .UpdateText(" ")
    .CancelText(" ")
    .HtmlAttributes(new { title = "Edit" });

    command.Custom("Destroy")
    .Click("showDeleteConfirmation")
    .IconClass("k-icon k-i-trash")
    .Text(" ")
    .HtmlAttributes(new { title = "Delete" });
}).Width(75);

How do I accomplish the same thing with TagHelper? I tried checking to see if there's a canceltext or updatetext attribute but there is none. 

<column width="75" title="Commands">
    <commands>
        <column-command text=" " name="edit" title="Edit" ></column-command>                      
        <column-command text=" " name="cancel" title="Cancel" ></column-command>
    </commands>
</column>

Thank you.

Context: This is an ASP.NET Core 6 project using MVC controllers.  I have successfully gotten Grid widgets to work on another page which shares the same _Layout as the below page.  As a result, I think it's unlikely that my issue is related to how Kendo is installed in the project.

The Problem

I am attempting to add a searchable DropDownList to my project.  Though my ultimate goal is to use Virtualization to allow the search of a very large number of objects, I am unable to get the widget to function with a much small set of test data.  No matter how I attempt to configure the widget or change how I pass data back to it I get the same result:

I have confirmed via the Visual Studio debugger that my Json response contains the correct data and contains no values that are null or empty. 

My Code:

View

Note: SamAccountName is the field that should be displayed, used for text search, and selected as a value by the user.

Controller

Domain Model

As stated, the current code is much more simple than what I will eventually require, but I cannot even get this to work.  I have tried structuring the controller about a hundred different ways, and the only change is that sometimes I get an error saying a field can't be recognized.  Is this something to do with how I'm structuring my Json?  

I've been beating my head against this for almost 2 days now, I could really use some help.

How can I do color text hyperlink in Telerik ASP.NET Core Grid?

We have a context menu on an icon at the right of a grid. When we open a context menu, it initially opens with much of the menu hidden off the edge of the screen (see first attached image). If I open it again, the open position shifts so the whole menu is visible.

Ideally, what we would like is when the context menu opens, it is rendered so the right edge of the menu is aligned with the mouse cursor position rather than the left (don't really care if the menu text is left or right justified) (see second attached image)

I tried wrapping the context menu with a div which include the k-rtl class, but this made no difference.

Is this possible?

Currently using tagHelpers with UI for ASP.NET Core 2022.3.1109.

I have set up a kendo window to popup from a grid command. On the window is a form with cascading drop down lists and an optional input field. How do I set up kendo validation for the form in the template?

This is my template. Note, the inputs in this form are not bound to fields in the model for my view. This is a stand alone form separate from the model for the page.

<script type="text/x-kendo-template" id="AssignInventoryTemplate">

    <form id="AssignInventoryForm" class="k-edit-form-container" action="@Url.Action("AssignInventory", "Inventory")" method="post" kendo-validator="true">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="inventoryId" name="inventoryId" value="#:data.Id#" />
        <input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
        @Html.AntiForgeryToken()

        <div class="k-edit-label">
            <label>Assignment Type</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("assignmentTypeId")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignment Type")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                    });
                })
                .HtmlAttributes(new { required = "required", validationmessage = "Assignment type is required" })
                .ToClientTemplate()
            )
        </div>

        <div class="k-edit-label">
            <label>Assign To</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("assigneeId")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignee")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("assignmentTypeId")
                .HtmlAttributes(new { required = "required", validationmessage = "Assignee is required" })
                .ToClientTemplate()
            )
        </div>

        # if(data.BulkItems) { #
            <div class="k-edit-label">
                <label>Quantity To Assign</label>
            </div>
            <div class="k-edit-field">
                <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                    <input id="quantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="quantityToAssign" value="1" required="required" validationMessage="Quantity to assign is required">
                </span>
                <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="quantityToAssign" id="quantityToAssign_validationMessage" data-valmsg-for="quantityToAssign">
                    <span class="k-tooltip-icon k-icon k-i-warning"></span>
                    <span class="k-tooltip-content">The Quantity To Assign field is required.</span>
                    <span class="k-callout k-callout-n"></span>
                </div>
            </div>
        #}#

        <div class="k-edit-buttons k-actions-end">
            <button type="button" onclick="AssignInventorySubmit(event)" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
                <span class="k-icon k-i-check k-button-icon"></span>
                <span class="k-button-text">Save</span>
            </button>
        </div>
    </form>

</script>

This is the submit handler

function AssignInventorySubmit(e) {
    var validator = $("#AssignInventoryForm").data("kendoValidator");
    if (validator.validate())
        $("#AssignInventoryForm").submit();
}

This is the error I'm getting in the console

Uncaught TypeError: can't access property "validate", validator is undefined
    AssignInventorySubmit http://localhost:55614/Inventory:209
    onclick http://localhost:55614/Inventory:1
3 Inventory:209:17

I'm trying to add Kendo widgets to an ASP.NET Core 6 project that uses an MVC template.  Which NuGet package do I need?  The one for ASP.NET MVC or the one for ASP.NET Core?  

I apologize if this is question has an obvious answer, I've been developing in .NET for < 1 year and was not able to figure this out via searching.

I'm also struggling to know which version of the package I need.  If I do need the ASP.NET Core package, then should I use the most current stable release? That looks like it installs a large number of .NET 7.0 dependencies I don't need.