Demonstrating column resize bug

by Abra Cadabra

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://portal.transperfect.com/Content/css/less_base/kendo.common.min.css">
<link rel="stylesheet" href="http://transportbihor.ro/custom.css">
<script src="https://portal.transperfect.com/Content/img/msprite.png"></script>
<div id="example" class="k-content">
    <div id="grid" class="windowGridHeader"></div>
    <div class="toolbar">
        <label class="category-label" for="category">Show products by category:</label>
        <input type="search" id="category" style="width: 230px" />
        <input id="reset" type="button" value="Reset" />
        <input id="reset1" type="button" value="ORLOGIC" />
    </div>
</div>

<script type="text/x-kendo-template" id="fullNameTemplate">
    <span> #= ProductID # </span>
</script>

<script type="text/x-kendo-template" id="fullNameTemplate2">
    <span> #= ProductName # </span>
</script>

<script type="text/x-kendo-template" id="fullNameTemplate3">
    <span> #= UnitPrice # </span>
</script>

<script type="text/x-kendo-template" id="fullNameTemplate4">
    <span> #= QuantityPerUnit # </span>
</script>

CSS

#category {
    border: 2px solid black;
}

JavaScript

$(document).ready(function () {

    var grid = $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Products"
            },
            pageSize: 7,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true
        },
        scrollable: true,
        navigatable: true,
        sortable: true,
        filterable: true,
        resizable: true,
        pageable: true,
        columns: [{
            field: "ProductID",
            template: $('#fullNameTemplate').html(),
            width: 100
        }, {
            field: "ProductName",
            template: $('#fullNameTemplate2').html(),
            title: "Product Name"
        }, {
            field: "UnitPrice",
            template: $('#fullNameTemplate3').html(),
            title: "Unit Price",
            width: 100
        }, {
            field: "QuantityPerUnit",
            template: $('#fullNameTemplate4').html(),
            title: "Quantity Per Unit"
        }]
    }).data('kendoGrid');
    
    // we check whether or not the pager wrapper already exists. This is because, this script re-runs if we click the clear button or
        // clear the serach input by clicking on the 'x' button (in the search bar)
        if (grid.wrapper.find('.kendoPagerWrapper').length == 0) {
            grid.wrapper.find('.k-pager-wrap').children().slice(0, 5).wrapAll("<div class='kendoPagerWrapper'></div>");
        }
    
    // DataSource
    var PlainDS = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    });

    // AutoComplete
    $("#category").kendoAutoComplete({
        dataTextField: "ProductName",
        dataValueField: "ProductName",
        dataSource: PlainDS
    });

    //change event
    $("#category").keyup(function () {
        var...