Good evening,

I've just upgraded my project from using Telerik UI ASP.NET Core 2022.1.301 to 2024.3.806.

I previously used this article to add icons to my menu items:

Add Font Icons to Menu Items - Kendo UI Menu - Kendo UI for jQuery (telerik.com)

After the upgrade, the icons are no longer appearing.

I'm using the following:

menu.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-gears\"></span>&nbsp;Site Administration").Url("~/Admin")
menu.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-user\"></span>&nbsp;" + User.Identity.Name)

I appreciate that the way the icons works has changed since 2023 R3, but most of the icons seem to work without me having to install anything extra (Font Icons in the Telerik and Kendo UI Design System | Design System Kit).  For example, this works:

columns.Command(command => command.Custom("View").Click("openDetailsPage").IconClass("k-icon k-i-hyperlink-open")).Width(80);

Is this because the Telerik.FontIcons and Telerik.SvgIcons 3.0.0 packages are showing under my project dependencies?

Any clarification you can give would be much appreciated.

Kind regards,

Richard

Hello everyone, while trying to implement a grid with filtering and sorting, I came across an issue that seems to be recurring. In the database, I have columns (IdLotto and IdPratica) that are numeric.
From what I’ve read, filtering and sorting of numbers are not supported, only strings are. So I tried searching and implemented my own partial solution:

var avrs = _avrService.GetFiltered().Select(a =>
            new GetAllAvr()
            {
                IdLotto = a.IdLotto.ToString(),
                IdPratica = a.IdPratica.ToString()               
            });

var dsResult = avrs.ToDataSourceResult(request);

GetFiltered returns IQueryable of db's entity.

Partial because filtering works, but sorting doesn’t. Since string sorting is different from numeric sorting, the result is actually an incorrect order.

I wonder if I'm doing something wrong, if I need extra support from jQuery, or if I need to fully customize filtering and sorting in the controller method.

Thanks for the help

I have a grid that has first and last name columns. There are people whose last name is 'Null' (a STRING value, NOT the database/JSON value null). The last name cell is blank for these people. Is this a bug or a feature? Is there any way to configure the grid to display the actual value 'Null' instead of blank?

Here's part of the JSON:

        {
            "FirstName": "John",
            "LastName": "Null",
            "GradeValue": "2"
        },
        {
            "FirstName": "Jane",
            "LastName": "Null",
            "GradeValue": "2"
        },

As part of a report I have a list of supervisor timeframe data (who supervised between two times). This is certainly not the only data of the report. The whole report is entered and submitted with a single button click.

This supervisor data can be edited in a grid

@Html.LabelFor(m => m.Report.GSupervisors, htmlAttributes: new {@class="form-label"})
@(Html.Kendo().Grid(Model.Report.GSupervisors)
    .Name("supervisors")
    .ToolBar(tb => tb.Create())
    .Columns(columns =>
    {
        columns.Bound(p => p.Start).Format("{0:yyyy-MM-dd HH:mm}").Width(240);
        columns.Bound(p => p.End).Format("{0:yyyy-MM-dd HH:mm}").Width(240);
        columns.Bound(p => p.Supervisor);
    })
    .Navigatable()
    .HtmlAttributes(new { @class = "mt-3" })
    .Editable(e => e.Enabled(true)
        .Mode(GridEditMode.InCell)
        .CreateAt(GridInsertRowPosition.Bottom))
    .Selectable(sel => sel.Mode(GridSelectionMode.Single))
)

All three fields are required and Start < End. During editing, the grid correctly creates a red border with an error message if no data is entered in a field when exiting. But still it is possible to have incorrect data (e.g., enter only a Start, but not the other fields). This is caught when the data is submitted and the report is redisplayed with validation errors.

An example of the validation error would have the key Report.GSupervisors[2].Supervisor (see screengrab).

However, the grid does not show what the errors are and which cells contain the errors. I expected the red border around the cells and to see the error message when hovering or entering the cell. This does not happen.

I have found several examples about error handling, but all of them use remote binding. In my case local data binding is used. Also the examples use the OnError event of the datasource to show a popup window, which is really not the way I would like to address this.

How can I achieve the desired error handling?

Hi everyone, I am trying to implement the following functionalities with Grid and Server side filtering/paging:

• For the "Subject" column, I would like a dropdown with the ability to choose between two static values: "NPF" and "PF".

columns.Bound(p => p.TipoSoggetto).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
 
And the script -->
function tipoSoggettoFilter(element) {
            element.kendoDropDownList({
                dataSource: {
                    data: ["NPF", "PF"]
                }
            });
        }

• For the "Operator" column, I would like to display a dropdown with values taken from a list item with value and text. I can see the dropdown and the filter works, but I don't see the corresponding text value in the grid; the cell simply remains empty (even though the filter works correctly).

var operatori = _ctx.Users.OrderBy(u => u.Email).Select(e => new SelectListItem
        {
            Text = e.NomeOperatore,
            Value = e.Id.ToString()
        }).ToList();
        ops.AddRange(operatori);
        ViewData["Operatori"] =  new SelectList(ops, "Value", "Text");
        ViewBag.Operatori = new SelectList(ops, "Value", "Text");

@(Html.Kendo().Grid<AVR.Models.Output.GetAllAvr>()
            .Name("AVRgrid")
            //.ToolBar(t => t.Search())
            .Columns(columns =>
            {
               
                columns.Bound(p => p.DataInserimento).Format("{0:dd/MM/yyyy}").Groupable(false);
                columns.Bound(p => p.Subject).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
                columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewData["Operatori"], "Text", "Text")
                    .Title("Operator").Width(200);
                columns.Command(command =>  command.Custom(" ").IconClass("fa-solid fa-eye").Click("showDetails")).Width(45);
            })
            .Pageable(p => { p.PageSizes(new[] { 10, 20, 30 }); })
            .Sortable()
            //.Scrollable()
            .Groupable()
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))

            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Field(p => p.UserId).DefaultValue(1);
                })
                .PageSize(10)
                .Read(read => read.Action("GetAllFiltered", "AVR"))
            )
        )

I have the following bit of configuration on a grid:

<filterable enabled="true" extra="true">
    <operators>
        <date isnotnull="Is set" isnull="Is not set" lt="Before" gte="On or after" />
    </operators>
</filterable>

which results in the filter menu in the attached image.  The problem is there is no obvious way for a user to select a single criteria.  The And/Or dropdown doesn't have a "Just The Above" option.  From looking at what is sent to the server side in the debugger, I found that if the user picks a second condition which requires an argument (such as equal, not equal, before, after, etc.) but doesn't provide the argument then the filter menu logic will only include the top condition.  But that's not particularly intuitive to users.  And given that the first condition in the list on my date columns (and hence the default) is "Is Not Set", then users would have to explicitly change the bottom condition in order to only have a single condition.