Questions on UI for ASP.NET MVC Forum

1 answer

225 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

57 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

351 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

165 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

67 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

122 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

292 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

1 answer

66 views

Can you preload deafult option into a telerik dropdownlist?

I am trying to preload deafult value that will always exist in this downdownlist no matter when. Then load in another list from the data base behind it base on other factors. See test code below.

@(Html.Kendo().DropDownList()
                    .Name("groupTypeFilter")
                    .HtmlAttributes(new { @class = "form-select", data_alpa = "filter", onchange = "ApplyFilter(this)" })
                    .OptionLabel("All")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<SelectListItem>
                    {
                        new SelectListItem { Text = "All", Value = "all" },
                        new SelectListItem { Text = "All GMS Groups", Value = "allgms" },
                        new SelectListItem { Text = "All MECCOM Groups", Value = "allmeccom" }
                    })  
                    .DataSource(config => config.Read("GetGroupTypes", "Group"))
                    )
 

 public JsonResult GetGroupTypes()
        {
            var groupTypes = new List<SelectListItem>
            {
                new SelectListItem { Text = "All", Value = "ALL" },
                new SelectListItem { Text = "GMS", Value = "GMS" },
                new SelectListItem { Text = "MEC/COM", Value = "MEC/COM" }
            };
            return Json(groupTypes);
        }
 
It seems to be only load the data from the data call and not the deafult data that I loaded into it

DropDownList

answered on 29 Sep 2025

1 answer

135 views

Grid components without ids - how to find components in ui automated tests like cypress

Hello everyone
i have to create some cypress tests and figured out that nested grid components like the header date time filters do not have any ids or data-role-ids.
is there a way to "enable" them?
i can find components searching by Title (like $(e.container).find('select[title="Operator"]'); or $(e.container).find('select[title="Additional operator"]');) but it's not 100% safe

answered on 25 Sep 2025

0 answers

104 views

Kendo grid get API is calling twice with strict CSP

Hi,

I have a strict CSP implemented in the Program.cs file, after that when I verified the browser developer tool then I can see the get API is called 2 times.

Can you please let me know why this get API is called 2 times.

When I analyze I found that Kendo Panelbar Select event is called twice so internally the Get API is called twice.

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Events(ev => ev.Select("OnSelect_Panel"))
.Items(panelbar =>
{
panelbar.Add().Text("Test Panel");
})

function OnSelect_Panel(sender) {

}

Inside the OnSelect_Panel() method is calling twice so the GET API also called twice. How can I restrict to one API call.

Note: Without strict CSP OnSelect_Panel() is called once but with strict CSP it called twice.