Questions on UI for ASP.NET MVC Forum

1 answer

92 views

[Solved] MVC Grid sort on editortemplate dropdownlist column

Hi, I'm asking about an answer posted in the Sorting Grid on Editor Template column post back in 2017. The answer was from Georgi and here is the excerpt:

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    // Check if any sorts have been applied.if (request.Sorts != null)
    {
        // Loop through each sort.foreach (var sort in request.Sorts)
        {
            // Check if the Category column is being sortedif (sort.Member == "Category")
            {
                // Sort by the CategoryName instead of the Object.
                sort.Member = "Category.CategoryName";
            }
        }
    }
}
 
My grid column coincidentally also has to do with categories.  I tried adding the above code to my read method and it doesn't work.  When I click on the header to sort the column it doesn't automatically initiate a read call so I'm not sure how this could work.  I guess I'm missing something.
My grid definition:
@(
Html.Kendo().Grid<LookupItem>()
    .Name("LookupList")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden(true);
        columns.Bound(m => m.CategoryListItem).ClientTemplate("#: CategoryListItem.CategoryName #").EditorTemplateName("LookupCategoryDropDown").Width("25%"); ;
        columns.Bound(m => m.Name).Width("25%");
        columns.Bound(m => m.Value).Width("15%");
        columns.Bound(m => m.AlternativeValue).Width("15%");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add New Lookup Item"); })
    .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Are you sure you want to delete this item?"))
    .Sortable()
    .Scrollable()
    .Filterable(filterable => filterable.Extra(false))
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(50)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(m => m.Id);
            model.Field(m => m.Category);
            model.Field(m => m.Name);
            model.Field(m => m.Value);
            model.Field(m => m.AlternativeValue);

        })
        .Read(read => read.Action("Lookup_Read", "Lookup"))
        .Create(create => create.Action("Lookup_Create", "Lookup"))
        .Update(update => update.Action("Lookup_Update", "Lookup"))
        .Destroy(read => read.Action("Lookup_Delete", "Lookup"))
    )
My Controller Read Method:
 public async Task<IActionResult> Lookup_Read([DataSourceRequest] DataSourceRequest request)
 {
     if (request.Sorts != null)
     {
         // Loop through each sort.
         foreach (var sort in request.Sorts)
         {
             // Check if the Category column is being sorted
             if (sort.Member == "CategoryListItem")
             {
                 // Sort by the CategoryName instead of the Object.
                 sort.Member = "CategoryListItem.CategoryName";
             }
         }
     }
     var model = await _service.GetAllLookupTypesAsync();
     var result = model.ToDataSourceResult(request);
     return Json(result);

 }

DropDownList

Grid

answered on 27 Jan 2026

1 answer

57 views

Enable Combo Box for Grid Column and Export the grid to Excel

Hi,

We have a requirement, where we have a kendo grid, from the grid columns we need one or multiple columns as a dropdown/combobox.

Along with the above requirement we have the below requirements.

1. Grid column with Dropdown/Combobox should work when paste in grid
2. Export also should work with dropdown/combobox columns.

To add new rows in the grid, we have to copy the rows from excel and paste in the grid, so after the paste all the new records should appear even in the dropdown/combobox field. The export is a client side export.

And for the grid we have a button for exporting the grid data in excel. If for specific column which will be dropdown/combobox which will be of complex type then after export how that column will display in the excel.

Note: We have already tried with dropdownlist in the grid. We created a UI component and user that inside EditorTemplateComponentName

in the cshtml file. We are able to render the dropdown for that particular column inside the grid. But the problem is with dropdownlist column when we try to copy and paste records from excel to grid, paste is not working for dropdown column.

And also the dropdown column is a complex type so when we export the grid, the dropdown column value is not render in the excel file.

So, we are thinking to achieve the above requirements with a combo box, please provide the solution for the above requirements.

ComboBox

DropDownList

Grid

answered on 23 Jan 2026

1 answer

49 views

What version of DOMPurify is used within Progress Telerik UI for ASP.NET Core version 2025.4.1217

What version of DOMPurify is used within Progress Telerik UI for ASP.NET Core version 2025.4.1217?

General Discussions

answered on 19 Jan 2026

1 answer

155 views

Kendo grid Edit Popup Not opening with CSP

I have a asp.net mvc kendo grid with Edit option in each row, on click it brings the data from Editor Template(its having a kendo dropdown in it) I have implemented CSP globally. Grid having Deferred() in it. Grid works fine with its basic get records.

After CSP . Edit click is not opening the popup. Shows console error with invalid template.

followed by the entire page html code.

How to eliminate this. How to use Edit with CSP.

Grid Example:

@(Html.Kendo().Grid((IEnumerable<test>)Model)
.Name("test")
.DataSource(datasource => datasource.Ajax().Read(read => read.Action("GetRecords", "Test").Type(HttpVerbs.Get)))
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text("Edit"); }).Width(75);
columns.Bound(p => p.Id).Title("ID").Width(130);
columns.Bound(p => p.Name).Title("Name").Width(130);
columns.Bound(p => p.Date).Title("Date").Width(150);
})
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp).TemplateName("Edit_Details");
})
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
})
.Update(update => update.Action("EditDetails", "Test").Type(HttpVerbs.Post))
)
.Deferred()
)

Thanks,

Anupriya. R

Editor

Grid

Template

answered on 08 Jan 2026

2 answers

49 views

[Solved] Multimple autocomplete boxes, one filtering ajax datasource. How to pass the id of the box?

I have multiple autocomplete boxes and they all filter through the same AJAX datasource. I want to somehow pass the ID of the specific box to the AdditionalData javascript function so that I don't have to write like five different JavaScript functions with pretty much the same logic. I didn't see anything in the documentation and passing "e" in the AdditionalData function just passes the filter.

Razor:

<strong>To:</strong>  Html.Kendo().AutoComplete().Name("ToAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

<strong>CC:</strong>  Html.Kendo().AutoComplete().Name("ccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

            
<strong>BCC:</strong>  Html.Kendo().AutoComplete().Name("bccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

JavaScript

    function AdditionalData() {
        var text = $("[the autocomplete id]").val();  //get the ID or any other identifier
        var i = text.indexOf(";");
        var value = text.substring(i + 1);
        return {
            text: value
        }
    }

AutoComplete

answered on 08 Dec 2025

0 answers

318 views

Error reporting while Creating Build throught GIT-Hub CI Process

Hi team,

We recently upgraded Telerik ASP.Net MVC to 2025.3.825, All the changes are good But when we try to create build the code through GIT-Hub CI/CD process getting below error.

Can you please help us to resolve the issue.

D:\actions-runner\_work\TestProject\Source\Test\packages\Telerik.Licensing.1.6.16\build\Telerik.Licensing.targets(29,3):
error MSB4062: The "Telerik.Licensing.Tasks.ResolveTelerikProducts" task could not be loaded from the
assembly D:\actions-runner\_work\TestProject\Source\Test\packages\Telerik.Licensing.1.6.16\build\..\tasks\netstandard2.0\Telerik.Licensing.Tasks.dll.
Could not load file or assembly 'Microsoft.Build.Utilities.Core, Version=15.1.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or
one of its dependencies. The system cannot find the file specified. Confirm that the <UsingTask> declaration is correct,
that the assembly and all its dependencies are available, and that the task contains a public class that
implements Microsoft.Build.Framework.ITask. [D:\actions-runner\_work\TestProject\Source\Test\Test.Web\Test.Web.csproj]

Licensing

asked on 11 Nov 2025

2 answers

142 views

License Runtime Error

I just upgraded my application and now I am getting a license runtime error.

Here is the exact error I am receiving:

Could not load file or assembly 'Telerik.Licensing.Runtime, Version=1.6.5.0, Culture=neutral, PublicKeyToken=98bb5b04e55c09ef' or one of its dependencies. The system cannot find the file specified.

I went through the steps to download the key and I received a message stating that my key was successfully downloaded.

Am I missing a step?

Thanks for your help!

Licensing

answered on 10 Nov 2025

1 answer

55 views

Change Default Operator

We have a column of type text, and want to change the default filter from 'equals' to 'contains'.

This doesn't seem to have any effect:

.Filterable(f => f.Cell(c => c.Operator("contains")))

This does not seem to work in the context of the MVC Grid: jQuery Set the Default Filter Operator in the Grid - Kendo UI for jQuery

Grid

answered on 07 Nov 2025

3 answers

110 views

Kendo Scheduler Recurrence Rule Causes DatePickers to Retain or Display Incorrect Values Across Views

I’m working on a legacy ASP.NET MVC application that leverages a custom Kendo Scheduler view (TestScheduler, extending Scheduler<ISchedulerEvent>).

We’ve noticed a recurring issue when editing recurring event series. Kendo DatePickers in the custom popup editor or other views end up displaying incorrect or “sticky” values, even though the underlying <input> element shows the correct value.

The CustomInput have multiple datefields like below, but all DateFields seems to be prefilled by the date cpart of the recurrence rule. This seems to also prefill all other DateFields in the page that use DatePicker component.

Observed Behavior

When editing a recurring series (with a RecurrenceRule like below):

DTSTART;TZID=Europe/London:20240626T090000
DTEND;TZID=Europe/London:20240626T170000
RRULE:FREQ=WEEKLY;BYDAY=TU

Question

Is this behavior expected when RecurrenceRule is applied, i.e., does Kendo’s Scheduler reuse a shared RecurrenceEditor instance or observable model across views?

Here's the sample code that is used while editing a schedule

<div id="DivMainContent" class="content-region">
    <div class="popup-box-head accent-colour-background clearfix">
        <div class="box-title normal-text left">
            Select Start and End Times
        </div>
        <div class="button-funcs right">
            <a href="javascript:void(0);" title="Save" id="repair-manage-diary-difference-btnadd">
                Save
            </a> | <a href="javascript:void(0);" title="Close" class="close">Close</a>
        </div>
    </div>
    <div class="popup-box-main fieldset start-end-popup">
<form action="/read/data" id="manage-diary-difference-new-frm" method="post"><input data-val="true" data-val-required="The DiaryDetailId field is required." id="DiaryDetailId" name="DiaryDetailId" type="hidden" value="152" /><input id="Timestamp" name="Timestamp" type="hidden" value="AAAAAAADEjI=" /><input id="TimestampString" name="TimestampString" type="hidden" value="AAAAAAADEjI=" /><input data-val="true" data-val-required="The Id field is required." id="OwnerDiary_Id" name="OwnerDiary.Id" type="hidden" value="25" /><input id="ParentCalendar_TimestampString" name="ParentCalendar.TimestampString" type="hidden" value="AAAAAAACldk=" /><input data-val="true" data-val-required="The CalendarId field is required." id="ParentCalendar_CalendarId" name="ParentCalendar.CalendarId" type="hidden" value="3" /><input data-val="true" data-val-required="The MondayWorking field is required." id="ParentCalendar_MondayWorking" name="ParentCalendar.MondayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The TuesdayWorking field is required." id="ParentCalendar_TuesdayWorking" name="ParentCalendar.TuesdayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The WednesdayWorking field is required." id="ParentCalendar_WednesdayWorking" name="ParentCalendar.WednesdayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The ThursdayWorking field is required." id="ParentCalendar_ThursdayWorking" name="ParentCalendar.ThursdayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The FridayWorking field is required." id="ParentCalendar_FridayWorking" name="ParentCalendar.FridayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The SaturdayWorking field is required." id="ParentCalendar_SaturdayWorking" name="ParentCalendar.SaturdayWorking" type="hidden" value="False" /><input data-val="true" data-val-required="The SundayWorking field is required." id="ParentCalendar_SundayWorking" name="ParentCalendar.SundayWorking" type="hidden" value="False" />            <div id="error-diary-difference-overlap">
                <span id="error-lable-manage-diary-difference-overlap" class="k-invalid-msg-custom">
                </span>
            </div>
            <div class="line clearfix">
                <label for="day-selected" class="field-text">
                    Select Day
                </label>
                <div class="fieldform">

                    <input data-uid="c0a5911c-7f0b-4e73-ba95-eaa9f2f733f2" data-val="true" data-val-range="Please enter Day" data-val-range-max="6" data-val-range-min="0" id="SelectedDays" name="SelectedDays" type="text" value="5" /><script>
	kendo.syncReady(function(){jQuery("[data-uid='c0a5911c-7f0b-4e73-ba95-eaa9f2f733f2']").kendoDropDownList({"change":NameSpace.RepairManageTimeSlots.ChangeWorkingDay,"dataSource":[{"Key":1,"Value":"Monday"},{"Key":2,"Value":"Tuesday"},{"Key":3,"Value":"Wednesday"},{"Key":4,"Value":"Thursday"},{"Key":5,"Value":"Friday"}],"animation":false,"dataTextField":"Value","height":300,"autoBind":true,"dataValueField":"Key","rounded":"null"});});
</script>

                </div>
            </div>
            <div class="line clearfix">
                <label for="start-time" class="field-text">
                    Start Time
                </label>
                <div>
                    <input data-val="true" data-val-required="Please enter Start time" id="StartTime" name="StartTime" type="text" value="00:00" /><script>
	kendo.syncReady(function(){jQuery("#StartTime").kendoTimePicker({"format":"HH:mm","min":new Date(2025,9,14,0,0,0,0),"max":new Date(2025,9,14,0,0,0,0),"interval":15});});
</script>
                    <span class="field-validation-valid" data-valmsg-for="StartTime" data-valmsg-replace="true"></span>
                </div>
            </div>
            <div class="line clearfix">
                <label for="end-time" class="field-text">
                    End Time
                </label>
                <div>
                    <input data-val="true" data-val-required="Please enter end time" id="EndTime" name="EndTime" type="text" value="23:59" /><script>
	kendo.syncReady(function(){jQuery("#EndTime").kendoTimePicker({"format":"HH:mm","min":new Date(2025,9,14,0,0,0,0),"max":new Date(2025,9,14,0,0,0,0),"interval":15});});
</script>
                    <span class="field-validation-valid" data-valmsg-for="EndTime" data-valmsg-replace="true"></span>
                </div>
            </div>
            <div class="line clearfix">
                    <label for="effective-from" class="field-text">
                        Effective from
                    </label>
                    <div class="fieldform">
                        <input data-val="true" data-val-required="Please enter Effective from" endDatePicker="EffectiveToDate" id="EffectiveFromDate" name="EffectiveFromDate" type="text" value="Wed, Oct 15 2025" /><script>
	kendo.syncReady(function(){jQuery("#EffectiveFromDate").kendoDatePicker({"change":NameSpace.RepairManageDiaryDifferences.startChangeCalendar,"open":Helpers.DatePicker.calendarOpen,"format":"ddd, MMM dd yyyy","parseFormats":["dd/MM/yyyy","ddd, MMM dd yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
                        <span class="field-validation-valid" data-valmsg-for="EffectiveFromDate" data-valmsg-replace="true"></span>
                    </div>
                </div>
            <div class="line clearfix">
                    <label for="effective-to" class="field-text">
                        Effective to
                    </label>
                    <div class="fieldform">
                        <input id="EffectiveToDate" name="EffectiveToDate" startDatePicker="EffectiveFromDate" type="text" value="Tue, Oct 21 2025" /><script>
	kendo.syncReady(function(){jQuery("#EffectiveToDate").kendoDatePicker({"change":NameSpace.RepairManageDiaryDifferences.endChangeCalendar,"open":Helpers.DatePicker.calendarOpen,"format":"ddd, MMM dd yyyy","parseFormats":["dd/MM/yyyy","ddd, MMM dd yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
                        <span class="field-validation-valid" data-valmsg-for="EffectiveToDate" data-valmsg-replace="true"></span>
                    </div>
                </div>
            <div class="line clearfix">
                <label for="effective-to-date" class="field-text">
                    Effective to date js
                </label>
                <div class="fieldform">
                    <input id="TestDate" name="TestDate" type="text" />
                    <script>
                        kendo.syncReady(function () {
                            jQuery("#TestDate").kendoDatePicker({
                                "format": "ddd, MMM dd yyyy",
                                "parseFormats": ["dd/MM/yyyy", "ddd, MMM dd yyyy"],
                                "min": new Date(1900, 0, 1, 0, 0, 0, 0),
                                "max": new Date(2099, 11, 31, 0, 0, 0, 0),
                                "change": function (e) {
                                    console.log("On Change of date picker");
                                    console.log(e);
                                    e.preventDefaut();
                                    var value = this.value();
                                    console.log(value);
                                }
                            });
                        });
                    </script>
                    <span class="field-validation-valid" data-valmsg-for="TestDate" data-valmsg-replace="true"></span>
                </div>
            </div>
            <div class="line clearfix">
                <label for="notes" class="field-text">
                    Comments
                </label>
                <div class="fieldform">
                    <input id="Notes" name="Notes" type="text" value="" />
                </div>
            </div>
</form>    </div>
</div>
<div id="DivMessage_AppointmentOutsite" style="display: none" class="content-region">
    <div class="popup-box-head accent-colour-background clearfix">
        <div class="box-title normal-text left">
            Confirm
        </div>
        <div class="button-funcs right">
            <a id="btnClose-appointmentOutside" href="javascript:void(0);" title="Close">Close</a>
        </div>
    </div>
    <div id="message-content" class="popup-box-content">Message.</div>
    <div class="YNButton clearfix" id="buttons-message">
        <button id='btnOk-appointmentOutside' type="button" title="Ok" class="active-background active-text">
            Ok
        </button>
    </div>
</div>

<div id='hiddenDiv1760456443763' style='display:none'></div>

DatePicker

DateTimePicker

Scheduler

answered on 21 Oct 2025

1 answer

197 views

Adding new row(Custom Button) to filtered kendo grid

Hi,

I have a kendo grid and in the page load kendo grid automatically have a new empty row. When we click on the + icon then it should create multiple rows in the grid.

The above functionality is working fine, but when we do a filter on any of the column then on filter click button it should display filtered row along with new empty row.

After click on filter button the empty row is not creating. I tried the below code on click on filter button it fires the Filter event but

its not creating the empty row. Can you please let me know how to add a new empty row on click of filter button.

.Events(ev => ev.Filter("onFiltering"))

function onFiltering() {
var gridName = "grid1";
var grid = $("#" + gridName).data("kendoGrid");

if (grid && grid.dataSource) {
grid.dataSource.cancelChanges();
var newRow = { field: "NewRow", Value: 0 };
grid.dataSource.add(newRow);
}

}

Filter

Grid

answered on 01 Oct 2025