adriatic

<template>
  <require from="./basic-use.css"></require>
  <div id="example">
    <div class="demo-section k-content">
        <div ak-drop-target
             ref="droptargetDiv"
             id="droptarget"
             k-on-dragenter.delegate="droptargetOnDragEnter($event.detail)"
             k-on-dragleave.delegate="droptargetOnDragLeave($event.detail)"
             k-on-drop.delegate="droptargetOnDrop($event.detail)"

adriatic

<template>
  <require from="./container.css"></require>
  <div id="example">
    <div class="demo-section k-content">
      <div id="draggable-container" ref="container">
          <div ak-draggable="k-hint.call: hint(); k-container.bind: container" ref="draggable" class="draggable-item">Foo</div>
      </div>
    </div>
  </div>
</template>

adriatic

<template>
  <require from="./logger.js"></require>
  <require from="./events.css"></require>
  <div id="example">
    <div class="demo-section k-content">
        <div ak-drop-target
             ref="droptargetDiv"
             id="droptarget"
             k-on-dragenter.delegate="droptargetOnDragEnter($event.detail)"
             k-on-dragleave.delegate="droptargetOnDragLeave($event.detail)"

adriatic

<template>
 <div id="example">

            <div class="demo-section k-content">
                <h4>Select movie</h4>
                <ak-drop-down-list k-data-text-field="text"
                            			k-data-value-field="value"
                            			k-data-source.bind="data"
                            			k-height.bind="100"
                                  k-widget.two-way="movies"

adriatic

<template>
    <div id="example">
        <div class="demo-section k-content">
            <h4>Products</h4>
            <ak-drop-down-list k-data-text-field="ProductName"
                              k-data-value-field="ProductID"
                              k-data-source.bind="dataSource"
                              style="width: 100%">
            </ak-drop-down-list>
        </div>

adriatic

<template>
  <div id="example">
      <div class="demo-section k-content">
          <h4>Customers</h4>
          <ak-drop-down-list k-data-text-field="ContactName"
                            k-data-value-field="CustomerID"
                            k-height="400"
                            k-data-source.bind="dataSource"
                            style="width: 100%">
          </ak-drop-down-list>

adriatic

<template>
  <div id="example">
      <div class="demo-section k-content">
          <h4>Products</h4>
          <ak-drop-down-list k-filter="startswith"
                            k-data-text-field="ProductName"
                            k-data-value-field="ProductID"
                            k-data-source.bind="dataSource"
                            style="width: 100%">
          </ak-drop-down-list>

adriatic

<template>
  <div id="example">
      <div class="demo-section k-content">
          <h4>Products</h4>
          <ak-drop-down-list k-filter="startswith"
                            k-data-text-field="ProductName"
                            k-data-value-field="ProductID"
                            k-data-source.bind="dataSource"
                            style="width: 100%">
          </ak-drop-down-list>

adriatic

<template >
    <div id="example">
        <textarea ak-rich-editor style="height:440px">

        &lt;p&gt;&lt;img src=&quot;http://demos.telerik.com/kendo-ui/content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
        &lt;p&gt;
            Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
            and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
            accessibility standards and provides API for content manipulation.

adriatic

<template >
    <div id="example">
        <div class="box wide">
            <div class="box-col">
                <h4>Get value</h4>
                <ul class="options">
                <li>
                    <button ak-button click.delegate="getValue()">Get value</button>
                </li>
                </ul>