KendoUI Grid Update Cell

Update KendoUI Grid Cells with random numbers

by Dan Mathisen

HTML

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<button type="button" id="editcell">Edit Cell</button>
<div id="grid"></div>

CSS

.updated {
    -webkit-animation: highlight 1s;
    animation: highlight 1s;
}
@-webkit-keyframes highlight {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: #EEE8AA;
  }
}

@keyframes highlight {
  0%, 100% {
    background-color: #FFF;
  }
  50% {
    background-color: #FFD700;
  }
}

JavaScript

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Products",
            dataType: "jsonp"
        }
    },
    pageSize: 30,
    schema: {
        model: {
            fields: {
                ProductID: { type: "number" },
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number" }
            }
        }
    }
});

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 500,
    columns: [
        "ProductName",
        {
            field: "UnitPrice",
            format: "{0:c}",
            width: "150px"
        },
        {
            field: "UnitsInStock",
            width: "150px"
        },
        {
            field: "Discontinued",
            width: "100px"
        }
    ],
    editable: true
}).data("kendoGrid");

$("#editcell").click(function() {
    var gridRow = Math.floor(Math.random() * 10 + 1); // random number 1-10
    var gridCol = Math.floor(Math.random() * 2 + 1); // random number 1-2
    var newVal = Math.floor(Math.random() * 33 + 11); // random number 11-33
    var colName = grid.columns[gridCol].field;
    
    var cell = $('#grid tr:eq('+gridRow+') td:eq('+gridCol+')');
    
    cell.addClass('updated');
    
    grid.editCell(cell);
    cell.find("input").val(newVal).change();
    grid.dataItem('tr:eq(' + gridRow + ')')[colName] = newVal;
    grid.closeCell();
    
    setTimeout(function() {
        cell.removeClass('updated');
    }, 1500);    
    
    //grid.saveChanges();
    //grid.refresh();
});