Command Buttons

by randyallen

HTML

<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.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="myGrid">
</div>

CSS

/* Grid Buttons, remove background and change icon */.
k-grid .k-button-icontext .k-icon {
    margin: 0;
    vertical-align: middle;
}
.k-grid tbody .k-button {
    min-width: 22px;
    width: 22px;
    background:none;
    border:0px;
}
span.k-delete {
    background: url("http://www.testtg.com/assets/images/Delete.gif") center center;
}
span.k-edit {
    background: url("http://www.testtg.com/assets/images/Edit2.png") center center;
}
span.k-update {
    background: url("http://www.testtg.com/assets/images/saveBW.gif") center center;
}
span.k-cancel {
    background: url("http://www.testtg.com/assets/images/cancelBW.gif") center center;
}

JavaScript

var myData = [
    {
    id: 1,
    name: "Fred Smith",
    city: "Los Angeles",
    state: "CA"},
{
    id: 2,
    name: "John Doe",
    city: "New York",
    state: "NY"},
{
    id: 3,
    name: "Joe Bob",
    city: "Tulsa",
    state: "OK"}
];
viewModel = kendo.observable({
    app: myData
});

$("#myGrid").kendoGrid({
    sortable: true,
    pageable: true,
    filterable: false,
    navigatable: true,
    editable: {
        editable: true,
        update: true,
        create: true,
        confirmation: "Are you sure you want to remove this item?"
    },
    columns: [
        {
        field: "name",
        title: "Name"},
    {
        field: "city",
        title: "City",
        width: 250},
    {
        field: "state",
        title: "State",
        width: 50},
    {
        command: [{
            name: "edit",
            text: ""},
        {
            name: "destroy",
            text: ""}],
        title: "",
        width: 100}
    ],
    dataSource: {
        data: viewModel.app,
        pageSize: 7,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {
                        editable: false,
                        type: "number"
                    },
                    name: {
                        editable: true,
                        type: "string"
                    },
                    city: {
                        editable: true,
                        type: "string"
                    },
                    state: {
                        editable: true,
                        type: "string"
                    }
                }
            }
        }
    },
    toolbar: ["create", "save", "cancel"]
});