5 answers

334 views

Telerik UI for ASP.NET Core versioning feedback

We need your feedback, because we are considering changes in the release approach for Telerik UI for ASP.NET Core. 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.

General Discussions

answered on 05 Feb 2024

1 answer

364 views

URGENT: ListView completely broken v2023.1.314

Hi!

The ListView is breaking my web application, and I cannot make head or tail of the reason:

An unhandled exception occurred while processing the request.

NotSupportedException: "ClientTemplateId or ClientTemplateHandler" cannot be null or empty.

Kendo.Mvc.UI.ListView<T>.VerifySettings()

Also, you demos for the ListView are broken and the browser tab crashed after a while.

I need an urgent fix, as this is affecting the live application.

ListView

answered on 17 Mar 2023

0 answers

443 views

Grid Column Menu Unstick Message is Null

In our UI for ASP.NET Core R3 2020 (2020.3.915) release, the Column menu message of unsticking a column is "null".

This bug will be resolved in our next official release.

In the meantime, as a workaround, manually set the Unstick Column menu message:

.ColumnMenu(c => c.Messages(m => m.Unstick("Unstick Column")))

Grid

asked on 16 Sep 2020

1 answer

2 views

Tooltip Template and Content Security Policy

This link says:

To remove the unsafe-eval keyword from the meta tag of your application, you must convert all client templates (inline, external, and partial templates) into CSP-compatible templates.

How do I convert this tooltip template into a CSP-compatible template?

                @(Html.Kendo().TreeMap()
                    .Name("tmReason")
                    .DataSource(ds => ds
                        .Read(r => r.Url("?handler=ReadTop5Reasons"))
                        .Model(m => m.Children("Items"))
                    )
                    .Type(TreeMapType.Squarified)
                    .Template(Html.Kendo().Template().AddHtml("${data.text}: ${data.dataItem.Number}"))
                    .ValueField("Number")
                    .TextField("Category")
                    .ColorField("color")
                )
                <script id="tmplReasonTooltip" type="text/x-kendo-template">
                    <p>#=target[0].innerHTML#</p>
                </script>
                @(Html.Kendo().Tooltip()
                    .For("#tmReason")
                    .Filter(".k-leaf")
                    .Position(TooltipPosition.Top)
                    .ContentTemplateId("tmplReasonTooltip")
                    .Width(200.0)
                )

Thank you

ToolTip

answered on 26 Jul 2024

0 answers

5 views

Html.Kendo().TextBoxFor inside a form renders textboxes with different heights.

Hi all,

Need some assistance with this one please - may be something simple but I've been battling to get this right all day.

I have following this article to build a step-wise wizard: https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui

Everything is working well and as expected however on my first tabstrip (content loaded from a partialview) I have several inputs for various fields.

Some fields display correctly and some is smaller in height. They are defined all the same in the source file (with the exception of the field name). Both the below samples point to string fields.

I don't have any css defined elsewhere, just bootstrap and fluent style in use.

Eg:

Form declaretion:

...

@using (Html.BeginForm("AddCRMClient", "CRM", FormMethod.Post, new { role = "form" }))

...

Displays correctly:

...

<div class="col-7">
@Html.LabelFor(m => m.CustomerName, new { @class = "form-label" })
@(Html.Kendo().TextBoxFor(m => m.CustomerName)
.HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
)
</div>

...

Height is smaller:

...

<div class="col-6">
@Html.LabelFor(m => m.VATNumber, new { @class = "form-label" })
@(Html.Kendo().TextBoxFor(m => m.VATNumber)
.HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
)
</div>

...

This is the result:

As you can see there are many controls that does not display correctly.

When I look at these via dev tools, I can see the controles that display correctly does have 2 spans which encapsulates the input, the ones that does not display correctly only has one span.

Eg:

vs.

Layout file to show referenced css, js files.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - VAPS Admin System</title>

<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
@*Core Content Start*@

<link rel="stylesheet" href="~/css/kendofonts.css" />

<script src="~/js/site.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link href="@Url.Content("~/lib/kendo-ui/styles/fluent-main.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/lib/jquery/jquery.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/jszip.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/kendo.all.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/kendo.aspnetmvc.min.js")"></script>

<link rel="stylesheet" href="~/css/site.css" />

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.en-ZA.min.js"></script>
@*Core Content End*@

.............

What would cause this, and how do I fix it?

Using Telerik.UI.for.AspNet.Core Version 2023.3.1114 with VS 2022.

Thanks in advance.

Form

TabStrip

TextBox

asked on 25 Jul 2024

0 answers

8 views

CS0012 error trying to run or compile a project

Hi,

I'm developing an ASP.NET Core MVC app targeting .NET 8 with VS2022 on a x64 Windows 10 Professional.

The app has one grid using a custom popup editing template with some editing Kendo widgets in it.
I've found that, if I omit to call ".Deferred()" on the Grid or ".ToClientTemplate()" on every widgets inside the custom template, I got the following error trying to run or compile my app from Visual Studio:

Error CS0012 The type 'Object' is defined in an assembly that is not referenced. You must add a reference to assembly 'System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e'

The very same happens if I try to run or compile the example project found in the UI for ASP.NET Core MSI installer package!

I'm using a trial version of Telerik.UI.for.AspNet.Core 2024.2.514.

Can you help me, please?

General Discussions

updated question on 24 Jul 2024

1 answer

11 views

ASP.NET Core Grid & Scheduler in RazorPages - Can't parse DateTime to DB and show List of Enum, Problems with Localization

Hello,

I've got a RazorPages-Project with a Grid and a Scheduler.

I'm trying to add entries to the grid inline.

The simple text fields are working as expected but when trying to save the DateTime for Start and End, always the min value of DateTime is ending up being in the Start and End fields of the model. Moreover the list of enums is not shown correctly, I also tried it with a JS function to get the list in a ClientTemplate but that didn't work for me, now it shows [object Object]. Also the DefaultValue for title property is not set correctly. This is what I got so far.

Model:

    public class VisitViewModel : ISchedulerEvent
    {
        public int Id { get; set; }

        public string? Title { get; set; } = "";

        public string? Description { get; set; } = "";

        public bool IsAllDay { get; set; } = false;

        public string? StartTimezone { get; set; } = "";

        public string? EndTimezone { get; set; } = "";

        public string? RecurrenceRule { get; set; } = "";

        public string? RecurrenceException { get; set; } = "";

        public List<Departments>? Departments { get; set; } = new List<Departments>();

        [DataType(DataType.DateTime)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy HH:mm}")]
        public DateTime Start { get; set; }

        [DateGreaterThan(OtherField = "Start")]
        [DataType(DataType.DateTime)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy HH:mm}")]
        public DateTime End { get; set; }

        public string Visitor { get; set; } = "";

        public string Company { get; set; } = "";

        public string Welcomer { get; set; } = "";
    }

Page:

@page
@model           .Pages.DetailsModel

@{
}

@using           .Data.Enum
@using           .ViewModels
@using Kendo.Mvc.UI

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()


@(
Html.Kendo().Grid<VisitViewModel>()
            .Name("grid")
            .Editable(e => e.Mode(GridEditMode.InLine))
            .Scrollable(scrollable => scrollable.Endless(true))
            .Scrollable(a => a.Height("250px"))
            .ToolBar(x => x.Create())
            .Columns(columns =>
            {
                columns.Bound(column => column.Start).Width(250).Format("{0:dd.MM.yyyy HH:mm}").EditorTemplateName("DateTime");
                columns.Bound(column => column.End).Width(250).Format("{0:dd.MM.yyyy HH:mm}").EditorTemplateName("DateTime");
                columns.Bound(column => column.Visitor).Width(250);
                columns.Bound(column => column.Company).Width(250);
                columns.Bound(column => column.Welcomer).Width(250);
                columns.Bound(column => column.Departments).EditorTemplateName("Departments");
                columns.Bound(column => column.Description);
                columns.Command(column =>
                {
                    column.Edit();
                    column.Destroy();
                }).Width(230);
            })
            .DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Details?handler=Read").Data("forgeryToken"))
            .Update(u => u.Url("/Details?handler=Update").Data("forgeryToken"))
            .Create(c => c.Url("/Details?handler=Create").Data("forgeryToken"))
            .Destroy(d => d.Url("/Details?handler=Destroy").Data("forgeryToken"))
            .Model(m =>
            {
                m.Id(id => id.Id);

                m.Field(visit => visit.Title).DefaultValue("");

                m.Field(visit => visit.Departments).DefaultValue(new List<Departments>());

                m.Field(visit => visit.StartTimezone).DefaultValue("Etc/GMT+2");
                m.Field(visit => visit.EndTimezone).DefaultValue("Etc/GMT+2");

                m.Field(visit => visit.Start).DefaultValue(DateTime.Now);
                m.Field(visit => visit.End).DefaultValue(DateTime.Now);
            })
            .PageSize(5)
            )
            .Pageable()
)
@(
Html.Kendo().Scheduler<VisitViewModel>()
            .Name("scheduler")
            .Height(700)
            .DataSource(ds =>
            {
                ds.Read(r => r.Url("/Details?handler=Read").Data("forgeryToken"));
                ds.Update(u => u.Url("/Details?handler=Update").Data("forgeryToken"));
                ds.Create(c => c.Url("/Details?handler=Create").Data("forgeryToken"));
                ds.Destroy(d => d.Url("/Details?handler=Destroy").Data("forgeryToken"));
            })
)



<script type="text/javascript">
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    } 
</script>

PageModel:

public class DetailsModel : PageModel
{
    private readonly          Context _context;

    public DetailsModel(         Context context)
    {
        _context = context;
    }

    public void OnGet()
    {
    }

    public override void OnPageHandlerExecuting(PageHandlerExecutingContext context)
    {
        CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("de-DE");

        base.OnPageHandlerExecuting(context);
    }

    public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
    {
        return new JsonResult(_context.VisitViewModels.ToDataSourceResult(request));
    }

    public JsonResult OnPostCreate([DataSourceRequest] DataSourceRequest request, VisitViewModel visit)
    {
        _context.VisitViewModels.Add(visit);
        _context.SaveChanges();

        return new JsonResult(new[] { visit }.ToDataSourceResult(request, ModelState));
    }

    public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, VisitViewModel visit)
    {
        _context.VisitViewModels.Update(visit);
        _context.SaveChanges();
        return new JsonResult(new[] { visit }.ToDataSourceResult(request, ModelState));
    }

    public JsonResult OnPostDestroy([DataSourceRequest] DataSourceRequest request, VisitViewModel order)
    {
        _context.VisitViewModels.Remove(order);
        _context.SaveChanges();
        return new JsonResult(new[] { order }.ToDataSourceResult(request, ModelState));
    }
}

EditorTemplate DateTime

@model DateTime?

@(Html.Kendo().DateTimePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("") }).Format("{0:dd.MM.yyyy HH:mm}"))

Furthermore I have problems with the language in my project, maybe this correlates. They are mixed up as you can see in the attachment.

answered on 23 Jul 2024

1 answer

10 views

Custom functions recalculations in Telerik.Web.Spreadsheet

Hello. i m wishing to use in future telerik ui for asp.net core for my projects.

I use Telerik.UI.for.AspNet.Core and Telerik.Web.Spreadsheet packages for VS 2022.

Right now i'm testing in demo version realization of formulas. I made my formulas, it works good, makes the result that i want

But looks like it recalculates formula in ANY change on the sheet. .
Its a big optimization problem cause i need a big sheet with thousands cells with this formula
Any way to avoid it?

I need to recalculate formulas only if depended cells were changed just like base formulas works, but i don't see in documentation any way to make it

Looks like whole telerik formulas works like that. any change makes rerender of sheet and recalculation of any formulas

Spreadsheet

answered on 23 Jul 2024

2 answers

15 views

Add button to GROUP HEADER

How is it possible to add a fully functional icon button in grids Group Header ?

My approach :

                @(Html.Kendo().Grid<ClaimViewModel>()
                    .Name("dgvClaims")
                    .Columns(columns =>
                    {
                        columns.Command(command => command.Custom("Vorgang hinzufügen").IconClass("save").Click("showDetails")).Width(300);
                        columns.Bound(p => p.Id).Filterable(false).Visible(false);
                        @* columns.Bound(p => p.ClaimId).ClientGroupHeaderTemplate(@"<div>Alfred Mustermann</div><div><button name=""textButton"" theme-color=""ThemeColor.Primary"" type=""button"" icon=""arrow-rotate-cw"" on-click=""onClick"">Add Button</button></div>"); *@
                        columns.Bound(p => p.ClaimId).ClientGroupHeaderTemplate(@"<div>
                                                                                    <div>Alfred Mustermann</div>
                                                                                    <kendo-button name=""textButton"" type=""button"" theme-color=""ThemeColor.Primary"">Add Button</kendo-button>
                                                                                  </div>");
                        columns.Bound(p => p.VnName).Width(300);
                        columns.Bound(p => p.ClaimState).Title("Status").Width(100);
                        columns.Bound(p => p.ClaimnumberInsurance).Title("Schadennummer VU").Width(150);
                        columns.Bound(p => p.ClaimnumberRisktaker).Title("Schadennummer Risikoträger").Width(150);
                        columns.Bound(p => p.ClaimFriendlyName).Title("Beschreibung").Width(200);
                        columns.Bound(p => p.ClaimDate).Title("Schadendatum").Format("{0:dd.MM.yyyy}");
                        columns.Bound(p => p.ClaimItemReference).Title("Verweis auf Mappeneintrag").Width(200);
                        columns.Bound(p => p.ClaimItemReferenceType).Title("Eintragstyp").Width(150);
                        columns.Bound(p => p.ClaimItemRemark).Title("Bemerkungen").Width(150);

                    })
                    .Selectable(s => s.Mode(GridSelectionMode.Single)
                    .Type(GridSelectionType.Row))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()

                   .HtmlAttributes(new { style = "height:650px;" })
                   .Events(events => events.Change("onChangeCustomerGrid"))
                   .DataSource(dataSource => dataSource.Ajax()

Grid

answered on 22 Jul 2024

1 answer

12 views

Kendo Editor from Grid column

Hello,

Is it possible to use a Grid's built-in popup editor to display a Kendo Editor component? I'm finding some solutions that are close, but not quite exactly what I'm looking for. Basically one of the columns in the Grid has a need to allow rich HTML text when creating/editing, and the Kendo Editor seems to be the best way to do this.

Editor

Grid