Questions on UI for ASP.NET Core Forum

2 answers

1.7K+ views

Error when the grid is loading data with grouping

Hello

I have found an error when the grid is loading data by Ajax with grouping in Asp.net core 6.0 and EF core 6.0 in versión.
I am using the version Telerik.UI.for.AspNet.Core 2022.1.412.

The method Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult is not able to perform the query when DataSourceRequest have included a grouping.

Now, I am going to write down some code to facilating the compressino of issue
The classes in the model uses to load the grid are:

public class TipoVia
{
public Guid Id {get; set;}
public string Codigo {get; set;}
public string Descripcion {get; set;}
}

public class DataContext : DbContext
{
public DbSet<TipoVia> TiposVia { get; set; }
}

In the view the telerik grid is configured with Ajax the next way:

@Html.Kendo().Grid<TipoVia>.Name("grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Codigo);
                        columns.Bound(p => p.Descripcion);
}
.DataSource(dataSource =>
                              dataSource.Ajax().PageSize(10)
                              .Read(read => read.Action("GetData", "ControllerTipoVia").Data("obtenerModel").Type(HttpVerbs.Post))
                              );

In the controller the method that It does the loading is:

 public virtual Task<IActionResult> ObtenerPaginaKendo([DataSourceRequest]DataSourceRequest request, TConsultaViewModel viewModelVista)
{
var dsResult = viewModelVista.DataContext.TiposVia.ToDataSourceResult(request);
return Task.Run<IActionResult>(() => Json(dsResult));
}

Finally, if It is grouped by TipoVia.Codigo the error is the next:

System.InvalidOperationException
HResult=0x80131509
Mensaje = The LINQ expression 'DbSet<TipoVia>()
.OrderBy(c => c.Nombre)
.Select(entidad => new {
Codigo = entidad.Codigo,
Nombre = entidad.Descripcion
}
)
.OrderBy(item => item.Codigo)
.Skip(__p_0)
.Take(__p_1)
.GroupBy(item => item.Codigo)
.OrderBy(group1509060 => group1509060.Key)
.Select(group1509060 => new AggregateFunctionsGroup{
Key = group1509060.Key,
ItemCount = group1509060
.AsQueryable()
.Count(),
HasSubgroups = False,
Member = "Codigo",
Items = group1509060
}
)' could not be translated. Additional information: Translation of 'Select' which contains grouping parameter without composition is not supported. Either rewrite the query in a form that can be translated, or switch to client evaluation explicitly by inserting a call to 'AsEnumerable', 'AsAsyncEnumerable', 'ToList', or 'ToListAsync'. See https://go.microsoft.com/fwlink/?linkid=2101038 for more information.
Origen = Microsoft.EntityFrameworkCore
Seguimiento de la pila:
en Microsoft.EntityFrameworkCore.Query.Internal.NavigationExpandingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
en Microsoft.EntityFrameworkCore.Query.Internal.NavigationExpandingExpressionVisitor.Expand(Expression query)
en Microsoft.EntityFrameworkCore.Query.QueryTranslationPreprocessor.Process(Expression query)
en Microsoft.EntityFrameworkCore.Query.QueryCompilationContext.CreateQueryExecutor[TResult](Expression query)
en Microsoft.EntityFrameworkCore.Storage.Database.CompileQuery[TResult](Expression query, Boolean async)
en Microsoft.EntityFrameworkCore.Query.Internal.QueryCompiler.CompileQueryCore[TResult](IDatabase database, Expression query, IModel model, Boolean async)
en Microsoft.EntityFrameworkCore.Query.Internal.QueryCompiler.<>c__DisplayClass9_0`1.<Execute>b__0()
en Microsoft.EntityFrameworkCore.Query.Internal.CompiledQueryCache.GetOrAddQuery[TResult](Object cacheKey, Func`1 compiler)
en Microsoft.EntityFrameworkCore.Query.Internal.QueryCompiler.Execute[TResult](Expression query)
en Microsoft.EntityFrameworkCore.Query.Internal.EntityQueryable`1.System.Collections.IEnumerable.GetEnumerator()
en Kendo.Mvc.Extensions.QueryableExtensions.Execute[TModel,TResult](IQueryable source, Func`2 selector)
en Kendo.Mvc.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState, Func`2 selector)
en Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState)
en Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
en GiaBase.AspMvc.Controllers.ConsultaController`5.ObtenerPaginaKendo(DataSourceRequest request, TConsultaViewModel viewModelVista) en C:\Users\U178476\Documents\Repo\comun\codigo\GiaBase\src\GiaBase.AspMvc\Controllers\ConsultaController.cs: línea 419
en Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.TaskOfIActionResultExecutor.<Execute>d__0.MoveNext()

Grid

answered on 29 Sep 2024

0 answers

36 views

Telerik UI for ASP.NET Core packages not available in trial

Closed

General Discussions

updated question on 27 Sep 2024

1 answer

153 views

Issue Changing Background Colors for Tabstrip Items

Hi,

I am having a pretty difficult time getting the tabstrip coloring that I am looking for. The end goal I was going for was a dark blue background with white text and the active tab to be shown in a different background color. Here is what I have so far. I am changing the text via inline styling, trying to follow the demo for Tabstrip. I have the class of .k-link defining the background color. This works well and does show the correct styling. However, when adding the red color for the selected tab via the .k-state-active class, it does not override the .k-link class background color. If I do not define the k-link background, the color of the active tab does populate. I assume I am doing this wrong, so what is the best way to change the background color of the tab while still allowing me to change the selected tab color?

Styling

TabStrip

answered on 27 Sep 2024

0 answers

45 views

Uploader Anti-Forgery Token

Is there a way to disable sending the token in the form? We would prefer to send it in the header.

Upload

asked on 23 Sep 2024

1 answer

103 views

Add Font Icons to Menu Items

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

Menu

answered on 17 Sep 2024

1 answer

56 views

Grid - Filter and Order int to string

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

Grid

answered on 17 Sep 2024

1 answer

77 views

.NET Core QR Generator Export to image

I am looking at a business need to add QR codes to PDF exports. I see that there is an option to export as an image in the JQuery version of the product exportImage - API Reference - Kendo UI QRCode - Kendo UI for jQuery (telerik.com) but we are using the .NET Core version. I do not see anything in the documentation about how to export QR codes to an image.

QRCode

answered on 16 Sep 2024

1 answer

58 views

Grid Missing Value

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"
        },

Grid

answered on 16 Sep 2024

1 answer

47 views

Showing validation errors from the server in a Grid (local data binding)

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?

Grid

answered on 16 Sep 2024

1 answer

93 views

Dropdown filter Grid

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

And in view:

@(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"))
            )
        )

What am I doing wrong in these two approaches? Is it possible to do this, or do I need additional jQuery support?

DropDownList

Grid