UI for ASP.NET MVC Forum RSS

Latest Online Resources about UI for ASP.NET MVC

Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/aspnet-mvc/documentation/ai-components-and-features
Summary: This article shows how to integrate LLM features in ASP.NET MVC apps using Telerik UI’s AI components, focusing on the AIPrompt and related server-side helpers. You’ll configure OpenAI or Azure OpenAI providers, proxy requests through an MVC controller to protect API keys, and control behavior such as streaming responses, system messages, and prompt templates with clear setup and customization examples.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/diagram/binding
Summary: Bind the Kendo UI Diagram for ASP.NET MVC to local or remote data so shapes and connections are generated from your models. Configure the Diagram and Connections DataSource with the MVC fluent API—define model fields (Id, Text, X/Y, Width/Height, Type; From/To), map the schema, and set read/create/update/destroy actions—to control loading, layout, linking, and persistence.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 05 Nov 2025 to 10 Nov 2025:

Article: https://www.telerik.com/blogs/hiding-revealing-mobile-content-aspnet-mvc-responsive-panel
Summary: Learn how to use the Kendo UI ResponsivePanel in ASP.NET MVC to hide and reveal mobile content (such as navigation and sidebars) based on viewport width. The article shows initialization via the MVC HtmlHelper and HTML5 data attributes, configuring breakpoints, toggle targets, and auto-hide behavior, and handling open/close events and CSS to control layout and accessibility.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/tabstrip/binding/ajax-binding
Summary: Configure the Telerik UI for ASP.NET MVC TabStrip to load tab content on demand via AJAX using .LoadContentFrom or .ContentUrl, with controller actions that return PartialView results. Handle select/contentLoad/error events, optional caching, and route values as needed to optimize page load and keep tab content modular and maintainable.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/listview/binding/overview
Summary: This article explains how to bind the ASP.NET MVC ListView to data: bind directly to an IEnumerable

Feel free to check them out and share your thoughts!

The Telerik Team

Telerik UI for ASP.NET MVC versioning feedback

We need your feedback, because we are considering changes in the release approach for Telerik UI for ASP.NET MVC. Please provide your feedback in the comments section below:

1. Is it hard to understand the version numbers of our releases? If yes, what makes them hard to understand them?

2. Would semantic versioning (SemVer) of our releases make it easier to understand our version numbers and what's behind them?

3. If we go with SemVer, we might need to start with version 3000.0.0 as we currently use 2022.x.x. Please share your thoughts about this approach and ideas for what number versioning would work best for you.

Call Center Garuda Medan

Untuk layanan Garuda Indonesia di Medan, Anda dapat menghubungi melalui Call Center 0855 3 333 974 atau (021) 2351 9999 dan 0804 1 807 807 untuk pusat panggilan.

Cara pembatalan Pinjaman Akulaku 100% Berhasil

Hubungi Call Center (Akulaku) di nomor (083848484874) atau melalui email ke cs@akulaku.com. Sampaikan permintaan pembatalan pengajuan pinjaman dan berikan alasan anda melakukan pembatalan...

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]

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!

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

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>

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);
}

}

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

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

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.

Two Draggable Grids

I have two draggable grids, but the second has no drop point, just a circle with a line through it. Can you tell me why the second grid allows me to drag the row but no where to drop?

// QUESTIONS
tab.Add().Selected(true).Text("Questions").Content(@<text>
@(Html.Kendo().Grid<TemplateQuestionVM>()
.Name("AI_TemplateQuestionGrid")
.ToolBar(toolbar =>
{
if (Model.TemplateId != 0) toolbar.New("TemplateQuestionEdit", "Template Question", $"AI/TemplateQuestion/edit?parentId={Model.TemplateId}");
toolbar.SuperSearchWindow("TemplateEdit", "AI_TemplateQuestionGrid");
})
.Height(600)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(s => s.Add("Sequence"))
.Read(read => read.Action("Read", "TemplateQuestion", new { parentId = Model.TemplateId }).SuperSearchWindow("TemplateEdit", "AI_TemplateQuestionGrid"))
.Model(m => m.Id(f => f.TemplateQuestionId))
)
.Columns(columns =>
{
columns.Bound(c => c.TemplateQuestionId).Width(1).Title("").Filterable(false);
columns.Bound(c => c.Sequence).Width(80).Title("Seq").Filterable(false);
columns.Template("").Draggable(true).Width(80);
columns.Bound(c => c.QuestionName).Title("Question").Filterable(false);
columns.Bound(c => c.TemplateQuestionId).Edit("TemplateQuestionEdit", "Template Question", "AI/TemplateQuestion/edit/#=TemplateQuestionId#");
})
.Filterable()
.Scrollable()
.Sortable()
.Reorderable(order => order.Rows(true))
.Events(ev => { ev.RowReorder("function(e) { dragRow(e, 'AI_TemplateQuestion', 'TemplateId', " + Model.TemplateId + "); }"); })
)</text>);

// VARIABLES
tab.Add().Selected(false).Text("Variables").Content(@<text>
@(Html.Kendo().Grid<TemplateVariableVM>()
.Name("AI_TemplateVariableGrid")
.ToolBar(toolbar =>
{
if (Model.TemplateId != 0) toolbar.New("TemplateVariableEdit", "Template Variable", $"AI/TemplateVariable/edit?parentId={Model.TemplateId}");
toolbar.SuperSearchWindow("TemplateEdit", "AI_TemplateVariableGrid");
})
.Height(600)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(s => s.Add("Sequence"))
.Read(read => read.Action("Read", "TemplateVariable", new { parentId = Model.TemplateId }).SuperSearchWindow("TemplateEdit", "AI_TemplateVariableGrid"))
.Model(m => m.Id(f => f.TemplateVariableId))
)
.Columns(columns =>
{
columns.Bound(c => c.TemplateVariableId).Width(1).Title("").Filterable(false);
columns.Bound(c => c.Sequence).Width(80).Title("Seq").Filterable(false);
columns.Template("").Draggable(true).Width(80);
columns.Bound(c => c.VariableCode).Width(200).Title("Variable").Filterable(false);
columns.Bound(c => c.VariableName).Title("Name").Filterable(false);
columns.Bound(c => c.VariableType).Width(200).Title("Type").Filterable(false);
columns.Bound(c => c.TemplateVariableId).Edit("TemplateVariableEdit", "Template Variable", "AI/TemplateVariable/edit/#=TemplateVariableId#");
})
.Filterable()
.Scrollable()
.Sortable()
.Reorderable(order => order.Rows(true))
.Events(ev => { ev.RowReorder("function(e) { dragRow(e, 'AI_TemplateVariable', 'TemplateId', " + Model.TemplateId + "); }"); })
)</text>);

Child/Detail grid column aggregate SUM coming as 0

Hi Team,

I want to show the sum of a decimal data type column at the bottom of child grid column in kendo ui mvc 4?
I am using below approach but always getting the sum as 0. Please guide on this.

.Columns(columns =>

{

      //..

       columns.Bound(p => p.amount)

           .HeaderTemplate("Amount")

           .ClientFooterTemplate("Sum: \\#=sum\\# ");

      //..

})

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates => {

aggregates.Add(p => p.amount).Sum();

})

.Read(read => read.Action("Invoice_Read", "ProjectsInvoice", new { projectCode = "#=projectCode#" }))

)

Grid Accessibility Issue

Hi,

My job is using the ANDI Accessibility Tool to test for accessibility and Section 508 compliance.

The tool keeps telling me that the, "Grid Element has no accessible name." I have tried all of the suggestions listed in your online Grid Accessibility document. However, I'm still getting the same message.

I also used the ANDI tool on your accessibility grid example and I received the same message.

Can someone assist me with this issue?

ANDI is a free Chrome Extension: https://chromewebstore.google.com/detail/unofficial-andi/fehcidpnbiemiekbbgligjlgjbhjchon.

I am including the results from my application and from your online demo grid.

Thanks,

Trena

How to pass a value to external Web API call

I am trying to call an external web api with the autocomplete but can't seem to pass the autocomplete value as I need to. I need to pass the value at the end of the URL like: https://webapiurl/api/{value} . The farthest I got is passing the value but as a querystring parameter (https://webapiurl/api?name=value), this doesn't work, I get a 404 error. How can I concatenate the value at the end of the URL?

@(Html.Kendo().AutoComplete().Name("auto")
    .DataTextField("Name")
    .Filter("contains")
    .MinLength(4)
    .DataSource(source =>
        {
            source.Read(r =>
            {
                r.Url("https://webapiurl/api")
                    .Data("onAdditionalData");
            })
            .ServerFiltering(false);
        })
    )

<script>
    function onAdditionalData() {
        return {
            name: $("#auto").val()
        };
    }
</script>

DatePicker TimeZone Issue

Hi Team,

I am using kendo date picker for in custom editor template for a kendo grid for pop up editing which is bind to datetime field of the model, now while displaying the value in the kendo date picker in custom editor template the value is displayed according to the user/client machine time zone which is changing the date value when the user is in some other time zone other than EST as application server is in EST , how to resolve the display issue in the kendo date picker for??
I am using the below code in custom editor template.
Please guide how to resolve this?

<div class="editor-field">
        @(Html.Kendo().DatePickeFor(m=>m.EndDate)
            .Format("MM/dd/yyyy")
            .Value(Model.EndDate)
           )
        @Html.ValidationMessageFor(m => m.EndDate)
</div>

Cancel remove operation within onRemove event

Is there a way to cancel item remove in the remove event handler? Something similar to preventDefault()

Kendo Dropdown List Inside Panel Bar Not Initializing After CSP

Problem:
After enabling Content Security Policy (CSP), Kendo DropDownLists inside a PanelBar fail to initialize. On page load:
• The DropDownList renders as a plain input box.
• PanelBar items appear empty, and data binding does not happen.
• JavaScript access to the DDL fails.

Scenario:
• ASP.NET MVC Razor.
• Dropdown Lists inside PanelBar content templates.
• Worked fine before CSP; now initialization and binding fail.

Expected Behavior:
• DDL should initialize and bind data on content load even with CSP.
• PanelBar items should display properly.

Example:

@(
Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{
panelbar.Add().Text("Note : Please fill all the input")
.Content(@<text>
@(Html.Kendo().DropDownList()
.Name("dropdown")
.OptionLabel("Please Select")
.OptionLabelTemplate("<span style='color:dimgrey;font-size:10px;font-weight:bold'>Please Select</span>")
.DataValueField("id")
.DataTextField("Text")
.Template("#:id # - #:datacolumn # - #:datecolumn #")
.DataSource(source=>{source.Read(read=>{read.Action("action","controller");});})
.Events(e=>{e.Select("onselect");})
)
</text>
);

Thanks,

Anupriya. R

Kendo Grid Filter throwing javascript error when bound to remote api filter data

hi, I am trying to populate Kendo MVC Grid filter with remote api data but getting js error. Could you help on fixing it? Please find the code snippets and js error below

C# Grid:

@(Html.Kendo().Grid<AggregateModel>()
...
.columns.Bound(e => e.AccountType)
       .Title("Account Type").Width(100)
       .Filterable(f => f.Multi(true).Search(true).DataSource(ds => ds
          .Read(read => read.Type(HttpVerbs.Get).Url("api/AccountTypeFilters")
          .Data("{ field: 'AccountType' }"))));

API Response (api/AcountTypeFilters) : with Text and Value fields

{
    "$id": "1",
    "AccountType": [
        {
            "$id": "2",
            "Disabled": false,
            "Group": null,
            "Selected": false,
            "Text": "Client",
            "Value": "0"
        },
        {
            "$id": "3",
            "Disabled": false,
            "Group": null,
            "Selected": false,
            "Text": "House",
            "Value": "1"
        }
    ]
}

js error:

Uncaught TypeError: n.slice is not a function
    at init.success (kendoscripts.min.js?v=2-0-289-1:1:101049)
    at success (kendoscripts.min.js?v=2-0-289-1:1:100001)
    at i.success (kendoscripts.min.js?v=2-0-289-1:1:88721)
    at v (headerscripts.min.js?v=2-0-289-1:14:35030)
    at Object.fireWith [as resolveWith] (headerscripts.min.js?v=2-0-289-1:14:35775)
    at b (headerscripts.min.js?v=2-0-289-1:14:74792)
    at XMLHttpRequest.<anonymous> (headerscripts.min.js?v=2-0-289-1:14:79897)
    at XMLHttpRequest.wrapFn (webcomponents.js?v=2-0-289-1:2996:35)
    at _ZoneDelegate.invokeTask (webcomponents.js?v=2-0-289-1:2626:171)
    at ZoneImpl.runTask (webcomponents.js?v=2-0-289-1:2425:37)

Kendo.Mvc, Version=2022.1.412.0
Kendo UI js v2018.3.911

Icon on dialog action buttons not showing after upgrading to 2025.1.227

I had the code below in my dialog to show icons in the action buttons. It worked on version 2023 R3. After upgrading to 2025.1.227, all it shows is the code (<span>) text.

Code:

@(Html.Kendo().Dialog()
    .Name("LetterPreviewDialog")
    .Title("Letter Preview")
    .Closable(true)
    .Modal(true)
    .ButtonLayout("normal")
    .Visible(false)
    .Events(e=>e.Close("OnLetterPreviewClose"))
    .Actions(a =>
    {
        a.Add().Text("<span class='k-icon k-font-icon k-i-envelop'></span> Send Letter").Primary(true).Action("SendEmail");
        a.Add().Text("<span class='k-icon k-font-icon k-i-cancel'></span> Cancel").Action("CancelEmail");
    }))

Before:

After:

Custom Command not working after setOptions

We have this Command:

columns.Command(c =>
{
    c.Custom("Delete").Text(" ").Click("onClick").IconClass("k-icon k-i-trash").HtmlAttributes(new { @title = Resource.DELETE });
})

And we have this function to set the grid state:

function loadOptions() {
    var options = sessionStorage["userTable-options"];
    
    if (options) {
        var grid = $('#userTable').data('kendoGrid');
        var toolBar = $("#userTable .k-grid-toolbar").html();  // https://stackoverflow.com/questions/27717575/kendo-mvc-persist-and-load-grid-buttons

        var optionsJSON = JSON.parse(options);

        // https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-customized-filter
        var StatusTranslated = optionsJSON.columns.filter(function (c) { return c.field === "StatusTranslated.Text"; })[0];

        StatusTranslated.filterable = {
            ui: $.proxy(filterDropDownField, { field: 'StatusTranslated' })
        };

        grid.setOptions(optionsJSON);
        $("#userTable .k-grid-toolbar").html(toolBar);
        $("#userTable .k-grid-toolbar").addClass("k-grid-top");
    }
}

Before setting the grid state the button executes successfully. After executing setOptions the button does not work anymore.

How do we combine the possibility to save/load the grid state, and the usage of custom buttons in the grid?

Kind regards.

set defaults for grid filters drop down

How can I influence the drop down filters so that both start with the operator 'Contains' and the logic between them as 'or'.

They should be able to change them after initial setting. i would like it to look like the enclosed image to start.

Kendo Grid columnMenuInit and Filter Operator Restore Not Firing After Sort

Hi,

I’m using the Kendo UI Grid with column menu filters. My requirement:

Let the user pick a filter operator (e.g., contains, equals).
Don’t apply a filter if the value is empty.
Keep the operator visible every time the 3-dot menu opens, even after sorting.

What I’ve tried:

columnMenuInit → Works first time, but doesn’t fire again for the same column.
Popup open inside columnMenuInit → Fires once, but after sorting the grid, it doesn’t trigger again.
Delegated jQuery click handler → Works reliably, but feels like a hack.

Minimal repro (MVC wrapper):


@(Html.Kendo().Grid<MyModel>()
    .Name("Invoices")
    .Columns(c => {
        c.Bound(x => x.InvoiceNumber);
        c.Bound(x => x.CustomerName);
    })
    .Sortable()
    .Filterable(f => f.Extra(false))
    .ColumnMenu(m => m.Filterable(true))
    .Events(e => e.ColumnMenuInit("onColumnMenuInit"))
)

<script>
function onColumnMenuInit(e) {
    var popup = e.container.data("kendoPopup");
    if (popup) {
        popup.bind("open", function () {
            var ddl = e.container.find("select[title='Operator']").data("kendoDropDownList");
            if (ddl) ddl.value("contains"); // operator only, no value
            e.container.find("input[type=text]").val("");
        });
    }
}
</script>

Issue:

The operator shows correctly the first time.
After sorting and reopening the menu, the operator reset logic does not run.

Questions:

Is there an official event I can use to run logic every time the column menu opens?
What’s the recommended way to restore operator state when no filter value is applied?

Thanks!

Kendo Grid Bool Filter UI Issue

How can I fix this, surely they are meant to be side by side, Ideally I would like to change the is true to labels also?

DropDownButton not available in older version of Kendo UI for ASP.NET MVC

Hello Telerik support team,

I have an ASP.NET MVC project made in .NET Framework 4.6.2

It is using a local directory with files of version 2022.2.510 of Kendo UI. These are the contents of /lib/KENDOUIMVC/2022.2.510.545 of my project:

Kendo.Mvc.dll*  cs-CZ/            el-GR/   fr-FR/  pl-PL/  ru-RU/        tr-TR/
Kendo.Mvc.xml   da-DK/            es-ES/   he-IL/  pt-BR/  sk-SK/        uk-UA/
ar-AE/          de-DE/            export/  it-IT/  pt-PT/  spreadsheet/  zh-CN/
bg-BG/          distribution.xml  fr-CA/   nl-NL/  ro-RO/  sv-SE/

I want to make use of the DropDownButton component in this project, and I tried the example code from this page:

https://demos.telerik.com/aspnet-mvc/dropdownbutton

I get this error however:

'WidgetFactory<InvoiceFilterViewModel>' does not contain a definition for 'DropDownButton' and no accessible extension method 'DropDownButton' accepting a first argument of type 'WidgetFactory<InvoiceFilterViewModel>' could be found (are you missing a using directive or an assembly reference?)

So I believe the DropDownButton is not available yet in the version of Kendo that I am using.

My questions;

1. Is it possible to upgrade my version of Kendo in the same way as have already? I tried looking in the downloads section, but I don't see the bundle of files I need. The source code bundles contain many different files. If this is not possible, can you then please tell me the alternatives?

2. Is it possible to see which versions a component is supported for on the Telerik documentation website?

I already applied an alternative using the DropDownList, but this does not really satisfy the requirements as a DropDownButton would. Note that upgrading the .NET version of this project is (sadly) not a possibility for me at the moment.

And a little side note, it seems this link is broken when clicking on the red "Documentation" button:

Page with the button: https://www.telerik.com/aspnet-mvc/dropdownbutton

Broken link: https://www.telerik.com/aspnet-mvc/documentation/getting-started

Kendo Grid PDF export duplicates current page instead of exporting all pages

Hi,

I'm using ASP.NET MVC with Kendo UI v. 2024.2.514 and I'm running into a weird issue when exporting a grid to PDF.

When I trigger the export, the PDF output shows only the current page of the grid duplicated X number of times.

For example, if I'm on page 2 of a 10-page grid, instead of exporting all ten pages, the PDF contains page 2 repeated 10 times.

I'm enabling the PDF export like this:

.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf.AllPages())

Has anyone run into this issue or have any suggestions on what I'm missing here?

Thanks!

Client Template Handler not able to populate kendo dropdownlist.

Hi,

I am using Web app with mvc. We are using Deferred Script File to remediate CSP (content security policy).

For that reason instead of Client Template i am using Client Template Handler for one of the column which is a dropdownlist.

Whenever Grid is loaded with data, I can see the selected dropdown values in the grid but when i try to update the dropdown value

its opening as a text box and showing value as [object object].

columns.Bound(p => p.Studendetails).ClientTemplateHandler("getname")

function getname(data) {
return data.Studendetails ? data.Studendetails.Name : '';
}

Getting Uncaught TypeError: d.HierarchicalDragAndDrop is not a constructor when trying to use DragandDrop

Trying to use DragandDrop on 2 treeviews to drag from one tree to another. I believe I have all JS components loaded properly but still getting this error the tree data will load otherwise with DragandDrop set to false. Any help or direction would be appreciated. Full Error can be seen below

jquery.min.js:2 Uncaught TypeError: d.HierarchicalDragAndDrop is not a constructor
    at init._dragging (kendo.treeview.js:2490:2)
    at new init (kendo.treeview.js:2490:2)
    at HTMLDivElement.<anonymous> (kendoLayout.min.js:1:42737)
    at ce.each (jquery.min.js:2:3129)
    at ce.each (jquery.min.js:2:1594)
    at ce.kendoTreeView (kendoLayout.min.js:1:42713)
    at HTMLDocument.<anonymous> (RolesPermissions:933:116)
    at e (jquery.min.js:2:27028)

Kendo grid - Cancel request

Hello there,
i have a project with MVC Asp.Net, Kendo v. "2024.4.1112.462" and would like to
- load data into grid, the data is returned by MVC Controller
- the spinner with the "loading data in progress" should never appear
- so the user can "play" on the grid header filters while loading data is ongoing
- when the user clicks on "apply" on grid header filter, the previous request must be canceled to run the new request with latest filters applied, in this way the c# CancellationToken is Canceled on server side.

Can you tell me how to "cancel" the actual http request from the kendo grid (client) and execute the new one, as described in the last point?

thanks in advance

Hyperlink in child/detail grid column

Hi Team,

I am trying to make child/detail grid column as hyperlink but i am getting not defined error in console.
Can you please guide on this?
Below is my code & PFA the error screenshot.

Thanks
Chandan Gupta

columns.Bound(c => c.Inbound).ClientTemplate(
    "<a href='" +
    Url.Action("ReadFeedFile", "TreasuryFeeds") +
    "?fpath=\"#= Inbound #\"&archFileName=#=Archive#'" +
    ">#=Inbound#</a>"
).Title("File Name").Width(120).HtmlAttributes(new { style = "text-align:center;font-size: 10px;font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;" });

When Filtering the data into Kendo grid then if no data found then something coming into Chinese language.

This is my code.

@using apexanalytix.app
@using apexanalytix.app.HtmlHelperExtensions
@using FirstStrike.VendorPortal.SharedDataContracts.VendorProfile
@using Kendo.Mvc.UI
@using Portal.BusinessObjects.Common;
@inject VendorProfileHelper vendorProfileHelper
@inject SysSettingHelper sysSettingHelper

@{
var currentCulture = System.Globalization.CultureInfo.CurrentCulture.ToString();
}
<script>
$(function () {

kendo.culture("en-US");
});
</script>
<style>
.rowHighlighter {
background-color: #ff0000;
color: #fff !important;
}
.rowHighlighter:hover {
background-color: #e95652 !important;
color: #fff !important;
}
.rowHighlighter.k-state-selected {
background-color: #009ec9 !important;
}
.rowHighlighter.k-state-selected td{
background-color: #009ec9 !important;
}
.rowHighlighter td a {
color: #fff !important;
}
.k-filter-row label > input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 2px;
margin-left: 3px;
margin-right: 10px;
}

.k-dropdown-wrap {
max-height: 27px;
}

.k-grid td {
line-height: 1em;
}

.k-grid .k-grid-header .k-header .k-link {
height: auto;
}

.k-grid .k-grid-header .k-header {
white-space: normal;
}

.vendor-controls {
cursor: pointer;
margin: 0 auto;
width: 20px;
height: 1.2em;
max-height: 1.2em;
padding: 6px;
}
</style>
<div style="display:none">
<ul id="vendor-search-grid-context-menu">
<li id="copyText">@Html.Raw("Copy Text".Translate())</li>
</ul>
</div>
@{
var excludedFieldSet = ViewBag.ExcludedFields as HashSet<string> ?? Enumerable.Empty<string>();
var choosenColumns = ViewBag.ChoosenColumns as HashSet<string> ?? Enumerable.Empty<string>();
var availableStatus = (System.Collections.IEnumerable)ViewBag.AvailableStatus;
var moduleName = ViewBag.ModuleName;
var registrationType = (System.Collections.IEnumerable)ViewBag.RegistrationType;

int defaultGridSize = int.TryParse(ViewData["DefaultGridSize"]?.ToString(), out int gridSize) ? gridSize : 20;
var partialViewPath = "~/Areas/Registration/Views/PartialViews/VenderProfilesAction.cshtml";

var multipleEditWindowErrorMessage = "Cannot save vendor data with multiple windows open. Please edit one vendor at a time".Translate();
}
<div class="k-grouping-header" style="padding-top: 10px; border-color: var(--button-border-color); border-width: 1px; border-style: solid; border-radius: 3px;width: calc(100% - 50px)">
@await Html.PartialAsync(partialViewPath)
</div>
@(Html.DataGrid<VendorSearchResult>(false)
.Name("vendorProfileGrid")
.HtmlAttributes(new { @style = "height: 500px;width: calc(100% - 50px)" })
.Reorderable(r => r.Columns(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.Resizable(r => r.Columns(true))
.Pageable(p =>
{
p.Refresh(true);
p.PageSizes([25, 50, 75, 100, 1000, 5000, 10000]);
})
.Events(_ => { })
.Columns(columns =>
{
columns.Bound(v => v.VR_Id).Title("VR ID".Translate()).ClientTemplate("#= VR_Id === 0 ? '' : VR_Id #").Width(180).Lockable(false).Locked(true).Filterable(f => f.Cell(cell => cell.Template("VendorProfile.decimalToIntFilter"))).Visible(vendorProfileHelper.IsVrIdDisplayInGrid && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VR_Id), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "NumericHeaderAlign" }).HtmlAttributes(new { @class = "NumericRowAlign" });
columns.Bound(v => v.VendorId).Title("Vendor Number".Translate()).ClientTemplate("#= VR_Id === 0 ? '' : (VendorId || '') #").Lockable(false).Locked(true).Width(150).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorId), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.CompanyName).Title("Company Name".Translate()).Width(220).Lockable(false).Locked(true).ClientTemplate("#= VR_Id === 0 ? CompanyName : VendorProfile.buildCompanyNameLink(CompanyName, '" + @Url.Action("GetCompanyUrl") + "')#").Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CompanyName), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.CompanyNameDBA).Title("Company Name DBA".Translate()).Width(220).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CompanyNameDBA), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.VendorControls).Title("Vendor Controls".Translate()).Width(140)
.ClientTemplate("#= VendorControls ? '<div onclick=\"VendorProfile.openValidationResultDialogWindow(this)\"><span class=\"fal fa-check-circle validation-pass-icon-grid\"></span></div>':'<div onclick=\"VendorProfile.openValidationResultDialogWindow(this)\"><span class=\"fal fa-times-circle validation-fail-icon-grid\"></span></div>' #")
.Filterable(filterable => filterable.Messages(m => m.IsFalse("Fail".Translate()))
.Messages(m => m.IsTrue("Pass".Translate()))).Visible((ViewBag.IsDisplayVendorControlInGrid ?? true) && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorControls), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "IconHeaderAlign" })
.HtmlAttributes(new { @class = "IconRowAlign" });
columns.ForeignKey(v => v.Status, availableStatus, "Value", "Name")
.Title("Status".Translate())
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" })
.ClientTemplate("#= VR_Id === 0 ? 'DISCOVERY' : VendorProfile.getGridTextByValue(Status,'Status') #")
.Width(180)
.Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.Status), StringComparison.OrdinalIgnoreCase)))
.HtmlAttributes(new { @data_displayToolTip = "True", @data_column_name = nameof(VendorSearchResult.Status), @class = "StringRowAlign" });
columns.Bound(x => x.Status_Desc).Title("Status".Translate()).ClientTemplate("#= VR_Id === 0 ? 'DISCOVERY' : Status_Desc #").Hidden(true).IncludeInMenu(false).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(x => x.RegistrationType_Desc).ClientTemplate("#= RegistrationType_Desc == null ? '' : RegistrationType_Desc.toUpperCase() #").Title("Registration Type".Translate()).Hidden(true).IncludeInMenu(false);
columns.ForeignKey(v => v.SubStatus, availableStatus, "Value", "Name").ClientTemplate("#= SubStatus == null ? '' : VendorProfile.getGridTextByValue(SubStatus,'SubStatus') #").Title("Sub Status".Translate()).Width(140).Visible((ViewBag.IsDisplaySubStatusColumnInGrid ?? false) && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SubStatus), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.ForeignKey(v => v.RegistrationType, registrationType, "Value", "Name").ClientTemplate("#= RegistrationType == null ? '' : VendorProfile.getGridTextByValue(RegistrationType,'RegistrationType').toLocaleUpperCase() #").Title("Registration Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.RegistrationType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SupplierType).Title("Supplier Type".Translate()).Width(200).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SupplierSubType).Title("Vendor Category".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierSubType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SupplierSubType).Title("Vendor Category".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierSubType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BusinessUnit).Title("Business Unit".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessUnit), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.ProjectCode).Title("Project Code".Translate()).Width(140).Visible(sysSettingHelper.IsProjectCodeDrivenWorkflowEnabled && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ProjectCode), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.AddressTypeDescription).Title("Address Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.AddressTypeDescription), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PayeeName).Title("Payee Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PayeeName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PayeeDBA).Title("Payee DBA".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PayeeDBA), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.InvitedBy).Title("Invited By".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.InvitedBy), StringComparison.OrdinalIgnoreCase)))
.HtmlAttributes(new { @data_displayToolTip = vendorProfileHelper.IsUpdatedByToolTipToShowName, @data_column_name = nameof(VendorSearchResult.InvitedBy), @class = "StringRowAlign invited-by-tooltip" }).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" });
columns.Bound(v => v.CreatedDate).Format("{0:G}").Title("Date Registered".Translate()).Width(180).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CreatedDate), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "DateHeaderAlign" }).HtmlAttributes(new { @class = "DateRowAlign" });
columns.Bound(v => v.UpdatedBy).Title("Updated By".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.UpdatedBy), StringComparison.OrdinalIgnoreCase)))
.HtmlAttributes(new { @data_displayToolTip = vendorProfileHelper.IsUpdatedByToolTipToShowName, @data_column_name = nameof(VendorSearchResult.UpdatedBy), @class = "StringRowAlign" })
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" });
columns.Bound(v => v.UpdatedDate).Format("{0:G}").Title("Last Update".Translate()).Width(180).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.UpdatedDate), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "DateHeaderAlign" }).HtmlAttributes(new { @class = "DateRowAlign" });
columns.Bound(v => v.ProfileType).Title("Profile Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ProfileType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.IndividualType).Title("Individual Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.IndividualType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.GlobalSmartVMNumber).Title("Global SmartVM Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.GlobalSmartVMNumber), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.ParentSmartVMNumber).Title("Parent SmartVM Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ParentSmartVMNumber), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SmartVMBusinessEntityType).Title("SmartVM Business Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SmartVMBusinessEntityType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SmartVMBusinessEntitySubType).Title("SmartVM Business Subtype".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SmartVMBusinessEntitySubType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BusinessEntityType).Title("Business Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessEntityType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.TaxClassification).Title("Tax Classification".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxClassification), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.IncomeType).Title("Income Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.IncomeType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BusinessOwnershipType).Title("Business Ownership Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessOwnershipType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.VendorRequestType).Title("Vendor Request Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorRequestType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.LocalLanguageCompanyCountry).Title("Local Language Company Country".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyCountry), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.LocalLanguageCompanyName).Title("Local Language Company Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.LocalLanguageCompanyNameDBA).Title("Local Language Company NameDBA".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyNameDBA), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.AddressInfo).Title("Address Info".Translate()).Width(240).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.AddressInfo), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BankName).Title("Bank Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BankName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BankAddress).Title("Bank Address".Translate()).Width(240).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BankAddress), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PersonName).Title("Person Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PersonName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.ContactType).Title("Contact Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ContactType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.Email).Title("Email".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.Email), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PhoneInfo).Title("Phone Info".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PhoneInfo), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.TaxType).Title("Tax Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.TaxIdNumber).Title("Tax Id Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxIdNumber), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Command(command => { command.Custom("Delete").Visible("VendorProfile.deleteVendorProfileRowVisible").Text("Delete".Translate()).Click("VendorProfile.deleteVendorProfile"); }).Width(200).Visible((ViewBag.IsDisplayDeleteColumnInGrid ?? false) && !excludedFieldSet.Contains(nameof(VendorSearchResult.IsDeleteAllowed)))
.HeaderHtmlAttributes(new { @class = "IconHeaderAlign" }).HtmlAttributes(new { @class = "IconRowAlign" });
})
.Sortable()
.Events(e => { e.DataBound("VendorProfile.vendorProfileGridDataBound").Change("VendorProfile.onVendorProfileGridChange").ExcelExport("VendorProfile.vendorProfileGridDataExcelExport"); })
.AutoBind(true)
.Editable(e => { e.Enabled(false); })
.DataSource(datasource => datasource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(defaultGridSize)
.Transport(t => { t.Read(r => r.Url(Url.Action("ReadVendorProfiles", new { ModuleName = moduleName })).Data("VendorProfile.getVendorProfileAdditionalData")); }
)
.Schema(s => s
.Model(model => { model.Id(request => request.VendorSearchResultId); })
.Data("Data")
.Total("Total")
)
.ServerSorting(true) // as we are pulling 2000 records at a time from service, don't use server side sorting, paging, filtering
.ServerPaging(true) // Once moved to odata service, we can turn it on
.ServerFiltering(true)
.ServerGrouping(false)
.ServerAggregates(false)
.Events(events => events.Error("VendorProfile.onGridError")
.RequestEnd("VendorProfile.onGridRequestEnd")
.RequestStart("VendorProfile.onGridRequestStart")
.Change("VendorProfile.onVendorProfileGridChange"))
)
)

<script>
window.multipleEditWindowErrorMessage = '@multipleEditWindowErrorMessage';
</script>

this is my Layoutm Code

@using System.Threading
@using apexanalytix.app.HtmlHelperExtensions
@using apexanalytix.app.ViewComponents
@using apexportal.Services.Abstractions
@using Microsoft.AspNetCore.Mvc.Localization
@using Portal.BusinessObjects.Common
@model Portal.Models.MvcProfilePageModel
@inject SysSettings SysSettings
@inject IViewLocalizer Localizer

<!DOCTYPE html>
<html lang="@Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName">
<head id="Head1">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8"/>
<style>
body {
min-width: 850px;
width: 100%;
}

.field-validation-valid {
padding: 0 !important;
margin: 0 !important;
display: none !important;
}

/* Int, Long, Percentage */
.NumericHeaderAlign {
text-align: center !important;
}

/* Int, Long, Percentage */
.NumericRowAlign {
text-align: right;
}

/* Date and Date + Time */
.DateHeaderAlign {
text-align: center !important;
}

/* Date and Date + Time */
.DateRowAlign {
text-align: center;
}

/* Alpha Numeric */
.StringHeaderAlign {
text-align: left !important;
}

/* Alpha Numeric */
.StringRowAlign {
text-align: left;
}

/* Images, Icons */
.IconHeaderAlign {
text-align: center !important;
text-overflow: clip !important;
}

/* Images, Icons */
.IconRowAlign {
text-align: center !important;
text-overflow: clip !important;
}
</style>

<link href="/Content/Themes/uilightness/jqueryui" rel="stylesheet" type="text/css"/>
<link href="/Content/VendorRegistrationMaster" rel="stylesheet" type="text/css"/>

<script src="/Styles/fa-pro-5_15_1/js/all.min.js"></script>
@{
var englishPageTitle = SysSettings.SiteContent[ValueName.PageTitleBase];
var pageTitle = Localizer[englishPageTitle.Value ?? string.Empty].Value + " - " + ViewBag.Title;
}

<title id="Title1">@pageTitle</title>
</head>

<body style="width: 100%">



<div class="modelbg" style="display: none;"></div>
<div id="cloneMenu" style="display: none;">
<div id="cloneContent"></div>
</div>
<div id="fadeSection">
<div id="coreDialog" style="display: none">
</div>
</div>
<input type="hidden" id="hdnThemeMode"/>
@{
var enableAutoComplete = SysSettings.Display[ValueName.EnableBrowserAuto_complete].GetValue<bool>();
var cultureCode = HtmlExtensions.GetFullCultureCode();
}
<form id="Form1" autocomplete="@(enableAutoComplete ? "on" : "off")">
<script src="/bundles/MsAjaxJs"></script>
<script src="/bundles/jquery"></script>
<script src="/bundles/jqueryui"></script>
<script src="/Scripts/kendo/2024.3.1015/kendo"></script>
<script src="/bundles/WebFormsJs"></script>

<script src="/bundles/PortalMaster"></script>
<script src="/bundles/jqueryval"></script>
<script src="/bundles/KendoWindowManager"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"
type="text/javascript"></script>
<script src="/Scripts/kendo/2024.3.1015/messages/kendo"></script>
<script src="/Scripts/kendo/2024.3.1015/cultures/kendo"></script>
<script src="~/Scripts/kendo/2024.3.1015/cultures/kendo.culture.@(cultureCode).min.js" type="text/javascript"></script>
<script src="~/Scripts/kendo/2024.3.1015/messages/kendo.messages.@(cultureCode).min.js" type="text/javascript"></script>
<script>
kendo.culture("@(cultureCode)");
</script>

<div id="body">

@{ await Html.RenderPartialAsync("~/Views/Shared/_Header.cshtml", ViewData); }
@{ await Html.RenderPartialAsync("~/Views/Shared/_ThemeMode.cshtml", ViewData); }
@{ await Html.RenderPartialAsync("~/Views/Shared/_GridRowDeleteDialog.cshtml", null); }
@{ await Html.RenderPartialAsync("~/Views/Shared/_popupDialog.cshtml", null); }

<div class="container-fluid landing-container">
<div class="sidebar border-right bg-body-tertiary">
<div class="sideMenubtm">
@{
await Html.RenderPartialAsync("~/Views/Shared/_MainMenu.cshtml", ViewData);
}
</div>

</div>
<div class="main-content-section">
<div id="bodytitle">
@{ await Html.RenderPartialAsync("~/Views/Shared/_Breadcrumb.cshtml", ViewData); }
</div>
<div id="bodynews">
@if (false)
{
await Component.RenderActionAsync("GetWelcomeBanner", "Dashboard");
}
</div>
<div style="padding: 0 24px; margin-bottom: 100px">
@RenderBody()
@await Component.ExtendKendoValidationsAsync()
<script type="text/javascript">
$(document).ajaxError(function (xhr, props) {
if (props.status === 401) {
location.reload();
}
});
</script>
</div>
@if (ViewBag.StartSessionExpire != false)
{
await Html.RenderPartialAsync("~/Views/Shared/_SessionExpireNotification.cshtml", ViewData);
}
</div>
</div>
@{
if (SysSettings.HomePage[ValueName.DisplayFooter].GetValue<bool>() && !(Model?.HideFooter ?? false))
{
<partial name="~/Views/Shared/_Footer.cshtml"/>
}
}
</div>

</form>

<script type="text/javascript">

var commonBaseUrl = '@Url.Content("~/")';

function Translate(error) {
try {

let url = '/Registration/Common/TranslateJSStrings';
$.ajax({
type: "POST",
async: false,
url: url,
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
Message: error
}),
success: function (result) {
error = result.d;
}
});

return error;

} catch (ex) {
}
}

</script>

@Html.RenderUnobtrusiveAjaxScript()

@await Component.GoogleAnalyticsAsync(SysSettings.SiteConfiguration[ValueName.AnalyticsId].GetValue<string>(), Context.User.Identity?.GetUserId())

</body>
</html>

this is my Error.

DataSourceRequest serialization and deserialization

Good morning,
i am using MVC.ASP net in my project and i'm trying to send the DataSourceRequest to a service , via rabbitmq.

the message should contains all the request filters set in the ui in order to create an excel report. i have tried to use the System.Text.Json serialization but it's not working properly. it serializes only the first level props.
i have found a ".ToJson" extension but it's returning a Dictionary<string, object>, not usefule here.

can you suggest how to serialize the DataSourceRequest in Json format? with all nested and recursive properties?

the filters can be about dates, strings, combobox, and so on

thanks in advance

Grid - Date picker filter - "Is after On" and "Is before" are inverted if null

good morning,
i am facing a strange behavour with the datetime filter in grid.
when i set a date on the second filter about the "Is before" and none in the "Is after on", launch the grid data and re-open the date filter, values are inverted, see attachments "before" and "after".
can you tell me how to block the filter positions? "is after on" set always as first and "Is before" alwasy set as second.

thanks in advance

Setting initial value of TimePicker

Hi Guys

This stupid little issue is taking up way way too much time for me to resolve..

I am setting a timepicker as follows:

@Code
With Html.Kendo().TimePicker()
.Name("1Open")
.Events(Function(events) events.Change("settime"))
.Value(New TimeSpan(0, Model.Hours(1).open, 0))
.Min(New TimeSpan(0, 0, 0))
.Max(New TimeSpan(0, 0, 0))
.Render()
End With
End Code
</td>

The result is as per the attached screen shot.

It 'looks like' the values are set right as the timepickers have the correct times , but when you drop down, it always starts at midnight and the current time is not highlighted. I assume the timepicker needs the value to be set with AM or PM .. but that can't be done from a TimeSpan or a datetime.. the am pm always has dots ( a.m. , p.m.)

If tried adding .Format("HH:mm:tt") and .ParseFormats(New String() {"HH:mm:tt"}) etc, but I just can't get it to work. ( I've tried allot more formats than just these, I've tried "HH:mm tt" ,"HH:mm t.t." ( cause it's the dots around the am pm which seems to be whats stopping.))

Feeling a bit stupid having to ask this as it seems to be a straightforward thing.

I'm sure I will have a Face palm moment when shown the error in my ways.. but I've got to the point of not caring! :)

Cheers

Rob

MultiColumnComboBoxFor - Showing DataValue instead of DataText with large dataset

We have use a MultiColumnComboBoxFor to select from a large dataset > 100.000 records.

At the time of selecting a record the DataText is correctly displayed.

But when we refresh the page the ComboBox behaves differently for records which appear early in the dataset, and records that come later.

The early records show the DataText correctly, records which come later in the dataset do not; they show their Id (DataValue).

If we implement virtualization, the Combobox displays the correct DataText in both cases, but seemingly with an extra server roundtrip?

Is this expected behaviour? Is there anything we could improve while using the MultiColumnComboBox with larger datasets?

Kind regards.

How to add a Menu to a TreeList?

Hi there,

In my grids, I have a column with a menu :

columns.Template(@<text></text>).Width(106).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
Html.Kendo().Menu().Direction(MenuDirection.Left)
.Name("menu_#=AccountId#")
.Items(its =>
{
its.Add().Text("Functions:").Items(nested =>
{
nested.Add().Text(importFilesText).Action(importFilesAction, "Accounts", new { id = "#=AccountId#", cid = Model.CompanyId, returnUrl = returnUrl});
});

})
.ToClientTemplate().ToHtmlString()
);
})

But in the TreeList there is no ClientTemplate

I tried using the TemplateId

And I can get the menu to display, but it is cut of inside the treelist.

In the old days with the grid we used to change the css of the parent with overflow-y:display !important; but that does not seem to work.

Any ways this can be accomplished in the treelist - next step is the items in the list are depending on the content of the row ...

Best regards,

- René

Datasource request fires twice on MultiSelect

I have a simple multiselect like so:

@(Html.Kendo().MultiSelectFor(x => x.CourseId)

.DataValueField("Id")

.DataTextField("Name")

.Placeholder("Select Course...")

.ClearButton(false)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCourseCodeList", "Home");

})

.ServerFiltering(true);

})

.MaxSelectedItems(1)

.HtmlAttributes(new { @class = "" }))

When I enter text, the search is submitted once with the text entered, then a second time with the Placeholder text, or if no Placeholder, with empty string.

public JsonResult GetCourseCodeList(string text, int categoryId=0)

{

var items = _courseData.Where(x =>

x.Name.Contains(text) &&

(categoryId == 0 || x.CategoryId == categoryId)).OrderBy(x => x.Name).ToList();

var userinput = text;

var result = new JsonResult

{

JsonRequestBehavior = JsonRequestBehavior.AllowGet,

Data = items

};

return result;

}

A sample project replicating the issue is here : https://github.com/SteveWortho/TLCKendoTest

It must be something simple I am doing wrong - any advice appreciated.

Using;

VS2017 Pro Version 15.5.1

KendoUI MVC 2017.3.1026

Chrome Version 63.0.3239.132 or Microsoft Edge or FireFox. Issue is repeatable.

So I must be firing the onChange event a second time with some of this configuration maybe?

But it is such a simple example.

Thanks in advance,

Steve

Autofocus Kendo Date Picker on button click Inside Kendo Grid

Hi,

I have a Kendo Grid and its first column is a Datetime and Its a Kendo DatePicker.

When the user click on Add new record button then the 1st cell which is a date picker should be auto focus.

Note: When the user click on Add new record button then we are sorting the grid in ascending order so that the new row should appear on the top, which is working fine but the 1st cell of the newly created row a Kendo Date picker in not in focus.

But when the user click on the first cell of the newly created row, then it opens the datepicker to allow user to select a date.

My requirement is when i am clicking the Add new record button then
1. It should sort in ascending order (Which is working now)

2. The 1st cell of the Kendo Datepicker should auto focus like the above screenshot.

Kendo Grid Add Row/Delete Row with Icon

Hi,

I have a requirement in the Kendo grid

1. When the user click on cross icon in each row in the action column then the row should be deleted.

2. In the last available row, a + icon should display and when the user clicks the + icon then it should create new row in the grid

instead of normal Add new record button.

Add row to Kendo grid dynamically

Hi,

I want to load a kendo grid, after load the grid should add a new row at the bottom of the grid.

When the Kendo grid loads then, it is creating the new row, but after that it will load the records from the database and then refresh the screen and the new row is removing.

ClientTemplate method not firing for a Boolean field in Kendo grid

Hi,

I have a kendo grid, where i am creating a new empty row while loading the grid.

The grid has a Boolean filed which is a mandatory field. so when we want to enter the row values then it should call the CheckIsPublicFund(data) method and if the user is not selecting the Boolean field then it should add that value to false.

The problem is when selecting the Boolean value then its not firing the CheckIsPublicFund(data) method.

Copy Excel record to Kendo grid paste performance issue

Hi,

I am working on a kendo grid, where user can copy records from the excel and paste in the kendo grid.

But when we copy more than 50 records from the excel and paste in the kendo grid then it is taking some time.

Can we increase the performance while pasting in to the Kendo grid or is it possible we can provide a progress bar or something to show to the user when the user paste more than 50 record.

Add HTML Link in Kendo Chart CategoryAxis or ValueAxis Label

Hi,

I'm using Kendo UI for ASP.NET MVC and I need to add an HTML link (<a href="...">) inside the CategoryAxis.Labels.Template or the ValueAxis.Labels.Template of a Bar Chart. Here is a simplified version of my code:

@(Html.Kendo().Chart()
    .Name("productsChart")
    .Series(series =>
    {
        series.Bar(new[] { 100, 200, 300 }).Name("Sales");
    })
    .CategoryAxis(axis => axis
        .Categories("Product A", "Product B", "Product C")
        .Labels(labels => labels
            .Template("<a href='https://example.com/product/#= value #' target='_blank'>#= value #</a>")
        )
    )
)

However, the chart only displays the raw text of the <a> tag instead of rendering it as a clickable HTML link. I understand this may be due to the chart rendering via SVG and not supporting HTML natively in axis labels.

Is there any workaround or supported way to:

Render actual HTML in axis labels?

Enable links or interactive elements within axis labels?

I’ve already considered using tooltips and seriesClick events as alternatives, but my goal is to have direct clickable links inside the axis labels themselves.

Thanks for your help!

'IEnumerable' does not contain a definition for 'ToDataSourceResult'

Hello,

I created new project using Telerik wizard. I am trying to populate a grid with data-source using ajax but I am failing at using ToDataSourceResult. I am getting error

'IEnumerable<Person>' does not contain a definition for 'ToDataSourceResult' and the best extension method overload 'QueryableExtensions.ToDataSourceResult(DataTable, DataSourceRequest)' requires a receiver of type 'System.Data.DataTable'

I compared it with project created by Telerik wizard for page with grid and still don't see why this error occurs.

Please see attached figure. It is screenshot taken from HomeController where I am trying to get data-source from IEnumerable.

Kendo MVC Grid Transpose Columns using HTML Helper

Hi,

I'm trying to figure out how to transpose columns in a Kendo Grid using the Html helper.

I see that there's this small piece of documentation for jQuery (https://docs.telerik.com/kendo-ui/knowledge-base/transposed-grid), but would ideally like to do it on the helper itself.

Is anyone aware of how to do this?

Any help is much appreciated!

Kendo MVC AI Completion Service Output is not displaying

Hi,

I have a problem displaying the content from the AIPrompt Output tab and I'm getting An error occurred while processing the request.

I'm not sure if I'm missing a parameter returning the response from the content. I am using OpenAI as a service.

Here is my code


public async Task<ActionResult> GenerateSupplierAIReponse()
{
    var apiKey = ConfigurationManager.AppSettings["OpenAPIKey"];
    var aiServiceUrl = "https://api.openai.com/v1/chat/completions";
    StringBuilder sb = new StringBuilder();
    using (var httpClient = new HttpClient())
    {
        httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", apiKey);

        try
        {
            using (var requestStream = new StreamReader(HttpContext.Request.InputStream))
            {
                var body = await requestStream.ReadToEndAsync();
                var requestBody = new
                {
                    model = "gpt-4",
                    messages = new[]
                    {
                        new { role = "user", content = body }
                    }
                };

                var response = await httpClient.PostAsJsonAsync(aiServiceUrl, requestBody);
             
                response.EnsureSuccessStatusCode();
                var jsonResponse = await response.Content.ReadAsStringAsync();
                OpenAIResponse aIResponse = JsonConvert.DeserializeObject<OpenAIResponse>(jsonResponse);


                foreach (var i in aIResponse.choices)
                {
                    sb.AppendLine(i.message.content);
                }

                var formattedResponse = new
                {
                    Output = sb.ToString(),
                };

                string finalJsonResult = new JavaScriptSerializer().Serialize(formattedResponse);
                return Content(finalJsonResult, "application/json");
            }

        }
        catch (HttpRequestException ex)
        {
            // Log the error
            Console.Error.WriteLine($"HTTP Error: {ex.Message}");
            return Json(new { error = "Error communicating with OpenAI." }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            // Log the error
            Console.Error.WriteLine($"General Error: {ex.Message}");
            return Json(new { error = "An unexpected error occurred." }, JsonRequestBehavior.AllowGet);
        }
    }

}

Here is the example content that I'm about to return.

"{\"Output\":\"As an AI, I don\\u0027t have real-time data access, but as of my last update, I don\\u0027t have specific information about the parent company of Acme Electronics. Acme is a common generic name used in various forms of fiction, and there could be many small companies by that name. It would help if you were more specific about the company\\u0027s location or other details.\\r\\n\"}"

and here is my UI

@(Html.Kendo().AIPrompt()
    .Name("aiprompt")
    .ActiveView(0)
    .Service("GenerateSupplierAIReponse", "Supplier")
    //.Events(events => events
    //    .PromptRequest("onPromptRequest")
    //)
    .ToolbarItems(items =>
    {
        items.Add().Type(ItemType.Spacer);

        items.Add()
             .Type(ItemType.Button)
             .Icon("x")
             .FillMode(ButtonFillMode.Flat)
             .Rounded(Rounded.Full)
             .ThemeColor(ThemeColor.Primary)
             .Click("onToolbarButtonClick");
    })
    .Views(views =>
    {
        views.Add().Type(Kendo.Mvc.UI.ViewType.Prompt)
        .PromptSuggestions(new string[] { "What is the parent company of " + Model.Name, "Give me the headquarter address of " + Model.Name });
        views.Add().Type(Kendo.Mvc.UI.ViewType.Output);
    })
)

and here is the result

Everything is getting all the correct authentication and the ai response message content but upon returning the content it will prompt an error message.

Please advice.

Thank you,

Gerber Manalo

Remove unsafe Content-Security-Policy (CSP) directives for Kendo Controls

Hi,

We are using Kendo controls for MVC. There was a security scan done in our application, it capture few of the security issues.

We are able to fix all of the security issues except one.

CWE 829 - The application contains unsafe Content-Security-Policy (CSP) directives that could allow malicious script code to be included on the page.

So, as a result we have removed all the custom inline javascript and css to an external files and refer those external .js and .css files in our .cshtml page.

But when we use any of the Kendo controls like Kendo grid or Kendo calendar then in the runtime it create some inline scripts and we are getting application contains unsafe Content-Security-Policy (CSP) directives.

How to bypass those runtime inline scripts created by Kendo controls so that we don't get unsafe Content-Security-Policy (CSP) directives

during the security scan of the application.

Please let me know if you need any more information on this.

Kendo UI Form MultiSelect Rendering Duplicate Selections

I'm encountering an issue with the Kendo UI Form when using a MultiSelect widget. When I render a form that includes a single MultiSelect field bound to a value, the widget inexplicably displays two chips for that value.

Key Observations:

This occurs with both single and multiple selections.
The issue does not occur when the MultiSelect is used outside the context of a Kendo Form.
I'm fairly certain this is related to how the form is configured or how the binding is set up.
I've reduced my code to a minimal test case to replicate the issue.
See attached screenshots for reference.

Question:

Has anyone else encountered this behavior when using a MultiSelect within a Kendo UI Form? Any tips on what might be causing the duplicate value chips?

Thank you in advance! :)

 public class TestViewModel
 {
     public List<string> SelectedItems { get; set; } = new List<string>();
     public List<string> AvailableItems { get; set; } = new List<string>();
 }

public class TestController : Controller
{
    public ActionResult Index()
    {
        var model = new TestViewModel
        {
            AvailableItems = ["Option A", "Option B", "Option C"],
            SelectedItems  = []
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestViewModel model)
    {
        model.AvailableItems = ["Option A", "Option B", "Option C"];
        return View(model);
    }
}

@(Html.Kendo().Form<TestViewModel>()
    .Name("testForm")
    .HtmlAttributes(new { method = "post", id = "testForm" })
    .Items(items =>
    {
        items.AddGroup()
             .Label("Demo")
             .Items(g =>
             {
                 g.Add().Field(m => m.SelectedItems)
                      .Label("Pick Items")
                      .Editor(e => e.MultiSelect()
                          .BindTo(Model.AvailableItems)
                          .Placeholder("Select…")
                      );
             });
    })
)

DisplayFormat(DataFormatString) not working for properties of navigation properties

Hi,

wie have a Model A which is related to Model B (1:n). Both have a field of type DateTime with the DisplayFormat-Annotation '[DisplayFormat(DataFormatString = "{0:d}")]'.

If we display both fields in the Details-View of Model A, the formats are applied correctly.

If we display bot fields in a Telerik-GridView, only the format for Model A is applied. Model B shows something like '/Date(1741302000000)/'.

It's important to note, that our application is multilanguage, and we have to support different data formats for each language.

How would we go about this? Is this known behaviour?