### Bug report

When the filter is applied through the search panel, the query (more specifically, the filter expressions) is not built correctly. This results in displayed rows that have values that do not match the value from the search panel.

### Reproduction of the problem

1. Enable Search panel and group paging of the grid.

2. Set a value in the search panel and group by a column.

3. Expand the group and verify that there are items with values that do not match the filter expression from the search panel.

Short video demonstration:

https://screencast-o-matic.com/watch/crXFlXVI3i0

### Expected/desired behavior

The returned results should comply with the filter expression built from the Search panel.

### TicketID:
_1543306

### Additional notes and explanation

The Search panel builds the filter expression with the logic operator "or". While this is correct when the actual query is further built from the data source's internals (group function of the kendo.data.js file), the filter will be built with the "or" logic instead of "and". This query has to be restructured in order to send two filter objects with the "and" logic. The first filter object should contain all filter expressions built from the search panel with the "or" logic operator and the second filter object should contain an expression with the operator "eq", the field by which the group is built, and the value. The two filter objects should be combined with the "and" logic. 

### Environment

* **Kendo UI version:** 2021.3.1109
* **jQuery version:** 1.12.4
* **Browser:** [all]

Hi

Just to let you know that the Demo for the Grid SignalR feature is showing an error.

(see screen dump attached)

Thanks
Darryl

Currently a DateTime property of a nested object does not get parsed when used as a column in the Grid:

public class MyClass
{
   public MyOtherClass Item{get;set;}
}

public class MyOtherClass
{
    public DateTime CreatedAt{get;set;}
}

and Formatting cannot be applied:

 columns.Bound(p => p.Item.CreatedAt).Title("Time").Format("{0:D}");

Bug report

The DataSource's property groupPaging: true prevents the Grid's group from expanding if it has a defined groupHeaderColumnTemplate.

Reproduction of the problem

1. Open this Dojo
2. Try to expand the Grid's groups

Also reproducible in the Core wrapper where an error is thrown: kendo.all.js:8743 Uncaught TypeError: Cannot read property 'hasSubgroups' of undefined

Current behavior

groupPaging is not compatible with the groupHeaderColumnTemplate

Expected/desired behavior

groupPaging and the groupHeaderColumnTemplate should be compatible

Environment

• Kendo UI version: 2021.2.616

• Browser: [all]

At moment the "ForeignKey" method supports only predicates. Is it possible to implement a String overload (a screenshot is attached)?

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

Hi folks!

I am using the Grid's ColumnMenu with its new ComponentType-property set to "modern" like this:

@(Html.Kendo().Grid<my_fancy_web_application.ViewModels.ProjectListViewModel>()

                .Name("myGrid")
                .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Willst Du diesen Eintrag wirklich löschen?"))
                .Sortable()
                .Scrollable()                
                .Pageable(pageable => pageable.Enabled(false))
                .ColumnMenu(columnMenu => columnMenu.ComponentType("modern"))
// ... going on with some further definitions
)

In the <head>-Tag of my _Layout.cshtml file, I have set the Kendo Culture to Swiss German:

<script>kendo.culture("de-CH")</script>

What I now observed is, that the buttons "Apply" and "Reset" did not get translated properly and remain in English (see Column_Menu_Reset_Apply_Button.png). Whereas other messages are correctly translated. 

I tried to find out which message property was set there, so that I could add it manually to the "kendo.messages.de-CH.min.js" (as by the way I still have to do for e.g. the Grid's searchbar placeholder "Search..."). 

In the loaded kendo.all.min.js (2021.1.330) I discovered, that there was no message property in place, and the texts were rather hard-coded:

'<div class="k-columnmenu-actions">' + '<button class="k-button" type="button">Reset</button>' + '<button class="k-button k-primary" type="button">Apply</button>' + '</div>' + '</div>'

With the Chrome's dev tools and the source map, I found the above code on line 55815 by searching for the class "k-columnmenu-actions".

Could you please change the mentioned code to make use of the kendo.messages-properties and update the culture-specific kendo.messages files accordingly?

Thanks in advance!

Kind regards,

Janick

The Custom() DataSource has capability to set the initial Page of the grid:

        .PageSize(20)
        .Page(4)

While the Ajax() DataSource does not. It would be nice if it gets added.

Currently, you can use the page() method for local or .Ajax() bound grid:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page

Or query:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/query

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:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/search-panel?_ga=2.40480546.1407553043.1611076638-1335478734.1604974711

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

It's kind of difficult to describe in the subject, but here's the scenario. In an ASP.NET Core 3.1 web app, we have some different Kendo Grids that are generated by using the HTML Helper. Some of these use server operations while others do not. Following the information in the Persist State demo, I'm working on changes to save the grid options (sorting, filtering, page number, etc.) when the user navigates away from a page, then restore them the next time it's loaded. With a grid we have using server operations, this is working well so far. For a grid we have using client operations, on the other hand, I'm getting unexpected results.

Example:

@(Html.Kendo().Grid(new[]
   {
      new { ProductName = "Product 1", UnitPrice = 3.50 },
      new { ProductName = "Product 2", UnitPrice = 5.30 }
   })
   .Name("TestGrid")
   .NoRecords(n => n.Template("No records found"))
   .Columns(columns =>
   {
      columns.Bound(p => p.ProductName);
      columns.Bound(p => p.UnitPrice);
   })
   .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(20)
       .ServerOperation(false)
   )
)
<script>
   $(document).ready(function () {
      var grid = $("#TestGrid").data("kendoGrid");
      var options = grid.getOptions();
      grid.setOptions(options);
   });
</script>

If you comment out the JavaScript, you get a working grid. With the JavaScript in place, this should get the options from the grid, then immediately re-apply those same options (just for testing purposes) and the grid should end up looking the same as it did before. However, the setOptions() call seems to be triggering a POST back to the same page (with the data "sort=&group=&filter=") then wiping the data from the grid and showing the "No records found" message. However, since this grid is bound to a model property and has ServerOperation(false), all of the data needed is already at the client and there is no Ajax request that exists to get this data.

This is the code from viewing the source that was rendered by the code in the View from above:

<div id="TestGrid" name="TestGrid"></div><script>kendo.syncReady(function(){jQuery("#TestGrid").kendoGrid({"noRecords":{"template":"No records found"},"columns":[{"title":"Product Name","field":"ProductName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Unit Price","field":"UnitPrice","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"pageSize":20,"page":1,"groupPaging":false,"total":2,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductName":{"editable":false,"type":"string"},"UnitPrice":{"editable":false,"type":"number"}}}},"data":{"Data":[{"ProductName":"Product 1","UnitPrice":3.5},{"ProductName":"Product 2","UnitPrice":5.3}],"Total":2}}});});</script>
<script>
   $(document).ready(function () {
      var grid = $("#TestGrid").data("kendoGrid");
      var options = grid.getOptions();
      grid.setOptions(options);
   });
</script>

I'm not sure why it's attempting an Ajax request, but that appears to be what's causing the problems. With the other grid we have that *does* use server operations, I'm assuming we're not having this same problem because it does actually require an Ajax request to read the data.

Trouble on iPad 6/7/8 with Safari.

Using grid with batch and incell edit mode.

Datepicker is not working. It just shows the text box to manually type in date.

Every once in a while the date picker pops up and stays for selection.

Sometimes I see the dat picker, but it goes away suddenly before being able to set a date.

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"

Bug Report

Ticket ID:1486632

When using groupable.sort.compare with client operations and groupPaging, a JavaScript error is thrown:

Reproduction

Dojo

Environment

2020.3.915

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

Bug report

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.

Current behavior

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[].

Expected/desired behavior

The All option should be included like in the UI for ASP.NET MVC Razor Syntax.

Environment

• Kendo UI version: 2020.3.915
• Browser: all

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.

Bug report

Grid's items are not correctly calculated when a group is expanded and groupPaging is set to "true".

Reproduction of the problem

1. Open this Dojo and run it
2. Expand the "Assistant Sales Agent" group.
3. Expand the "Assistant Sales Representative" group

Current behavior

On the expand of the "Assistant Sales Agent" group, the footer displays the following:

On the expand of the "Assistant Sales Representative" group, the footer displays:

The number of the displayed items is incorrectly calculated

Expected/desired behavior

The number of the displayed items should be calculated based on the number of the rows inside the opened groups

Environment

• Kendo UI version: 2020.2.617
• jQuery version: x.y
• Browser: [all]