Last active
July 20, 2016 06:32
-
-
Save adriatic/8a288dca24e45352c403205a821927e3 to your computer and use it in GitHub Desktop.
TreeList: Api
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<ak-tree-list k-data-source.bind="dataSource" k-selectable.bind="true" k-widget.bind="treelist"> | |
<ak-tree-col k-field="FirstName" k-expandable.bind="true" k-title="First Name"></ak-tree-col> | |
<ak-tree-col k-field="LastName" k-title="Last Name"></ak-tree-col> | |
<ak-tree-col k-field="Position"></ak-tree-col> | |
<ak-tree-col k-field="Extension" k-title="Ext" k-format="{0:#}"></ak-tree-col> | |
</ak-tree-list> | |
<div class="box wide"> | |
<div class="box-col"> | |
<h4>Selection</h4> | |
<ul class="options"> | |
<li> | |
<input type="text" ak-numerictextbox="k-value.two-way: selectRowIndex" /> | |
<button ak-button click.delegate="selectRow()">Select row</button> | |
</li> | |
<li> | |
<button ak-button click.delegate="treelist.clearSelection()">Clear selected rows</button> | |
</li> | |
</ul> | |
</div> | |
<div class="box-col"> | |
<h4>Expand / Collapse</h4> | |
<ul class="options"> | |
<li> | |
<input type="text" ak-numerictextbox="k-value.two-way: expandRowIndex"/> | |
<button ak-button click.delegate="expandCollapse()">Collapse/Expand group</button> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class API { | |
selectRowIndex = 0; | |
expandRowIndex = 0; | |
selectRow() { | |
let row = this.treelist.content.find('tr:visible').eq(this.selectRowIndex); | |
this.treelist.select(row); | |
} | |
expandCollapse() { | |
let row = this.treelist.content.find('tr:visible').eq(this.expandRowIndex); | |
if (row.has('.k-i-collapse').length) { | |
this.treelist.collapse(row); | |
} else { | |
this.treelist.expand(row); | |
} | |
} | |
dataSource = new kendo.data.TreeListDataSource({ | |
transport: { | |
read: { | |
url: '//demos.telerik.com/kendo-ui/service/EmployeeDirectory', | |
dataType: 'jsonp' | |
} | |
}, | |
schema: { | |
model: { | |
id: 'EmployeeId', | |
parentId: 'ReportsTo', | |
fields: { | |
EmployeeId: { type: 'number', nullable: false }, | |
ReportsTo: { field: 'ReportsTo', nullable: true } | |
} | |
} | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Aurelia KendoUI bridge</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"> | |
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script> | |
</head> | |
<body aurelia-app="main"> | |
<h1>Loading...</h1> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function configure(aurelia) { | |
aurelia.use | |
.standardConfiguration() | |
.developmentLogging() | |
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro()); | |
aurelia.start().then(a => a.setRoot()); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment