It will be great if we can have a very simple "out-of-the-box" way to add a Column Chooser in the toolbar, similar to the Search Feature.
Something like Syncfusion's column chooser here:
https://ej2.syncfusion.com/aspnetcore/Grid/ColumnChooser
This will help me significantly in my development effort and provide a much better experience for my paying customers.
I have hundreds of grid tables with different schemas, columns with MinScreenWidth, and hidden columns (depending on the availability of data).
On a page, it can have multiple grid tables that are dynamically generated.
I also use View Component to generate each grid table.
The current column menu isn't perfect because I want it to only act as a filter checkbox, not a menu where a user needs to click twice to access the filtering feature. (And my users need to use the filtering mechanism A LOT)
Thanks,
Luke
Add GroupPaging method to the configuration of the Custom DataSource in Telerik UI for ASP.NET Core as available for Telerik UI for ASP.NET MVC.
Example: https://demos.telerik.com/aspnet-mvc/grid/grouppaging
Hello,
When you add any kind of filter to the grid, he is wrapped inside span with class "k-filtercell". It would be very usefull to add HtmlAttributes to the html element. Last time i wanted to add class only on the filtercell so i can customize the ui to match our theme. The idea was to have expression for each filter type so i can create css only for the filters. Most of the expressions were ok, because they were wrapped inside Template. But in cases like enum i dont want template, i want only to add class to the filtercell, so i can change it. Its not ok for one types to do the changes with filter expression, for other types to make changes with column.HtmlAttributes(...).
If not HtmlAttributes, at least .Class(...).
Regards,
Dinko
I posted this in the forums but didn't get a response so I'll try here. Per this link, and other forum posts I thought that when server operations are set to 'false' that non string types would work in the search box for the ASP MVC Core grid.
Documentation:
Another forum post reference:
https://www.telerik.com/forums/new-search-panel-and-datetime
My grid code is below. The 'PaymentType' Column is an enum and the search does not work for it. I have also tried adding this:
.Search(search=> { search.Field(f => f.PaymentType); })
but it didn't make a difference
@(Html.Kendo().Grid<B3.Services.LoanServices.LoanServiceModels.PaymentServiceModel>()
.Name("PaymentRegisterReport")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Payments_Read", "StandardReports", new { area = "Reports" }))
.PageSize(1000)
.ServerOperation(false)
)
.Columns(columns =>
{
columns.Bound(p => p.Date).Format("{0:MM/dd/yyyy}").Title("Date");
columns.Bound(p => p.LoanName).Title("Loan Name");
columns.Bound(p => p.PaymentType).Title("Payment Type");
columns.Bound(p => p.CheckNumber).Title("Check Number");
columns.Bound(p => p.Amount).Title("Amount").Format("{0:C}")
.HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align: right" });
})
.Pageable()
.Sortable()
.Filterable()
.HtmlAttributes(new { style = "font-size:12px" })
.ColumnMenu()
.ToolBar(t =>
{
t.Search();
t.Excel();
})
.Reorderable(l => l.Columns(true))
.Events( e =>
{
e.ColumnShow("saveKendoGridState");
e.ColumnHide("saveKendoGridState");
e.ColumnReorder("kendoGridColumnReorder");
})
)
When a Grid is placed inside a template (e.g. hierarchy), the # symbol needs to be escaped from strings since it is a special key for the Kendo internal logic:
https://docs.telerik.com/kendo-ui/framework/templates/overview#creating-inline-templates
This creates a problem with Unicode letters, since they are automatically encoded by the framework to values containing the # symbol on the client. Currently, a column having Unicode characters in its HtmlAttributes causes an "invalid template" error:
columns.Bound(p => p.Item).Width(200).Title("Item").HeaderHtmlAttributes(new {title = "Item with äöüÄÖÜß"});Creating a .ToolTip("Hover Text") property similar to the existing .Title("Header Text") one will resolve this issue and help users to easily provide tooltips for the column headers.
Workarounds until the issue is fixed:
Workaround 1:
columns.Bound(p => p.Item).Width(200)
.HeaderHtmlAttributes(new {
title = GetEncodedText("äöüÄÖÜß"), @class="encodedHeader" });
...
@{ string GetEncodedText(string title)
{
return Html.Encode(title).Replace("#", "\\#");
} }<script>
$(document).ready(function () {
$("div.k-grid.k-widget").each(function (i, e) {
var grid = $(e).data().kendoGrid;
grid.bind("dataBound", gridDataBound);
grid.bind("detailExpand", function (args) {
var innerGrid = args.detailRow.find("div.k-grid.k-widget").data().kendoGrid;
innerGrid.bind("dataBound", gridDataBound);
});
function gridDataBound(e) {
e.sender.element.find("th.encodedHeader").each(function (i, e) {
var headerCell = $(this);
headerCell.attr("title", $("<textarea/>").html(headerCell.attr("title")).text());
});
}
});
});
</script>2. Workaround:
columns.Bound(p => p.Item).Width(200)
.ClientHeaderTemplate("<span class='headerTemplate' title='Item with äöüÄÖÜß'>Title</span>");Event
definition:
@(Html.Kendo().Grid<OrderPosModel>()
...
.Events(e=>e.DataBound("gridDataBound"))function gridDataBound(e) {
e.sender.element.find("span.headerTemplate").each(function (i, span) {
span.parentElement.title = span.title;
});
Expose the ability to specify an Edit Form Type mode for the Grid similar to the Telerik UI for ASP.NET AJAX control:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/edit-form-types/defaultcs.aspx
Currently, the TagHelper Grid cannot bind to local DataSource as in the HtmlHelpers: https://demos.telerik.com/aspnet-core/grid/local-data-binding
Is it possible to implement it?
Bug report
When tabbing in a batch editable Grid cells do not enter edit mode.
This is a regression introduced with v 2023.2.606.
Reproduction of the problem
- Run this dojo
- Click on a cell in Product Name column - an editor is generated
- Press the Tab key
Current behavior
The corresponding Unit Price is focused, but an editor is not generated
Expected/desired behavior
The cell should enter edit mode, as with v2023.1.425 - dojo
Environment
- Kendo UI version: 2023.2.606
- Browser: [all]
Bug report
When the data source of the grid is set to WebAPI, the Batch option is not available.
Reproduction of the problem
1. Set the DataSource to WebAPI()
2. Attempt to enable the Batch(true) option.
Description
Reproducible only with the latest version of the suite - 2019.3.1023. The Batch option is available in the 2019.3.917 version.
Environment
* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [all]
Bug report
There is an edge case in the Pager's responsive configuration. If the width is between 480 and 600 pixels both the DropDownList and Buttons that allow the user to navigate through the pages are hidden.
Reproduction of the problem
- Open this Dojo
- Resize the right pane to be between 480px and 600px
- Run the Dojo
Current behavior
The buttons and dropdown are missing
Expected/desired behavior
The Pager should display a DropDownList for page selection when it is wide between 480 and 600px.
Environment
- Kendo UI version: 2023.1.114
- Browser: [all]
It would be beneficial if the Grid exposes a built-in option for explicitly setting an arrow indicator for selected rows similar to the following:
Hi Kendo Team,
I am working on Kendo UI ASP.NET Core Grid binding with SignalR. But while starting Hub and providing the Promise, I am facing an error "The "promise" option must be a Promise."
I am following this URL for reference: https://demos.telerik.com/aspnet-core/grid/signalr .
Checked on your website as well, but the issue is also coming there. Here is the URL: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.signalr
In this link, when clicking on "Open In Dojo" button, it opens a new window, then clicks on the Run button. It will generate an error in the console "Uncaught Error: The "promise" option must be a Promise.".
Please check the attached snapshot.
Please reply asap. Thanks in advance!
Bug report
The TagHelper Grid's TagHelper is not correctly serialized and cannot be used to export hidden columns.
Reproduction of the problem
- Set the exportable TagHelper for a hidden column to enabled.
<columns>
<column field="Discontinued" hidden="true">
<exportable enabled="true" />
</column>
</columns>
- Open the following REPL example.
- Export the Grid and observe the exported document.
Current behavior
The Grid TagHelper does not export hidden columns if the exportable TagHelper is enabled identically to the Kendo UI for jQuery Grid column exportable option.
Expected/desired behavior
The Grid TagHelper should be able to export hidden columns if the exportable TagHelper is enabled identically to the Kendo UI for jQuery Grid column exportable option.
Environment
- Kendo UI version: 2022.3.1109
- Browser: [all]
Overview
Currently, the ASP.NET Core Grid Columns's Template() method does not expose the ability to provide a delegate. In comparison to the ASP.NET MVC Grid Column's Template() method:
It would be useful to add this option to the ASP.NET Core Grid, as it will allow the configuration for multiline templates. For example:
.Columns(columns =>
{
columns.Template(@<text>
<div>#= OrderID # </div>
<div>#= Discontinued # </div>
</text>);
})
Current behavior
The Columns.Template() method of the Grid does expose a delegate overload.
Expected/desired behavior
The Columns.Template() method of the Grid should expose a delegate overload.
Environment
- Kendo UI version: 2023.2.718
- Browser: [all]
### Bug report
When a non-sortable Grid column header is hovered, the mouse cursor indicates that it is sortable.
### Reproduction of the problem
1. Create a sortable Grid with a non-sortable column.
2. Hover the column header.
3. Mouse cursor is a "pointer".
Here is a dojo sample for reproduction: Untitled | Kendo UI Dojo (telerik.com)
### Expected/desired behavior
Only the headers of the sortable Grid columns should be indicated with a "pointer" when hovered.
### Environment
Kendo UI version: 2022.6.621
jQuery version: 1.12.4
Browser: [all]
Bug report
Group Paging is not working as expected when the Kendo UI Grid is populated from data deserialized from a file and multiple groups are defined.
Reproduction of the problem
Using the UI for ASP.NET Core Grid, populate it with a file, set GroupPaging to true, add more than one group, and set the default serialization:
builder.Services.AddControllersWithViews()
.AddJsonOptions(options =>
options.JsonSerializerOptions.PropertyNamingPolicy = null);@(Html.Kendo().Grid<MyViewModel>()
.Name("grid")
.Groupable()
.Scrollable(s=>s.Virtual(true))
.DataSource(dataSource=>dataSource
.Ajax()
.GroupPaging(true)
.PageSize(50)
.Read("ReadFromFile", "HomeController")
.Group(x=>
{
x.Add(y=>y.Group1);
x.Add(y=>y.Group2);
})
)
//...) Current behavior
With multiple groups, the follow error message will appear:
System.ArgumentNullException: Value cannot be null. (Parameter 'source')
at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
at Kendo.Mvc.Infrastructure.Group.InitializeSubgroups()
at SubgroupsGetter(Object )
at System.Text.Json.Serialization.Metadata.JsonPropertyInfo`1.GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryWrite(Utf8JsonWriter writer, T value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.Converters.IEnumerableConverter`1.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.Metadata.JsonPropertyInfo`1.GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryWrite(Utf8JsonWriter writer, T value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.WriteCore(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.WriteCoreAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.JsonSerializer.WriteCore[TValue](JsonConverter jsonConverter, Utf8JsonWriter writer, TValue& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.JsonSerializer.WriteStreamAsync[TValue](Stream utf8Json, TValue value, JsonTypeInfo jsonTypeInfo, CancellationToken cancellationToken)
at System.Text.Json.JsonSerializer.WriteStreamAsync[TValue](Stream utf8Json, TValue value, JsonTypeInfo jsonTypeInfo, CancellationToken cancellationToken)
at System.Text.Json.JsonSerializer.WriteStreamAsync[TValue](Stream utf8Json, TValue value, JsonTypeInfo jsonTypeInfo, CancellationToken cancellationToken)
at Microsoft.AspNetCore.Mvc.Infrastructure.SystemTextJsonResultExecutor.ExecuteAsync(ActionContext context, JsonResult result)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
Expected/desired behavior
Server GroupPaging should work as expected with multiple groups and the default serialization that is delivered with ASP.NET Core. An example would be this live demo.
Workaround
Use the Newtonsoft library to set the serialization options for the application:
builder.Services.AddControllersWithViews()
.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver());
Environment
- Kendo UI version: 2023.2.606
- jQuery version: All Supported Versions
- Browser: all