buttons

buttons– Contains collection of predefined buttons which will be added into the column. Each button can have following properties:

  • cls – css class which will be added to the button element
  • caption – A string template which will be used for the caption of the button
  • commandName – Specified the command which the button will execute. There are two build-in commands: delete and edit
  • click – Gets function as argument which will be executed when the button is clicked
$("#grid").shieldGrid({
    dataSource: {
        data: products,
        schema: {
            fields: {
                id: { path: "ProductID", type: Number},
                name: { path: "ProductName", type: String, nullable: false },
                quantity: { path: "SupplierID", type: Number },
                price: { path: "UnitPrice", type: Number },
                units: { path: "UnitsInStock", type: Number },
                discontinued: { path: "Discontinued", type: Boolean },
                myDate: { path: "d", type: Date }
            }
        }
    },
    rowHover: false,
    columns: [
        { field: "id" },
        { field: "name", width: "200px" },
        { field: "quantity" },
        { field: "price" },
        { field: "units" },
        { field: "discontinued" },
        { field: "myDate", format: "{0:MM/dd/yyyy}" },
        {
            width: "154px",
            title: " ",
            buttons: [
                { commandName: "edit", caption: "Edit" },
                { commandName: "delete", caption: "Delete" },
                {
                    cls: "mybuttonCssClass",
                    caption: " Delete",
                    commandName: "details", // build in - edit, delete
                    click: function(rowIndex) {
                        // handle click event of the button	 
                    }
                }
            ]
        }
    ],
    editing: {
        enabled: true,
        event: "doubleclick
        type: "cell"
    }
});