adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <h4>Categories:</h4>
      <ak-combobox k-option-label="Select category..."
              k-data-text-field="CategoryName"
              k-data-value-field="CategoryID"
              k-widget.bind="categories"
              k-data-source.bind="{
                  type: 'odata',

adriatic

<template>
  <require from="./logger.js"></require>
  <div id="example">
    <div class="box">
        <h4>Information</h4>
        <p>
            This example shows how to handle events triggered by kendoUpload.
        </p>
    </div>
    <div>

adriatic

<template>
  <require from="./images.css"></require>
  <div id="example">
    <div class="demo-section k-content">

      <h4>Menu with images</h4>

      <ul id="menu-images" ak-menu="k-data-source.bind: dataSource"></ul>
    </div>

adriatic

<template>
    <div id="example">
        <div id="cap-view" class="demo-section k-content">
            <h4>Customize your Kendo Cap</h4>
            <div ref="cap" id="cap" class="black-cap"></div>

            <h4>Cap Color</h4>
            <ak-drop-down-list k-data-text-field="text"
                    					k-data-value-field="value"
                              k-data-source.bind="data"

adriatic

<template>
  <div id="example">
      <div class="demo-section k-content">
          <h4>Find a product</h4>
          <ak-combobox k-placeholder="Select product"
                      k-data-text-field="ProductName"
                      k-data-value-field="ProductID"
                      k-filter="contains"
                      k-auto-bind.bind="false"
                      k-min-length.bind="3"

adriatic

<template>
  <div id="example">
    <div class="demo-section wide k-content">
      <ak-multiselect k-placeholder="Select products..."
                     k-data-text-field="ProductName"
                     k-data-value-field="ProductID"
                     k-auto-bind.bind="false"
                     k-data-source.bind="dataSource"
                     k-value.bind="value"></ak-multiselect>
    </div>

adriatic

<template>
  <div id="example">
    <div class="box wide">
        <h4>Export diagram view</h4>
        <div class="box-col">
            <button class='export-pdf' ak-button click.delegate="savePDF()">Save as PDF</button>
        </div>
    </div>
    <br><br>
    <div class="demo-section k-content wide">

adriatic

<template>
  <div id="example">
    <div class="box wide">
        <h4>Export diagram content</h4>
        <div class="box-col">
            <button ak-button click.delegate="exportPDF()">Export as PDF</button>
        </div>
        <br>
        <div class="box-col">
            <button ak-button click.delegate="exportImage()">Export as Image</button>

adriatic

<template>
  <require from="./logger.js"></require>
  <div id="example">
    <div class="demo-section k-content wide">
      <ak-diagram style="height:600px;"
                 k-data-source.bind="shapesDataSource"
                 k-connections-data-source.bind="connectionsDataSource"
                 k-layout.bind="{
                  type: 'tree',
                  subtype: 'tipover',

adriatic

<template>
  <div id="example">
    <div id="apiOptions" class="box wide">
        <div class="box-col">
            <h4>Add Shape</h4>
            <ul class="options">
                <li>
                    <label for="newShapeX" style="width: 30px;">X:</label>
                    <input ak-numerictextbox="k-value.two-way: newShapeX" />
                </li>