The ability to export a grid to excel has been a great addition, we would like the ability to export in CSV and XML also.
I'm currently evaluating the ASP .Net Core Components and whilst I'm liking it so far, I have to say - the documentation leaves a lot to be desired.
At the moment, I am trying to use grid and looking at documentation, I have no idea if I am meant to be looking in Kendo.Mvc.UI.Fluent or Kendo.Mvc.UI - and when I am there and find an item, there just isn't enough detail. In addition, the demos section appears to actually be more helpful and I'm constantly looking there.
What caused me to write this is that I have simply enabled GridFilterMode.Row on an instance and whilst I like it, I want to change the default from "Is Equal To" to "Contains"... I have been experimenting for the past few hours without any luck and I'm going round in circles on documentation:
I can see that Filterable requires GridFilterMode, but the documentation is lacking - https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI/GridFilterMode#kendomvcuigridfiltermode
I then try to find the filterable modes documentation, but, half the features/methods just don't seem to have any affect whatsoever.
Personally, I'm having great luck learning about your components from the demo section and adapting the code to suite my needs - but, if there isn't a demo, it appears to be a very hard task to learn what is and isn't possible.
Per the documentation for the Grid's Search Panel:
"When the server operations are enabled, you can search only by using string fields."
This is an oddly-specific limitation to have that causes an awkward user experience. Grids in some areas with limited data might use client operations and, as a result, the Search Panel is capable of searching all columns in a Grid. Other areas, however, might have grids with significantly more data and be using server operations for performance reasons. A side-effect of this would mean the Search Panel is incapable of filtering on non-string fields. This not only might lead to unexpected results to an end-user, but also requires the developer to explicitly list each string field that can be searched. If a developer forgets to list only string fields, the default action will be for it to attempt to filter on all fields. If any fields happen to not be strings, you still get a loading indicator as if it's attempting to filter, but the Ajax request silently fails and returns an error 500 behind the scenes.
There are some manual workarounds discussed here, as well as some information as to why this limitation exists. It seems like the problems causing these limitations are known, as are some rough workarounds to get around it. It would be great if we could get some official support to address this limitation so developers aren't left to either work around it on their own or avoid using this feature altogether. This feature would be great if it weren't for this limitation. A single place to quickly and easily type in something to filter on, and have that filter applied against all columns could definitely save some time and be very useful, but with this limitation with a pretty technical explanation (from an end-user perspective), the unexpected mixed results could instead lead to confusion and frustration, and distrust of this feature.
Hi guys,
I found out, that the QueryableExtension always generates a ToLower for strings filtered with the equals operator. The ToLower is applied by the FilterOperatorExtensions in this method:
private static Expression GenerateEqual(
Expression left,
Expression right,
bool liftMemberAccess)
{
if (left.Type == typeof (string))
{
left = FilterOperatorExtensions.GenerateToLowerCall(left, liftMemberAccess);
right = FilterOperatorExtensions.GenerateToLowerCall(right, liftMemberAccess);
}
return (Expression) Expression.Equal(left, right);
}
It would be nice, if the to lower is controllable with a parameter. At the moment it generates a to lower in the sql query, which generates a lot of overhead in some situations with large tables.
At the moment I remove all "equal to" filter and apply it manually to the IQueryable object.
Best regards
Moritz
I was wanting to create a multiselect filter inside the kendo grid that will filter an array column, NOT a simple string column. Just adding the .Filterable(ftb => ftb.Multi(true)) does display a basic 'multiselect' with just checkboxes in it, which is not ideal , but does work. But, when you click filter, the grid becomes empty. I had to use a clienttemplate() function, to return an html object like so:
export function MultiRowTemplate(data) {
if (data == null) {
return "";
}
var row = "";
for (var i = 0, len = data.length; i <
len
; i++) {
row += data[i].Description + "<br/>";
}
return row;
}
My column is:
columns.ForeignKey(a => a.DisplayExp, (System.Collections.IEnumerable)ViewData["Exp"], "Id", "Description").ClientTemplate("#= MultiRowTemplate(data.DisplayExp) #").Filterable(ftb => ftb.Multi(true)).Title("Experience");
the code for the foreign key doesn't make much sense as it's an array column, but that was pointed to by telerik support on other forum posts.
So, there must be a way to hook into that column and run some custom code to return to the grid the filtered values? i've seen examples for jquery, and mvc, but theres nothing for .net core. This should just work out of the box, as I don't think this is an uncommon need. Could you give me an example or point me in the right direction?
The DataSource's property groupPaging: true prevents the Grid's group from expanding if it has a defined groupHeaderColumnTemplate.
Also reproducible in the Core wrapper where an error is thrown: kendo.all.js:8743 Uncaught TypeError: Cannot read property 'hasSubgroups' of undefined
groupPaging is not compatible with the groupHeaderColumnTemplate
groupPaging and the groupHeaderColumnTemplate should be compatible
Kendo UI version: 2021.2.616
Browser: [all]
IgnoreCase property is missing for the filterable options of the column:
https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/GridBoundColumnFilterableBuilder
The option is documented in:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.ignorecase
Currently, the functionality for creating a toolbar template with TagHelpers is not available.
Please ensure that FilterableMessageBuilder configurations are applied to the Filter's menu when it is placed within a ColumnMenu or expose configurations to control the messages of the Filter menu within the GridColumnMenuMessagesBuilder.
Here is an example REPL that showcases the configuration doesn't have effect
.Filterable(f => f.Messages(m =>
{
m.And("Custom And");
m.Or("Custom Or");
}))
unless ColumnMenu() is commented out.
The Kendo UI Grid's pager for UI for ASP.NET Core does not have an "All" option and it can't be configured in the Razor syntax.
Using the Kendo UI Grid's pageable.PageSizes, the ALL option is not available for UI for ASP.NET Core as it's only an Int32[].
The All option should be included like in the UI for ASP.NET MVC Razor Syntax.
Enhancement
Add support for setting ClientHeaderTemplate as a function in Html Helper Grid
Current behavior
ClientHeaderTemplate can be set only as a string
Expected/desired behavior
ClientHeaderTemplate shall allow executing a function
Environment
Kendo UI version: all
Browser: all
In a .NET 7 project when TagHelper Grid is configured and RuntimeCompilation is employed, starting from version 2023.2.606 an unhandled exception is thrown.
When run a runtime error occurs
TagHelper Grid should exhibit the same behavior as HtmlHelper ones.
I want to be able to expand / collapse grouped column headers in my grid (ASP.NET Core). I have found this example which achieves what I need (https://docs.telerik.com/kendo-ui/knowledge-base/grid-expand-collapse-columns-group-button-click), however the HeaderTemplate() method appears to be unavailable. See my placement below.
I am using the following packages:
KendoUIProfessional, Version="2020.3.915"
Telerik.UI.for.AspNet.Core, Version="2020.3.915"
@(Html.Kendo().Grid<
RegulationViewModel
>
()
.Name("grid")
.Columns(columns =>
{
columns.Select().Width(75).Locked(true);
columns.Group(g => g
.Title("Key information")
.HeaderTemplate("Key info <
button
class
=
'k-button'
style
=
'float: right;'
onclick
=
'onExpColClick(this)'
><
span
class
=
'k-icon k-i-minus'
></
span
></
button
>")
.Columns(i =>
{
i.ForeignKey(p => p.ContinentId, (System.Collections.IEnumerable) ViewData["continents"], "Id", "ContinentName")
.Width(110).Locked(true);
i.ForeignKey(p => p.AreaId, (System.Collections.IEnumerable) ViewData["areas"], "Id", "AreaName")
.Width(150).Title("Area").Locked(true);
})
);
columns.ForeignKey(p => p.CountryStateProvinceId, (System.Collections.IEnumerable)ViewData["countries"], "Id", "CountryStateProvinceName")
.Width(150).Locked(true);
columns.Command(command => command.Destroy()).Width(100);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Custom().Text("Mark reviewed").Name("review");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.PersistSelection()
.Navigatable()
.Resizable(r => r.Columns(true))
.Reorderable(r => r.Columns(true))
.Sortable()
.Filterable(f => f
.Extra(false)
.Messages(m => m.Info("Show items with:"))
.Operators(operators => operators
.ForString(str => str
.Clear()
.Contains("Contains"))
)
)
.Scrollable(sc => sc.Virtual(true))
.Events(e => e
.Edit("forceDropDown")
.DataBound("onDataBound")
.FilterMenuInit("filterMenuInit")
)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.ContinentId).DefaultValue((ViewData["defaultContinent"] as ContinentViewModel).Id);
model.Field(p => p.AreaId).DefaultValue((ViewData["defaultArea"] as AreaViewModel).Id);
model.Field(p => p.CountryStateProvinceId).DefaultValue((ViewData["defaultCountry"] as CountryStateProvinceViewModel).Id);
})
.Read(read => read.Action("GetRegulations", "RegulationIndex").Type(HttpVerbs.Get))
.Create(create => create.Action("AddRegulations", "RegulationIndex").Type(HttpVerbs.Post))
.Update(update => update.Action("UpdateRegulations", "RegulationIndex").Type(HttpVerbs.Post))
.Destroy(delete => delete.Action("DeleteRegulations", "RegulationIndex").Type(HttpVerbs.Delete))
))
### Bug report
When a specified gird column has a property '.EditorTemplateName("Date")', the default DatePicker editor is not rendered properly.
### Reproduction of the problem
1. Create a new Telerik ASP.NET Core MVC Application by using the "Create New Project Wizard". Use the "Grid and Menu" Template;
2. Make the Grid "InLine" editable;
3. Set the property '.EditorTemplateName("Date")' to the "OrderDate" grid column;
4. Run the application and try to edit an existing record. The DatePicker editor is not displayed as expected.
Attached is a runnable sample for reproduction.
### Expected/desired behavior
The closing bracket in the DatePicker configuration should be moved at the end:
//Current configuration
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m)).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})
//Updated configuration
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))
### Environment
* **Kendo UI version: 2022.1.301
* **jQuery version: 1.12.4
* **Browser: [all]
When a hidden column of the Grid is configured as .Exportable(true) in the wrappers the exportable property doesn't get serialized
columns.Bound(p => p.OrderID).Exportable(export=>export.Excel(true)).Hidden().Filterable(false);
Setting the Exportable(true) on a hidden column should correctly include it in the export
1559232
### Bug report
When the Grid group paging is enabled, and the Grid is grouped, when the user search through the built-in search panel, and expand a specified group, an infinite loop appears. The Grid sends Read requests, and the server returns empty "data" property.
### Reproduction of the problem
1) Create a Grid bound to remote data and enable the group paging feature.
2) Group the Grid by a specified column.
3) Enter a value in the Grid search panel (the grouped data is filtered).
4) Expand a specified group --> it causes an infinite loop.
5) Open the browser Network tab to review the Read requests.
A Dojo sample for reproduction: https://dojo.telerik.com/EsuQoQiP
### Expected/desired behavior
The grouped Grid data should be filtered through the search panel as expected.
### Environment
* **Kendo UI version: 2023.1.117
* **jQuery version: 1.12.4
* **Browser: [all]
Is it possible to add an "attributes" option to the editable.window configuration that allows the addition of HTML attributes to the window?
For example:
//HtmlHelper Grid
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
...
.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(wnd => wnd.HtmlAttributes(new { @class= "my-custom-window" })))
)
//Kendo UI for jQuery Grid
$("#grid").kendoGrid({
...
editable: {
mode: "popup",
window: {
attributes: {
"class": "my-custom-window"
}
}
}
});
I'm in the process of rewriting all Kendo components to use CSP compatible templates. I'm looking at https://docs.telerik.com/aspnet-core/html-helpers/template/overview which shows how we'd use TemplateComponentName() for popup editors and that we would need to rewrite everything in the popup editor to use Kendo Template's AddHtml or AddComponent methods.
Original:
<div class="mb-2 row required">
@Html.LabelFor(model => model.FileName, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
<div class="col-sm-6">
@(Html.Kendo().TextBoxFor(model => model.FileName).HtmlAttributes(new { @class = "w-100" }))
</div>
</div>
<div class="mb-2 row">
@Html.LabelFor(model => model.FileDescription, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
<div class="col-sm-6">
@(Html.Kendo().TextBoxFor(model => model.FileDescription).HtmlAttributes(new { @class = "w-100" }))
</div>
</div>
Rewritten:
@(Html.Kendo().Template()
.AddHtml("<div class='mb-2 row required'>")
.AddHtml(@<text>
@Html.LabelFor(model => model.FileName, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
</text>)
.AddHtml("<div class='col-sm-6'>")
.AddComponent(c => c.TextBoxFor(model => model.FileName).HtmlAttributes(new { @class = "w-100" }))
.AddHtml("</div></div>")
.AddHtml("<div class='mb-2 row'>")
.AddHtml(@<text>
@Html.LabelFor(model => model.FileDescription, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
</text>)
.AddHtml("<div class='col-sm-6'>")
.AddComponent(c => c.TextBoxFor(model => model.FileDescription).HtmlAttributes(new { @class = "w-100" }))
.AddHtml("</div></div>")
)
While this works, this markup seems much harder to read than the original. Could this be made to be simpler? Ideally I'd like to be able to drop my existing mix of html and kendo components in one method and it'd parse through to render the template properly.