<table id="grid"></table>
        

$(document).ready(function () {
    $("#grid").grid({
        dataSource: "GetPlayers",
        autoLoad: true,
        dataKey: 'ID',
        selectionType: 'checkbox',
        columns: [
            { field: "Name" },
            { title: "Place Of Birth", field: "PlaceOfBirth", align: "right", width: 200 },
            { title: "Date Of Birth", field: "DateOfBirth", type: "date", width: 120, align: "right" },
            { title: "", field: "Edit", width: 20, type: "icon", icon: "ui-icon-pencil", tooltip: "Edit", events: { "click": Edit } },
            { title: "", field: "Delete", width: 20, type: "icon", icon: "ui-icon-close", tooltip: "Delete", events: { "click": Delete } }
        ]
    });
});

function Edit(e) {
    $("#Name").val(e.data.record.Name);
    $("#PlaceOfBirth").val(e.data.record.PlaceOfBirth);
    $("#editForm").dialog({
        title: "Edit Dialog",
        resizable: false,
        modal: true,
        buttons: {
            "Save": function () { $(this).dialog("close"); },
            "Cancel": function () { $(this).dialog("close"); }
        }
    });
}

function Delete(e) {
    confirm("Are you sure?");
}