New to Kendo UI for jQueryStart a free 30-day trial

Resizing of Grid Columns Is Not Working in Chrome When the Page Is Zoomed

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product VersionCreated with version 2017.3.913

Description

When the scale is not 100% or when I zoom the page, the column resize feature of the Grid does not work in the latest Chrome version.

Solution

  1. Override the internal positionColumnResizeHandle method. 
  2. Test that all enabled features work as expected in your environment.
<div id="example">
      <div id="grid"></div>

      <script>

        kendo.ui.Grid.prototype._positionColumnResizeHandle= function() {
          var that = this,
              indicatorWidth = that.options.columnResizeHandleWidth,
              lockedHead = that.lockedHeader ? that.lockedHeader.find("thead:first") : $();

          that.thead.add(lockedHead).on("mousemove" + ".kendoGrid", "th", function (e) {
            var th = $(this);
            if (th.hasClass("k-group-cell") || th.hasClass("k-hierarchy-cell")) {
              return;
            }
            that._createResizeHandle(th.closest("div"), th);
          });
        };

        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              transport: {
                read: "https://demos.telerik.com/service/v2/core/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    ShipCountry: { type: "string" },
                    ShipCity: { type: "string" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShippedDate: { type: "date" }
                  }
                }
              },
              pageSize: 15
            },
            height: 550,
            sortable: true,
            resizable: true,
            pageable: true,
            columns: [
              {
                field: "OrderDate",
                title: "Order Date",
                width: 120,
                format: "{0:MM/dd/yyyy}"
              },
              {
                field: "ShipCountry",
                title: "Ship Country",
                minResizableWidth: 100
              },
              {
                field: "ShipCity",
                title: "Ship City"
              },
              {
                field: "ShipName",
                title: "Ship Name"
              },
              {
                field: "ShippedDate",
                title: "Shipped Date",
                format: "{0:MM/dd/yyyy}",
                width: 200
              },
              {
                field: "OrderID",
                title: "ID",
                width: 80
              }
            ]
          });
        });
      </script>
    </div>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support