Enhancement

Expose the sorts TagHelper for the Grid's column filter datasource taghelper

Overview

Currently, the Grid's Column Filter Datasource Taghelper exposes the following inner child TagHelpers.

Unlike its HtmlHelper counterpart which happens to expose the .Sort() API configuration. For example:

.Columns(columns =>
{
    columns.Bound(p => p.ShipName).Filterable(ftb =>
    {
        ftb.Multi(true);
        ftb.Search(true);
        ftb.CheckAll(true);
        ftb.DataSource(dataSource => dataSource
            .Custom()
            ...
            .Sort(sort =>
            {
                sort.Add("ShipName").Ascending();
            })
        );
    });
})

### Bug report

When the Grid is set up for OData-v4 binding, the columns that bind to DateOnly fields fail to filter. The date value in the filter expression contains the time portion and the following error is thrown:

"The binary operator GreaterThan is not defined for the types 'System.Nullable`1[System.DateOnly]' and 'System.Nullable`1[System.DateTimeOffset]'."

### Reproduction of the problem

1) Create a Grid that uses OData-v4 binding.

2) Bind a specified column to a DateOnly field.

3) Filter the column through the default column filter menu and open the browser DevTools to review the response of the request.

//Model
public DateOnly LastProdUpdate { get; set; }

//View
@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
     .Columns(columns =>
        {
            columns.Bound(p => p.LastProdUpdate).Format("{0:dd/MM/yyyy}");
        })
        ...
        .Filterable()
        .DataSource(dataSource => dataSource
        .Custom()
        .Type("odata-v4")
        .Transport(t =>
        {
            t.Read(read => read.Url("/odata/Products").Data("function() {return {'$expand': 'Employee'} }"));
        })
        .PageSize(10)
        .ServerPaging(true)
        .ServerFiltering(true)
        .ServerSorting(true)
     )
)

### Expected/desired behavior

The DateOnly fields must be filtered successfully as the DateTime fields.

### Environment

* **Kendo UI version: 2024.4.1112
* **Browser: [all]

Is it possible to implement template options for the "update" and "cancel" column commands of the Grid?

For example:

$("#grid").kendoGrid({
  columns: [{ 
    command: [{
        name: "edit",
        template: {
            update: "<button class='customUpdate'>Save</button>",
            cancel: "<button class='customCancel'>Cancel</button>",
          }
      }]
   }],
  ...
});

By default, when the "paste" command is added, the default option is "insert" mode ("Paste (Insert)"). Is it possible to add an option that allows setting the default paste mode to "replace" ("Paste (Replace)")?

Currently, when using the default Grid search functionality and the column filter menus, we observe the following:

• When a column filter is applied first, using the Search feature afterward overrides the column filters, applying the search filter with the "contains" operator to the specified columns.
• Conversely, when a search is performed first and then followed by a column filter, the grid generally functions as expected.

However, there’s a specific scenario where this does not work properly:

• If a search is performed and then a column filter is applied to a column where the search criteria are relevant, the Grid returns no data.

For example:

• After searching for "2018," the expected columns displayed in the filters (notably, the ContractNumber is among them).

• When a column filter is subsequently applied to ContractNumber (e.g., setting it to "2018-CR0018"), the Grid removes the ContractNumber from the search filters and adds the column filter with an "AND" operator. This setup returns no data because of the search filters and the "AND" operator.

Expected Behavior and Alternative

This functionality behaves correctly in the Telerik UI for Blazor Grid component - the search and column filters are managed as separate objects.

Is it possible to enhance the Grid filtering similar to the Blazor Grid?

Hi, is there a way to configure the grid so that when it's grouped and later sorted, the grouping state (expanded/collapsed) is preserved?

Kind Regards

Erwin

It would be convenient to have built-in MultiColumnComboBox editing for the Grid.

I was hoping the component would show the addresses formatted in columns (as per a fields list) and then return the address concatenated into a single to the grid field (e.g. from .DataTextField("FullAddress")).

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.

Bug report

When the Grid is nested in a relatively positioned container, during the export the Grid gets an overflow style to its wrapping element. Then the style is removed and re-added again. This happens in a loop, which results in a vertical scrollbar constantly appearing and hiding.

Reproduction of the problem

1. Open this dojo example: https://dojo.telerik.com/IZoxOvOG/7
2. Click the "Export to PDF" button in the Grid's toolbar

Current behavior

Flickering caused by a scrollbar appearing and hiding

Expected/desired behavior

The Grid should remain unchanged during the export and no scrollbar should appear and hide during the export.

Environment

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

When creating columns in a TagHelper Grid definition, the Width property allows only numbers:

                                <column field="OrderID" width="100">
                                </column>

This does not match the width property in the Kendo UI and HtmlHelpers Grid definitions which allow string values to be entered as well:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.width

That way, the developer will be able to add rem and other unit values in TagHelper syntax as well.

Also, it would be convenient if there is a new property similar to this:

                                <column field="OrderID" tooltip="Unique Number of the Order">
                                </column>

                                <column field="Freight"
                                        html-attributes='new Dictionary<string, object>{ ["style"] = "width: 30rem;" }'>
                                </column>

Bug report

Grid Hidden Column is set as exportable by default for Pdf and Excel

Reproduction of the problem

1. Set a Column as hidden through the Hidden() API configuration.
2. Add both the ToolBar.Excel() and ToolBar.Pdf() API configurations.
3. Notice, that the hidden column is exported.

Current behavior

The Grid Hidden Column should be set as exportable by default for Pdf and Excel.

Expected/desired behavior

The Grid Hidden Column should not be set as exportable by default for Pdf and Excel.

Environment

• Kendo UI version: 2024.3.806
• Browser: [all]

Overview

At this stage, the ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view. E.g:

        @(Html.Kendo().Grid <TelerikAspNetCoreApp455.Models.OrderViewModel>()
            .Name("grid")
            .ToolBar(toolbar => {
                toolbar.Custom().Name("Test1").ClientTemplateHandler("someHandler");
                toolbar.Custom().Name("Test2").ClientTemplateView(Html.Partial("_Test2"))
            })
            ...
        )

Current behavior

The ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view.

Expected/desired behavior

The ToolBar.Custom() API configuration should expose built-in configurations for adding a handler and partial view.

Environment

• Kendo UI version: 2024.3.806
• Browser: [all]

### Bug report

When subscribing to the "requestStart"/"requestEnd" events of the DataSource after the Grid's initialization, the events do not fire during the Excel export.

### Reproduction of the problem

1. Enable the server operations of the Grid's DataSource.

2. Get a reference to the Grid and handle the DataSource "requestStart"/"requestEnd" events by using the bind() method.

3. Export the Grid's data to Excel through the built-in command.

4. The "requestStart"/"requestEnd" events do not trigger when the read request is activated.

A Dojo sample for reproduction: https://dojo.telerik.com/eyiDIGeM

### Expected/desired behavior

The  "requestStart"/"requestEnd" events must trigger when exporting the Grid to Excel.

### Environment

* **Kendo UI version: 2024.3.806
* **jQuery version: 3.7.0
* **Browser: all

column-command template does not access datasource as an ordinary column template.

<kendo-grid name="grid">
    <columns>
        <column field="ProductID" title="ID" />
        <column title="Column" template="#=columnTemplate(data.ProductID)#" />
        <column title="ColumnCommand">
        <commands>
            <column-command name="change" template="#=columnTemplate(data.ProductID)#"></column-command>
        </commands>
    </column>
    </columns>
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("ServerFiltering_GetProducts", "MultiSelect")" />
        </transport>
    </datasource>
</kendo-grid>

<script>
    function columnTemplate(productID) {
        if (productID % 2 == 0)
            return 'even';
        else
            return 'odd';
    }
</script>

Reproduction of the problem:
https://netcorerepl.telerik.com/myurdlbI16kA1TM213

Current behavior:
There is no way to have a dynamic template for column commands that depends on datasource.

Expected/desired behavior:
Having column-command template as column template, making it possible to access data from datasource.

Environment:
Kendo UI version: 2024.2.514

Workaround:
As an alternative solution, I'm using data-bound event, performing a for loop to all rows, but it needs to go line by line, which is not the best solution for large data.

Bug report

Reproducible with the Grid's tag helper. Works as expected in the Html helper.

Reproduction of the problem

1. Run this example: https://netcorerepl.telerik.com/QSuBQmlo123kvYQt54

Current behavior

The toolbar does not show the RadioGroup.

Expected/desired behavior

A RadioGroup should appear in the toolbar, as set in the toolbar command template:

<toolbar-command-template>
    <kendo-radiogroup name="test">
        <kendo-radiogroup-items>
            <kendo-radiogroup-item label="Factor" value="F"></kendo-radiogroup-item>
            <kendo-radiogroup-item label="Equation" value="E"></kendo-radiogroup-item>
        </kendo-radiogroup-items>
    </kendo-radiogroup>
</toolbar-command-template>

Environment

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

Bug report

Setting the Reoderable.Rows.ClickMoveClick() API configuration explicitly to false results in an error when using the HTML Helper wrappers.

Reproduction of the problem

1. Open the following Telerik REPL.
2. Set the Reoderable.Rows.ClickMoveClick() to false.
3. Notice the thrown client-side error.

Current behavior

Setting the Reoderable.Rows.ClickMoveClick() explicitly to false throws the following error:

Expected/desired behavior

Setting the Reoderable.Rows.ClickMoveClick() explicitly to false should not throw an error.

Environment

• Kendo UI version: 2024.2.514
• Browser: [all]

### Bug report

The "confirmation" attribute of the editable tag does not accept a string.

### Reproduction of the problem

 Add a confirmation text as a string in the "confirmation" attribute, as per the example below:

<kendo-grid name="grid">
   ...
    <editable mode="popup" confirmation="Are you sure you want to hide this invoice?" />
</kendo-grid>

A REPL sample for reproduction: https://netcorerepl.telerik.com/moEqPSFo32PrwW4d01

### Expected/desired behavior

The "confirmation" option must accept a string.

### Environment

* **Telerik UI for ASP.NET Core version: 2024.2.514
* **Browser: [all]