Bug report

The row reordering functionality does not work correctly when the draggable column has a small width.

Reproduction of the problem

https://dojo.telerik.com/@user192/ipOyacoH

Open the Dojo and try to reorder a row. The icon inside the hint will keep changing and in some cases you won't be able to drop the row to the expected position.

If you move the hint a bit to the right(towards the next column) this behavior disappears.

Current behavior

The reorder hint shimmers and in some cases does not allow for reordering. This occurs when the column width is small(30px in the example).

Expected/desired behavior

Reorder should work as expected, regardless of the column width.

Environment

• Kendo UI version: 2022.2.621
• jQuery version: 1.12.4
• Browser: [all]

Bug report

In a Grid that has locked columns, if you tab through the content and then tab back using Shift-Tab, the first column is not completely visible when you reach it.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/eKuKoFaN
2. Navigate through the first row using Tab key.
3. Navigate back to the cell in the CustomerID column using Shift+Tab

Current behavior

The column, including the header, is not completely visible.

Expected/desired behavior

The whole column should be visible.

Environment

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

Bug report

The rendering of the Grid header for a command column is different than the one for the default header.

Regression introduced with 2023.3.1114

Reproduction of the problem

1. Open the following Dojo example - https://dojo.telerik.com/@Zornitsa/aTIxApiV/3
2. Inspect the HTML of the Grid headers

Current behavior

• Rendering of default header:

• Rendering of command header:

Expected/desired behavior

The rendering of both headers should be the same.

Environment

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

Bug report

When there is horizontal scrolling in RTL Grid, the scroll starts from the last column, instead of the first one.

Reproduction of the problem

1. Open the following Dojo example - https://dojo.telerik.com/oJataqac
2. Observe the scroll of the RTL Grid

Current behavior

The scroll starts from the last column.

Expected/desired behavior

The scroll should start from the first column.

Environment

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

We are using kendo Datagrid where we wanted to apply pagination.

We are using pageSizes property of pageable object to set the no of items per page to render. We are also using buttonCount property to control the number of buttons.

Problem : For example I have 200 records , if I set pagesSizes=1 so technically I will have 200 paging button and if i set buttonCount to 60 than UI gets distorted. Find below is stackblitz URL where I have set pagesSizes=1 and if you set Maximum number of buttons = 70 UI will break.

URL : https://cuezkg--run.stackblitz.io/ 

Enhancement

Excel files generated by Kendo Excel Export cannot be imported by the MS ODBC Driver. The error reported in this forum thread is: External table is not in expected format.

Current behaviour

If the file is opened and resaved with Excel or if the styles.xml file is replaced with any styles.xml generated by MS Excel, the error does not occur. When compared the styles.xml of Excel does not contain a numberFormat, no other obvious major differences at first glance:

E.g.:

<numFmts count="2">
<numFmt formatCode="#" numFmtId="165" />
<numFmt formatCode="#" numFmtId="166" />
</numFmts>

Expected/desired behavior

If possible, modify the styles.xml template to enable seamless use with OleDB

If you configure a Kendo Grid with client-side paging, each time you call setDataSource to update the data source then a new .k-pager-numbers-wrap DIV is added to the page controls. I've replicated the problem in Dojo at https://dojo.telerik.com/UTolOzer by taking a basic client-side paging demo, moving the dataSource configuration into a separate function (with data("kendoGrid").setDataSource), and calling that function 25 times. At the end, the source shows the UL element with the page buttons inside 25 .k-pager-numbers-wrap DIV elements.

I first noticed this problem because in my own environment, each nested DIV was shifting the page buttons left 1 pixel and overlapping the "previous page" buttons. In my Dojo example, with 25 nested DIVs the page buttons disappear completely.

I've added the following in my own code as a workaround in the dataBound event of the grid:

                            var trueParent = e.sender.pager.element.find(".k-pager-numbers-wrap").first();
                            e.sender.pager.element.find("ul").appendTo(trueParent);
                            trueParent.find(".k-pager-numbers-wrap").remove();

### Bug report

When the adaptive rendering of the Kendo UI Grid is enabled, the filterMenuOpen event is not triggered.

### Reproduction of the problem

1. Set mobile: true.

2. Attach the filterMenuOpen.

Dojo sample for reproduction:

https://dojo.telerik.com/uhiToseD

### Expected/desired behavior

filterMenuInit event should be triggered regardless of the adaptive rendering mode of the grid.

### Environment

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

Disclaimer: I'm running an older version of Kendo UI for jQuery, so this may have been fixed. I'd like confirmation if so before updating.

Kendo version: 2017.1.118.545

I am creating a grid from a table data source rather than an endpoint call. Other pages that use endpoints to populate the datasource export Excel with no problems.

Example HTML:

<table class="table table-responsive" id="tblReportSummary">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="totalForStatus">Count</th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.ReportDataSummary as IEnumerable<UtilizationListViewModel>)
{
<tr>
<td>@item.Date</td>
<td>@item.TotalForStatus</td>
</tr>
}
</tbody>
</table>

The jQuery is as follows:

             $("#tblReportSummary").kendoGrid({
                sortable: true,
                toolbar: ["excel"],
                excel: {
                    allPages: true,
                    fileName: "Utilization Data Export.xlsx"
                },
                pageable: {
                    pageSize: 20,
                    pageSizes: [20, 50, 100]
                }
            });

When I click Export, all I get is an empty Excel file.

Why isn't the data there, please?

Bug report

If the datasource of a Grid with "autoBind: false" configuration is sorted using the below code, the data sorting in the component is correct but no sorting arrows appear in the headers of the sorted columns.

var grid = $("#grid").data("kendoGrid");
var sort = [{field: "Freight", dir: "desc"}, {field: "OrderDate", dir: "asc"}];
grid.setOptions({ dataSource: {sort: sort }});
grid.dataSource.read();

• This is a regression introduced in version 2020.1.114

Reproduction of the problem

1. Open this Dojo example and run it
2. See the headers of the "Freight" and "Order Date" columns

Current behavior

The sorting arrows are missing for both the "Freight" and "Order Date" columns

Expected/desired behavior

The arrows should appear as shown in the image below. The correct behavior can be observed in this Dojo example

Environment

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

Bug report

Grid's footer is moving together with its pager based on the configuration of the pageable.position property.

Reproduction of the problem

1. Open this Dojo and run it

Current behavior

The footer of the Grid is positioned above its pager

Expected/desired behavior

With pageable.position set to "top" only the pager should be moved above Grid's rows. Its footer should stay at the bottom of the component, below its rows.

Environment

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

Dear Sir / Madam,

At grid PDF export, in case of allPages: false --> Actual rows are rendered to multiple pages properly, but all pages are written on the first page.

It works well, if I set "options.pdf.multiPage" to "true", but it is not in API reference.

A solution might be if this variable is fixed to true in grid prototype "saveAsPDF" function:
          "options.multiPage = true;" instead of "options.multiPage = options.multiPage || options.allPages;"

Please see this example: https://dojo.telerik.com/usUnUziL/2

Step 1: press "Export to PDF" --> Result: wrong pdf

Step 2: press "Set multiPage: true"

Step 3: press "Export to PDF" --> Result: good pdf

Best Regards,

Szabolcs Tóth

Bug report

Ticket ID: 1472456

Reproduction of the problem

[Dojo]

Current behavior

Using the setOptions() method in an MVVM bound grid causes 2 read requests

Expected/desired behavior

A single request should be issued.

Workaround

programmatically remove the kendo binding from the element before calling the `setOptions()` method.

   grid.element[0].kendoBindingTarget = null;
   grid.setOptions(options);

Environment

Kendo UI version:** 2020.2.617

Hi!

I've found that column menu doesn't work properly when both columns.selectable and columnMenu are enabled. Just run this code snippet and try to enable/disable columns in column menu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columnMenu: true,
  columns: [
    { selectable: true },
    { field: "name" },
    { field: "age" },
    { field: "pet" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 25, pet: 'dog' }, 
    { name: "John Doe", age: 71, pet: 'cat' } 
  ]
});
</script>
</body>
</html>

Hi, 

Here is the dojo to reproduce. In this dojo I've created imitation of data, that coming from server in our case. The main idea is to have a grid with lazy loading - it has 10 groups (page 1) and after scrolling down it loads 10 more groups (page 2) and etc.

Issue 1. 

After scrolling down, data from the last group is updated with some data, that is not belongs to it. Please see 'Issue1.png' attached.

Issue 2.

Groups from the first page are duplicated after scrolling down. For example, there is a group named 'C3'. After scrolling down, it is duplicated once again. Please see 'Issue2.png' attached. New groups are placed after these duplications. By the way, as groups from the 1st page are duplicated, there is more than 20 groups is shown, but the counted at the bottom of the grid says that '20 of 137' elements are show.

So it would be great, if you could fix that. Or even provide temporary fix for us.

Thank you!

When using a grid vith virtual scrolling it is currently not possible to get the current result that is viewed. I wanted to show the user approximatelly where he/she currently, i.e., I wanted to display in the GUI something like "Displaying rows 501-600 of 3211" when the pageSize is 100 and the total number of rows in the Grid is 3211. 

This would be helpful for orientation when using virtual scrolling with a high number of results. 

I have tried grid.dataSource.page() and this one is not currently possible to use. The results will be something like 100,200,300,400,500,600,500,700 sometimes going back a hundred and somtimes going forward 200 when using the scrollbar to scroll downwards.

Please check yourself by just creating a virtual scrolling grid with server side operations. Put the printout in the event handler for "DataBound". Page(), Skip() etc are not possible to use for the inconsistent behavior according to above. 

You help has not been able to find a solution or workaround for this and suggested I ask for this as new functionality.

When clicking on CheckBox to select a line, the widget check other checkbox (on other column of the same line) inserted from column template.

I suppose that the selector that the system use is too large.

For information, i created a template for boolean column based on how kendo generate checkbox structure (just de be coherent)

See the code extracted from https://dojo.telerik.com/EqiPIkiV

 var checkBoxtemplate = function(boolValue){
   	var checkedStr = '';
    if (boolValue) {
    	checkedStr = 'checked="checked"';
    }

        
    return '<input class="k-checkbox" data-role="checkbox" ' + checkedStr + ' type="checkbox"><label class="k-checkbox-label k-no-text smi-checkbox-fordisplay"></label>';
 };
  
$("#grid").kendoGrid({
  columns: [
    {
      selectable: true, 
      width: '30px'
    },
    { field: "name" },
    { field: "age" },
    { field: "administator", 
      template: function (dataItem) { 
        return checkBoxtemplate(dataItem.administator); 
      }  
    }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30, administator: false },
    { name: "John Doe", age: 33, administator: false },
    { name: "BigBoss Doe", age: 70, administator: true }
  ],
  selectable: true
});

Cannot read property 'groupHeaderColumnTemplate' of undefined.

I have my grid, with 4 columns:

When i grouping for Date field, the browser run this error: 

kendo.all.js:65435 Uncaught TypeError: Cannot read property 'groupHeaderColumnTemplate' of undefined
    at HTMLTableRowElement.<anonymous> (kendo.all.js:65435)
    at Function.each (jquery.min.js:2)
    at I.fn.init.each (jquery.min.js:2)
    at init._renderGroupRows (kendo.all.js:65417)
    at init.hideColumn (kendo.all.js:64983)
    at Function.KendoUtils.hideGridColumns (kendo.utils.js:330)
    at init.dataBound (eval at <anonymous> (jquery.min.js:2), <anonymous>:77:32)
    at d (jquery.min.js:2)
    at init.handlers.<computed> (kendo.all.js:9520)
    at init.trigger (kendo.all.js:124)

Bug report

When the Grid is used with MVVM, if there is a footer template defined for a given column and 'data-auto-bind' is set to false, the footer template is not rendered properly.

Reproduction of the problem

1. Open this Dojo and run it. See the expected footerTemplate result
2. Change the 'data-auto-bind' property to false
3. Run the project again

Current behavior

The footerTemplate defined for the "Unit" column is displayed under "ProductName"

Expected/desired behavior

The footerTemplate defined for the "Unit" column should be displayed under the "Unit" column

Environment

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