/ / Urobiť riadky len na čítanie na KendoUI TreeList - kendo-ui, kendo-ui-grid

Urobiť riadky len na čítanie na KendoUI TreeList - kendo-ui, kendo-ui-grid

I "m robiť KendoUI TreeList tabuľky a potrebujem niektoré riadky, ktoré majú byť len na čítanie.

Keďže táto možnosť v predvolenom nastavení neexistuje, snažím sa to urobiť podľa tohto návodu Tu ktorý funguje skvele na KendoGrid, ale nie na mojom treelistovi.

I "m definovanie šablóny, ktorá vytvorí tlačidlo Upraviť len pre riadky, ktoré som označil ako" readonly ".

Tlačidlá sa zobrazia, ale nič sa nestane, keď na ňu kliknem ... Má niekto predstavu o prečo?

Tu je vzorka, ktorú som vytvoril: http://dojo.telerik.com/EXupO/2

Ďakujem za tvoju pomoc!

odpovede:

0 pre odpoveď č. 1

Skúste použiť nasledujúci útržok kódu. Zmenil som kód skriptu na úpravu šablóny.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example">
<div id="treelist"></div>
</div>

<script id="edit-template" type="text/x-kendo-template">
# if (!data.readonly) { #
<button data-command="edit" class="k-button k-button-icontext k-grid-edit"><span class="k-icon k-edit"></span>Edit</button>
# } #
</script>

<script>
$(document).ready(function () {

var editTemplate = kendo.template($("#edit-template").html());

var grid = $("#treelist").kendoTreeList({

dataSource: {
data: [{ DomainId: 1, Name: "Test", ReportsTo: null, readonly: true },
{ Name: "Categorie1", ReportsTo: 1, a: "10", b: "5" },
{ Name: "Categorie2", ReportsTo: 1, a: "10", b: "5" },
{ Name: "Categorie3", ReportsTo: 1, a: "10", b: "5" },
],


batch: true,
schema: {
model: {
id: "DomainID",
fields: {
parentId: { field: "ReportsTo", nullable: true, editable: false },
DomainID: { field: "DomainId", type: "number", editable: false },
Name: { validation: { required: true }, editable: false },
a: { type: "number", editable: true },
b: { type: "number", editable: true },
},
expanded: true
},


}
},
editable: true,
columns: [

{ field: "Name", title: "Domain", width: 400, editable: false },
{ field: "a", title: "1", filterable: false, sortable: false },
{ field: "b", title: "2", filterable: false, sortable: false },
{ field: "readonly", title: " ", width: 100, template: editTemplate, editor: function () { } }

],
editable: "popup",
pageable: true,

});


});


</script>

</body>
</html>

Dajte mi vedieť, či nejaký problém.