adriatic

<template>
  <require from="./drag-and-drop.css"></require>
  <ak-tree-list k-data-source.bind="dataSource" k-height.bind="540" k-editable.bind="{move: true}">
    <ak-tree-col k-field="FirstName" k-title="First Name" k-width.bind="280">
      <ak-template>
        <div class="employee-photo" style="background-image: url(http://demos.telerik.com/kendo-ui/content/web/treelist/people/${EmployeeID}.jpg);"></div>
        <div class="employee-name">${FirstName}</div>
      </ak-template>
    </ak-tree-col>
    <ak-tree-col k-field="LastName" k-title="Last Name" k-width.bind="160"></ak-tree-col>

adriatic

<template>
  <ak-tree-list k-data-source.bind="dataSource">
    <ak-tree-col k-field="FirstName" k-expandable.bind="true" k-title="First Name" k-width.bind="250"></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>
</template>

adriatic

<template>
  <ak-tree-list k-data-source.bind="dataSource" k-height.bind="540">
    <ak-tree-col k-field="Position"></ak-tree-col>
    <ak-tree-col k-field="Name"></ak-tree-col>
    <ak-tree-col k-field="Phone"></ak-tree-col>
  </ak-tree-list>
</template>

adriatic

<template>
    <require from="./basic-use.css"></require>
    <ak-tree-list k-data-source.bind="dataSource" k-filterable.bind="true" k-sortable.bind="true" k-height.bind="540">
      <ak-tree-col k-field="FirstName" k-title="First Name" k-width.bind="280">
        <ak-template>
          <div class="employee-photo" style="background-image: url(http://demos.telerik.com/kendo-ui/content/web/treelist/people/${EmployeeID}.jpg);"></div>
          <div class="employee-name">${FirstName}</div>
        </ak-template>
      </ak-tree-col>
      <ak-tree-col k-field="LastName" k-title="Last Name" k-width.bind="160"></ak-tree-col>

adriatic

<template>

  <div id="example" style="min-height: 360px">
    <div class="box wide">
        <ul class="options">
            <li>
               Show at
               <ak-drop-down-list k-on-change.delegate="onChange()" k-value.two-way="selector">
                 <select id="selector">
                      <option value="1">Target 1</option>

adriatic

<template>
  <require from="./logger.js"></require>
  <div id="example">
    <div class="demo-section k-content">
      <span id="autohide-true"
            class="k-button wider"
            ak-tooltip="k-content: Hello!; k-position: top"
            k-on-show.delegate="logger.log('show button 1')"
            k-on-hide.delegate="logger.log('hide button 1')">Hover me!</span>

adriatic

<template>
  <require from="./content-template.css"></require>

  <div id="example">
    <div class="demo-section k-content wide">
      <ul id="products"
          class="dairy-photos"
          ak-tooltip="k-filter: a; k-content.call: getTemplate($event); k-width.bind: 400; k-height.bind: 200; k-position: top">
        <li>
          <a href="#" data-id="11" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/11.jpg" /> Queso de Cabrales</a>

adriatic

<!-- app.html  -->

adriatic

.dairy-photos {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.dairy-photos li {
  display: inline-block;
  margin: 0;
  padding: 0;

adriatic

<template>
  <require from="./basic-use.css"></require>
  <div id="example"
       ak-tooltip="k-filter: a;
                  k-width.bind: 120;
                  k-position: top;
                  k-widget.bind: tooltip">
    <div class="demo-section k-content wide">
      <div id="agglomerations">
        <a href="#" title="Canton - 26,300,000" ref="canton" id="canton"></a>