grid slider validator

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="grid"></div>

CSS

#grid tbody tr {
 height: 60px;   
}

JavaScript

var ds = new kendo.data.DataSource({
    data: [
        {id: 1, foo: 1, bar: 10, baz: "#1 record"},
        {id: 2, foo: 2, bar: 20, baz: "#2 record"},
        {id: 3, foo: 3, bar: 30, baz: "#3 record"},
        {id: 4, foo: 4, bar: 40, baz: "#4 record"},
        {id: 5, foo: 5, bar: 50, baz: "#5 record"}
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                id: {type: "number"},
                foo: {type: "number"},
                bar: {type: "number"},
                baz: {type: "string"}
            }
        }            
    }
});

$("#grid").kendoGrid({
    dataSource: ds,
    editable: true,
    toolbar: ["create", "save", "cancel"],
    columns: [
        {field: "baz"},
        {field: "foo", title: "Template for 'foo'", template: kendo.template('<input class="slider" value="#= foo #"/>')},
        {field: "bar", title: "Custom editor for 'bar'", editor: barSliderEditor}
    ],
    dataBound: function(e) {
        //create initially shown sliders
        $("#grid .slider").kendoSlider({
            increaseButtonTitle: "Right",
            decreaseButtonTitle: "Left",
            min: 1,
            max: 10,
            smallStep: 1,
            largeStep: 2
        });   
    }
});

function barSliderEditor(container, options) {
    //create slider editor for field "bar"
    $('<input data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoSlider({
            increaseButtonTitle: "Right",
            decreaseButtonTitle: "Left",
            min: -10,
            max: 50,
            smallStep: 5,
            largeStep: 10
        });
}