Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>KendoUI Test Page</title>
    
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" />
​
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { id: 1, item: "Item 1", foo: 1 },
                { id: 2, item: "Item 2", foo: 2 },
                { id: 3, item: "Item 3", foo: 3 },
                { id: 4, item: "Item 4", foo: 4 },
                { id: 5, item: "Item 5", foo: 5 },
                { id: 6, item: "Item 6", foo: 6 }
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number" },
                        item: { type: "string" },
                        foo: { type: "number" } 
                    }
                }
            }
        });
        $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: [
                { field: "item" },
                { field: "foo" },
                { template: '<a class="k-button k-grid-CustomCommand" href="\\#">#= determineName(data) #</a>' }
            ]
        });
        //hook up to the click event
        $("#grid").data("kendoGrid").tbody.on("click", ".k-grid-CustomCommand", function(e) {
            console.log("click fired");
        });
        //function that calculates the command text
        function determineName(data) {
            return (data.foo % 2) ? "odd" : "event";
        }
    </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers