MultiSelect

by OnaBai

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>

<script>
    function SayHello(me) {
        alert("hello");
        var item = $("#grid").data("kendoGrid").dataItem($(me).closest("tr"));
        console.log("item", item);
        item.sayGoodbye();
    }
</script>

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(50),
        pageSize: 10,
        schema  : {
            model: {
                fields  : {
                    id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' },
                    City     : { type: 'string' },
                    Title    : { type: 'string' },
                    BirthDate: { type: 'date' },
                    Age      : { type: 'number' }
                },
                sayGoodbye: function () {
                    alert("Model says Goodbye!");
                }
            }
        }
    },
    selectable: false,
    editable  : "incell",
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        {
            field: "FirstName",
            width: 90,
            title: "First Name"
        },
        {
            field: "LastName",
            width: 90,
            title: "Last Name"
        },
        {
            width: 100,
            field: "City"
        },
        {
            title   : "Action",
            template: '<a href="\\#" onclick="SayHello(this)">Click-me</a>',
            width   : 70
        }
    ]
}).data("kendoGrid");