Kendo UI DataSource & Knockout
HTML
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="grid">
</div>
CSS
.k-widget{background-color:#fff}.k-widget,.k-input,.k-textbox,.k-group,.k-content,.k-header,.k-editable-area,.k-separator,.k-colorpicker .k-arrow-down,.k-autocomplete,.k-dropdown-wrap,.k-toolbar,.k-group-footer td,.k-grid-footer,.k-footer-template td,.k-state-default,.k-state-default .k-select,.k-state-disabled,.k-grid-header-wrap,.k-grid-header,.k-grid td,.k-grid-footer-wrap,.k-pager-wrap,.k-grouping-header,.k-grouping-header .k-group-indicator,.k-dropdown-wrap,.k-autocomplete,.k-panelbar>.k-item>.k-link,.k-panel>.k-item>.k-link,.k-panelbar .k-panel,.k-panelbar .k-content,.k-calendar th,.k-slider-track,.k-splitbar,.k-dropzone-active,.k-upload-files,.k-tiles,.k-toolbar,.k-dropdown-wrap,.k-tooltip,.k-progress{border-color:#94c0d2}.k-group,.k-toolbar,.k-grouping-header,.k-pager-wrap,.k-group-footer td,.k-grid-footer,.k-footer-template td,.k-widget .k-status,.k-grouping-row td,td.k-group-cell,.k-calendar th,.k-dropzone-hovered,.k-upload-files{background-color:#daecf4}.k-list-container{border-color:#94c0d2;background-color:#daecf4}.k-content,.k-editable-area,.k-panelbar>li.k-item,.k-panel>li.k-item,.k-tiles{background-color:#fff}.k-alt,.k-separator{background-color:#eaf4f9}.k-widget .k-dropdown-wrap,.k-widget .k-picker-wrap,.k-widget .k-numeric-wrap,.k-autocomplete.k-header,.k-autocomplete.k-state-focused,div.k-dropdown-wrap.k-state-active,.k-dropdown-wrap.k-state-focused,.k-dropdown-wrap.k-state-focused:hover,div.k-picker-wrap.k-state-active,.k-picker-wrap.k-state-focused,.k-picker-wrap.k-state-focused:hover,span.k-numeric-wrap.k-state-active,.k-numeric-wrap.k-state-focused,.k-numeric-wrap.k-state-focused:hover{border-color:#94c0d2;background-color:#daecf4}.k-autocomplete .k-input,.k-dropdown-wrap .k-input,.k-autocomplete.k-state-focused .k-input,.k-dropdown-wrap.k-state-focused .k-input,.k-picker-wrap.k-state-focused .k-input,.k-numeric-wrap.k-state-focused...
JavaScript
var menus = [{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
var dataSource = new kendo.data.DataSource({
data: menus,
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { editable: true },
Type: { editable: true },
Link: { editable: false, template:'<a href="mailto:#=Email#"></a>' }
}
}
}
});
$("#grid").kendoGrid({
columns: [
{
field: "ParentId",
title: "Id",
width: 50
},
{
field: "Title",
title: "Label",
width: 100
},
{
field: "Type",
title: "Type",
width: 100
},
{
field: "Link" ,template:"<strong>#: Link # </strong>",
title: "Link1"
}
],
dataSource: dataSource,
editable: true,
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});