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)) ))
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 Team,
I'd like to request adding a configuration to the Kendo UI Grid or ExcelExport event which would be a setting to autofit the Excel sheet columns instead of changing the workbook.sheets.columns.autowidth.
Thank you!
When a hierarchy grid id contains a dot, the grid fails to generate its detail template.
The dot(and other legal HTML identifier characters) should be escaped internally by Kendo, so that they can be selected by jQuery and the grid initialized.
Here is a sample Dojo to illustrate:
Hi Team ,
I Am trying to export kendo grid content from Server side as i need to do some modification(View model) before exporting to excel. and also i need to add some custom headers while exporting.
Can you please provide me the solution with example with this scenario.
Thanks,
Narasegowda
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
At current when working with the french culture, the year in the date will default be represented with 2Y (dd/MM/yy)
This potentially creates a problem for dates>2030, a date like 01/01/30 would be save as 1930 instead of 2030.
When looking at other culture such nl-BE, en-GB, 4 digits are always used for the year.
I propose to change this also for the french culture so that dd/MM/yyyy would become the standard format.
PS: You can download the culture file and change it, but you'd experience a problem with the popup editor in combination with a display template... in this case the local culture file will be ignored and 2 digits would still be used for the date
With batch editing there are no indicators that the
grid is "dirty" after you hit delete, but before you hit the save
changes button. [Note, when a user edits a cell, the top corner display a
small red flag letting the end user know the cell is dirty and has not
been saved/synced to the database yet.] This should be added to let the user know the delete action has not been performed and is in a "pending" state until the save button is pressed. This would be very helpful for UX purposes.
In the meantime, I just apply my own "dirty" class to the save button so end users know to press it before leaving the page if they would like to keep their changes.
Currently, the functionality for creating a toolbar template with TagHelpers is not available.
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?
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.