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?
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.
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
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))
))
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.
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;
});
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");
})
)
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
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
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
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 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]
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