adriatic

<template>
  <div id="example">
    <ak-gantt k-data-source.bind="tasksDataSource"
             k-dependencies.bind="dependenciesDataSource"
             k-assignments.bind="assignments"
             k-resources.bind="resources"
             k-views.bind="['day', 'week', {type:'month', selected: true}]"
             k-height.bind="700"
             k-show-work-hours.bind="false"
             k-show-work-days.bind="false"

adriatic

<template>
  <div id="example">
    <div class="box wide">
      <div class="box-col">
            <h4>Selection</h4>
            <ul class="options">
                <li>
                    <input type="text" value.bind="index" class="k-textbox" />
                    <button ak-button click.delegate="select()">Select task</button>
                </li>

adriatic

<template>
  <require from="./task-template.css"></require>
  <div id="example">
    <ak-gantt k-data-source.bind="tasksDataSource"
             k-dependencies.bind="dependenciesDataSource"
             k-assignments.bind="assignments"
             k-resources.bind="resources"
             k-views.bind="['day', {type:'week', selected: true}]"
             k-height.bind="700"
             k-row-height.bind="62"

adriatic

<template>
  <ak-grid k-data-source.bind="datasource"
          k-pageable.bind="true"
          k-navigatable.bind="true"
          k-toolbar.bind="['create', 'save', 'cancel']"
          k-editable.bind="true">
    <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width.bind="120"></ak-col>
    <ak-col k-field="UnitsInStock" k-title="Units In Stock" k-width.bind="120"></ak-col>
    <ak-col k-field="Discontinued" k-width.bind="120"></ak-col>
    <ak-col k-command="destroy" k-title="&nbsp;" k-width.bind="150"></ak-col>

adriatic

<template>
  <ak-grid k-data-source.bind="datasource"
          k-pageable.bind="{ input: true, numeric: false}"
          k-filterable.bind="true"
          k-sortable.bind="true"
          k-scrollable.bind="true">
    <ak-col k-title="ProductName" k-field="ProductName"></ak-col>
    <ak-col k-title="Unit Price" k-field="UnitPrice" k-format="{0:c}" k-width="130px"></ak-col>
    <ak-col k-title="Units In Stock" k-field="UnitsInStock" k-width="130px"></ak-col>
    <ak-col k-field="Discontinued" k-width="130px"></ak-col>

adriatic

<template>
  <ak-grid k-data-source.bind="datasource" k-pageable.bind="true" k-filterable.bind="true" k-sortable.bind="true">
    <ak-col k-title="OrderId" k-field="OrderID"></ak-col>
    <ak-col k-field="Freight"></ak-col>
    <ak-col k-title="Order Date" k-field="OrderDate" k-format="{0:MM/dd/yyyy}"></ak-col>
    <ak-col k-title="Ship Name" k-field="ShipName"></ak-col>
    <ak-col k-title="Ship City" k-field="ShipCity"></ak-col>
  </ak-grid>
</template>

adriatic

<template>
  <ak-grid style="margin-bottom: 20px"
          k-height.bind="550"
          k-editable.bind="true"
          k-sortable.bind="true"
          k-toolbar.bind="['create']"
          k-data-source.bind="dataSource">
    <ak-col k-field="UnitPrice"></ak-col>
    <ak-col k-field="ProductName"></ak-col>
    <ak-col k-command="destroy" k-width.bind="150"></ak-col>

adriatic

<template>
  <ak-grid k-data-source.bind="datasource"
          k-sortable.bind="true"
          k-reorderable.bind="true"
          k-groupable.bind="true"
          k-resizable.bind="true"
          k-filterable.bind="true"
          k-column-menu.bind="true"
          k-pageable.bind="true">
    <ak-col k-field="OrderID" k-title="Order ID" k-locked.bind="true" k-lockable.bind="false" k-width.bind="150"></ak-col>

adriatic

<template>
  <ak-grid k-data-source.bind="datasource"
          k-sortable.bind="true"
          k-reorderable.bind="true"
          k-groupable.bind="true"
          k-resizable.bind="true"
          k-filterable.bind="true"
          k-column-menu.bind="true"
          k-pageable.bind="true">
    <ak-col k-field="OrderID" k-title="Order ID" k-locked.bind="true" k-lockable.bind="false" k-width.bind="150"></ak-col>

adriatic

<template>
  <ak-grid k-data-source.bind="datasource" k-pageable.bind="true" k-toolbar.bind="['create']" k-editable="inline">
    <ak-col k-field="ProductName"></ak-col>
    <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width="120px"></ak-col>
    <ak-col k-field="UnitsInStock" k-title="Units In Stock" k-width="120px"></ak-col>
    <ak-col k-field="Discontinued" k-width="120px"></ak-col>
    <ak-col k-command.bind="['edit', 'destroy']" k-title="&nbsp;" width="250px"></ak-col>
  </ak-grid>
</template>