Bug report

Reproduction of the problem

1. Compare the rendering of the "Next Page", "Last Page", "Previous Page" and "First Page" buttons in RTL between the MVC Grid and the jQuery and Core Grids:

https://demos.telerik.com/aspnet-mvc/grid/right-to-left-support
https://demos.telerik.com/kendo-ui/grid/right-to-left-support
https://demos.telerik.com/aspnet-core/grid/right-to-left-support

Current behavior

Incorrect rendering of the buttons.

Expected/desired behavior

Buttons rendered consistently with the jQuery and Core Grids.

Environment

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

Bug report

Regression introduced with 2023.3.606

DateTimePicker shows NaN when componentType is set to "modern" and a Date with intervals is passed to the min() method.

Reproduction of the problem

1. Open the following dojo.
2. In the first picker change the time to 4:30 PM.
3. In the second picker change the time to 4:00 PM.
4. Change again the time in the second picker to 5:00 PM.

Current behavior

The picker shows NaN/NaN/0NaN 12:NaN PM when the min option is set programmatically and the time is changed with intervals.

Expected/desired behavior

The picker should display the selected time and date after the min option is set programmatically.

Environment

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

Bug report

After using setOptions() the HTML structure of Grids column header is different.

Reproduction of the problem

In the following demo:
https://demos.telerik.com/aspnet-mvc/grid/persist-state

1. Inspect the HTML structure of a column header.
2. Click the Load State button.

Current behavior

When the button is clicked, setOptions() called for the Grid and the structure of the column headers is now different.

Expected/desired behavior

When setOpitons() is called with no options that may affect the headers the HTML structure of the column headers should be the same.

Environment

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

Enhancement

Ticket ID 1418725

Current behavior

Currently it is not possible to pass HtmlAttributes() to the ArcGauge wrapper. The other gauges have this method, the ArcGauge should be no different.

Expected/desired behavior

The HtmlAttributes() should be set to the widget's element.

Environment

• Kendo UI version: 2019.2.619

Bug report

When RadioButtonFor Helper is bound to a Model property it does not bind when an editable Grid is placed above its declaration.

Reproduction of the problem

1. Create a ViewModel that will be injected into the View:

   public class RadioButtonModel
   {
       public bool IAgreeProp { get; set; }
   }
   

2. Inject the model within the View:

    public class RadioButtonController : Controller
    {
       public ActionResult RadioButton()
       {
          RadioButtonModel myModel = new RadioButtonModel() { IAgreeProp = false };
          return View(myModel);
       }
     }
   

3. Initialize a RadioButtonFor Helper and place an editable Grid above its declaration:

         @(Html.Kendo().Grid<GridModel>()
                 .Name("Collaborators")
                 ...
                 .Editable(editable => editable.Mode(GridEditMode.InCell))
          )
        ...
        @(Html.Kendo().RadioButtonFor(m => m.IAgreeProp).Label("I Agree").Value(true))
        @(Html.Kendo().RadioButtonFor(m => m.IAgreeProp).Label("I Disagree").Value(false))
   

Current behavior

The RadioButtonFor Helper should bind to the specified Model property successfully.

Expected/desired behavior

The RadioButton Helper does not bind to the specified Model property successfully.

Environment

• Telerik UI for ASP.NET MVC version: 2023.2.606
• Browser: [all]

Bug report

The Kendo UI Grid's Toolbar Template UI for ASP.NET MVC documentation displays an approach used for UI for ASP.NET Core. The ClientTemplate and ClientTemplateID are not available for UI for ASP.NET MVC.

Reproduction of the problem

Please try the approach used in the documentation. It is not available for UI for ASP.NET MVC.

Expected/desired behavior

Either include the approach for UI for ASP.NET MVC, or modify the documentation.

Environment

• Kendo UI version: 2022.2.510
• jQuery version: 3.6
• Browser: all

Bug report

When a UI for ASP.NET MVC Grid contains a PDF or Excel button within the Toolbar, the IconClass is being ignored.

Reproduction of the problem

.ToolBar(t => t.Excel().Text("Export to Excel").IconClass("icon here"))

Current behavior

Expected/desired behavior

The specific icon should be added based on the IconClass.

Environment

• Kendo UI version: 2023.2.606
• jQuery version: All Supported Versions
• Browser: All

My web page displays grids on multiple pages, and each grid has a pager with a page size control.

In recent updates the styling broke in all but one page.
In the case where I was creating the grid using Kendo UI for JQuery, it worked fine.
In the instances when I create it using MVC, there are styling errors. (See in the image how the number "10" is truncated.)




After much drilling into the HTML, I found the difference in how the Razor library creates the HTML elements, as opposed to how the JQuery creates the HTML elements.

JQuery generates the following element structure. Note that the k-pager-sizes element comes after the k-pager-numbers-wrap element

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
     <div class="k-pager-numbers-wrap">
             <!-- ... -->
     </div>
     <span class="k-pager-sizes k-label">
            <!-- The page-size picker goes here -->
     </span>
</div>

In contrast, the Kendo Razor libraries generates the following element structure, where the k-pager-sizes element falls inside the k-pager-numbers-wrap element:

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->

     <div class="k-pager-numbers-wrap">
             <!-- ... -->
            <span class="k-pager-sizes k-label">
                  <!-- The page-size picker goes here -->
             </span>
     </div>

</div>

This breaks the styling. (I am using the bootstrap kendo theme) There is styling rule that imposes a minimum width on all buttons under .k-pager-numbers-wrap. This makes the drop-down arrow too wide, which causes the page size number to truncate.

    @each $size, $size-props in $kendo-pager-sizes {
        $_padding-x: k-map-get($size-props, padding-x);
        $_padding-y: k-map-get($size-props, padding-y);
        $_item-group-spacing: k-map-get($size-props, item-group-spacing);
        $_item-min-width: k-map-get($size-props, item-min-width);
        $_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);

        .k-pager-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;
            gap: $_item-group-spacing;

            .k-pager-numbers-wrap {
                .k-button {
                    min-width: $_item-min-width;
                }

 My current hack workaround is to add a more specific CSS rule.

@import "@progress/kendo-theme-bootstrap/dist/all.scss";

.k-pager-md .k-pager-numbers-wrap .k-dropdownlist .k-button {
	min-width:inherit;
}

Bug report

Reproduction of the problem

Have a Grid bound to local data (see below code snippets and screenshot)

@model Pager_issue.Models.GridViewModel

@(Html.Kendo().Grid(Model.Items)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable(p => p.PageSizes(new[] { "5", "10", "50", "all" }).PreviousNext(false))
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
    )
)

    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var model = new GridViewModel
            {
                Items = Enumerable.Range(0, 200).Select(i => new OrderViewModel
                {
                    OrderID = i,
                    Freight = i * 10,
                    OrderDate = DateTime.Now.AddDays(i),
                    ShipName = "ShipName " + i,
                    ShipCity = "ShipCity " + i
                })
            };

            return View(model);
        }

Current behavior

When filling the Grid with data via a ViewModel, the pager doesn't show on load

Expected/desired behavior

The pager should be visible on load

Environment

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

Bug report

Reproduction of the problem

When in an Editor, the TableEditing() API configuration creates an instance of 2 buttons - Create a Table button, and Table Wizard button (which doesn't have any functionality). This issue occurs when we use newer versions after 2023.2.606. For example:

@(Html.Kendo().Editor()
      .Name("editor")  
      .Tools(tools => tools.Clear().TableEditing())
      ...
)

Current behavior

TableEditing() API configuration creates instances of 2 buttons, one of which has no functionality.

Expected/desired behavior

TableEditing() API configuration should create an instance of only 1 button

REPL link showing the issue

https://netcorerepl.telerik.com/wRaCuPlS39KaFyIS25

Environment

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

### Bug report

The built-in search tool does not render when it is defined through the Toolbar() configuration. By default, it renders as expected.

### Reproduction of the problem

@(Html.Kendo().TaskBoard()
        .Name("taskBoard")
        .Toolbar(t => t.Items(items =>
        {
            items.Add().Type("TaskBoardSearch").Command("SearchCommand").Name("search").Text("Search").Icon("search");
        }))
       ...
)
    

REPL sample for reproduction:

https://netcorerepl.telerik.com/QRaTOpbm101bVWAv11

### Expected/desired behavior

The search tool should be rendered when it is set up through the Toolbar() configuration.

A possible workaround:

@(Html.Kendo().TaskBoard()
        .Name("taskBoard")
        .Toolbar(t => t.Items(items =>
        {
            items.Add().Name("search");
        }))
       ...
)

### Environment

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

Bug report

Not reproducible with the UI for ASP.NET Core Grid helper.

Reproduction of the problem

1. Set the Total option of the DataSource in a Grid:

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(15)
    .Read(read => read.Action("Orders_Read", "Grid"))
    .Total(50)
)

2. Compare the rendering of the pager "next page" and "last page" buttons with the Total option set and without it.

Current behavior

The "next page" and "last page" buttons in the Grid's pager are rendered as anchor Html elements, when Total is set in the DataSource. When it is not set, the buttons are rendered as button Html elements.

Expected/desired behavior

The rendering of the pager buttons should be consistent and they should render as button Html elements.

Environment

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

Is it possible to allow the integration of the Template component in the Template() option of the CustomTemplate() configuration in the Editor's Toolbar? 

For example:

@(Html.Kendo().Editor()
          .Name("editor")
          .Tools(tools => tools
                .Clear()
                .CustomTemplate(x => x.Name("customButton").Template(
                  Html.Kendo().Template()
                      .AddComponent(c => c.Button()
                          .Name("myButton")
                          .Events(ev => ev.Click("onExecute"))
                      )
                  ))
          )
)

Bug report

Regression in R2 2022 SP1.

Reproduction of the problem

Dojo example:https://dojo.telerik.com/eLULiTob

1. Click the image browser tool in the Editor's toolbar.
2. In the ImageBrowser popup, one by one remove all the folders and images, until none is left.

Current behavior

After deleting the last item (image or folder), the loading icon remains.

Expected/desired behavior

No loading icon should be shown in the popup, once all the images are removed.

Environment

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

Bug report

When the Grid is set initially with a sort operation, the icon for the column will show twice in a UI for ASP.NET MVC web application.

Reproduction of the problem

Using the Kendo UI Grid template, add the sorting configuration to the dataSource:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(200);
        columns.Bound(p => p.Freight).Width(100);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
        .Sort(s => s.Add("OrderID").Descending()))  //Added Predefined Sort
)

Current behavior

Expected/desired behavior

The icon should only appear once for the sorted column.

Environment

• Kendo UI version: 2023.1.425
• jQuery version: All Supported Versions
• Browser: all

Please note the following MVC code:

Bug 1: The Window should have the top set by the Top() method. It does not. 

Bug 2: The Window should have the top set by the HtmlAttributes() method. That does not work either. 

Bug 3: The scrollable method also does nothing to the window. So this entire line seems to be omitted.

Bug 4: The window is supposed to be centered by the Kendo native code. It isn’t. The recurring editor div element is not shown until after the window centers. So the window generates, centers on the screen, then the recurring DIV is shown which expands the window downwards, then the window is shown. This makes it go off the bottom of the screen. I didn’t need vertical center anyways so I fixed this by setting the top to 40px. Which is when I ran into the above issues. However if I was not doing this, the center() issue would still be there. I fixed this in JavaScript on the event’s edit event.

Bug report

Reproduction of the problem

1. Set up a Grid for popup editing:

.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("RadioButtonTemplate"))

Add a RadioButton in the RadioButtonTemplate.cshtml template:

@model GridExample.Models.OrderViewModel

@(Html.Kendo().RadioButton().Name("engine1").Checked(true).HtmlAttributes(new { @name = "engine" }).Label("1.4 Petrol, 92kW"))
@(Html.Kendo().RadioButton().Name("engine2").HtmlAttributes(new { @name = "engine" }).Label("1.8 Petrol, 118kW"))

2. Click the "Add new record" button in the Grid's toolbar.

Current behavior

A js exception is thrown and the popup does not open:

Chrome:
Uncaught TypeError: Cannot read properties of undefined (reading 'toString') kendo.all.js:313050

Firefox:
Uncaught TypeError: this.bindings.checked.get() is undefined kendo.all.min.js:10:102181

The issue is reproducible with a RadioButton or a RadioButtonFor helper.

Expected/desired behavior

No exception is thrown and the custom popup displays the RadioButton.

Environment

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

Bug report

Reproduction of the problem

1. Visual Studio 2019 version 16.8.3 (or another version the extension works with)
2. Install the Scaffolder extension.
3. In a sample Terlerik ASP.NET MVC Application verify that the Kendo Scaffolder and its configuration panel work as expected.
4. Update Visual Studio to version 16.9.2.

Current behavior

The Kendo Scaffolder is no longer available in the Add New Scaffolded Item dialog.

Expected/desired behavior

The Kendo Scaffolder works as intended.

Environment

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

### Bug report

The Grid columns do not expose the ClientTemplateHandler() method. It is available in Telerik UI for ASP.NET Core since version 2023.1.314.

### Reproduction of the problem

columns.Bound(p => p.IsAlwaysIncluded).ClientTemplateHandler("myColTemplate");

<script>
function myColTemplate(data) {
  return `<div>${data.IsAlwaysIncluded}</div>`
}
</script>

The ClientTemplateHandler() method must be exposed for the Grid columns.

### Environment

Telerik UI for ASP.NET MVC version: 2023.1.425
* **Browser: [all]