oneillci/app.html

## app.html
<template>
  <require from='./grid-view'></require>

  Aurelia app ${message}

  <!--<click-to-edit display-value="some display value">
    <template replace-part='content-template'>
      <input type='text' value='yoyo' />
    </template>
  </click-to-edit>-->

  <ul>
    <li repeat.for="person of data">
      ${person.name}, ${person.age}, ${person.active}
    </li>

  </ul>

  <grid-view columns.bind='columns' source.bind='data'></grid-view>
</template>

## app.js
export class App {
  message = "Hello";

  columns = [
    {field: "name", title: "Name", template: this.getNameTemplate()},
    {field: "age", title: "Age", template: this.getAgeTemplate()},
    {field: "active", title: "Is Active"}
  ];

  data = [
    {id: "1", name: "Ciaran", age: 36, active: true},
    {id: "2", name: "Stevie", age: 46, active: false},
  ];

  getAgeTemplate() {
    const template = `
      <span class='enhance-grid-item' data-id='#=data.id#'>
        <click-to-edit display-value='click to edit'>
          <template replace-part='content-template'>
            <input type='text' value.bind='age' />
          </template>
        </click-to-edit>
      </span>
    `;

    return kendo.template(template);
  }

  getNameTemplate() {
    const template = `
      <span class='enhance-grid-item' data-id='#=data.id#'>
        <input type='text' value.bind='name' />
      </span>
    `;

    return kendo.template(template);
  }
}

## bootstrapper.js
export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .globalResources(["./grid-view"])
      .globalResources(["./click-to-edit"]);
    aurelia.start().then(a => a.setRoot());
}

## click-to-edit.html
<template>
  <div show.bind="!isEditing" click.trigger="toggleEditing()">
      &nbsp;${displayValue}
  </div>

  <div show.bind="isEditing" ref="contentContainer">
      <div if.bind="hasDisplayed" part="content-template"></div>
  </div>
</template>

## click-to-edit.js
import {bindable} from "aurelia-framework";

export class ClickToEdit {
  @bindable displayValue = "";
  isEditing = false;
  hasDisplayed = false;

  toggleEditing = () => {
    this.isEditing = !this.isEditing;
    this.hasDisplayed = true;
  }
}

## grid-view.js
import {bindable, inlineView, inject, TemplatingEngine} from "aurelia-framework";

@inlineView(`
<template>
  <div ref="gridElement"></div>
</template>
`)
@inject(TemplatingEngine)
export class GridView {
  @bindable columns;
  @bindable source;
  gridElement;
  $grid;

  constructor(templatingEngine){
    this.templatingEngine = templatingEngine;
  }


  attached() {
      this.renderGrid();
      this.setDataSource();
      this.bindEnhanceGridItems();
  }

  renderGrid() {
      var options = this.getGridOptions();
      this.$grid = $(this.gridElement).kendoGrid(options).data("kendoGrid");
  }

  getGridOptions() {
      var options = {
         columns: this.columns
      };
      return options;
  }

  setDataSource() {
    this.$grid.dataSource.data(this.source);
  }

  bindEnhanceGridItems() {

      var self = this;
      var items = $(this.gridElement).find(".enhance-grid-item:not([au-target])");

      if (items.length) {
          items.each((index, element) => {
              const id = $(element).attr("data-id");
              if (id) {
                  //const item = sourceById.get(id);
                  const item = self.source.filter(x => x.id === id)[0];
                  if (item) {
                      const view = this.templatingEngine.enhance({ element: element, bindingContext: item });
                      view.attached();
                  }
              }
          });
      }
  }
}

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
  <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.default.min.css">

  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body aurelia-app='bootstrapper'>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## script.js
console.log('Hello World!');

## styles.css
/* todo: add styles */
	<template>
	<require from='./grid-view'></require>

	Aurelia app ${message}

	<!--<click-to-edit display-value="some display value">
	<template replace-part='content-template'>
	<input type='text' value='yoyo' />
	</template>
	</click-to-edit>-->

	<ul>
	<li repeat.for="person of data">
	${person.name}, ${person.age}, ${person.active}
	</li>

	</ul>

	<grid-view columns.bind='columns' source.bind='data'></grid-view>
	</template>
	export class App {
	message = "Hello";

	columns = [
	{field: "name", title: "Name", template: this.getNameTemplate()},
	{field: "age", title: "Age", template: this.getAgeTemplate()},
	{field: "active", title: "Is Active"}
	];

	data = [
	{id: "1", name: "Ciaran", age: 36, active: true},
	{id: "2", name: "Stevie", age: 46, active: false},
	];

	getAgeTemplate() {
	const template = `
	<span class='enhance-grid-item' data-id='#=data.id#'>
	<click-to-edit display-value='click to edit'>
	<template replace-part='content-template'>
	<input type='text' value.bind='age' />
	</template>
	</click-to-edit>
	</span>
	`;

	return kendo.template(template);
	}

	getNameTemplate() {
	const template = `
	<span class='enhance-grid-item' data-id='#=data.id#'>
	<input type='text' value.bind='name' />
	</span>
	`;

	return kendo.template(template);
	}
	}
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.globalResources(["./grid-view"])
	.globalResources(["./click-to-edit"]);
	aurelia.start().then(a => a.setRoot());
	}
	<template>
	<div show.bind="!isEditing" click.trigger="toggleEditing()">
	${displayValue}
	</div>

	<div show.bind="isEditing" ref="contentContainer">
	<div if.bind="hasDisplayed" part="content-template"></div>
	</div>
	</template>
	import {bindable} from "aurelia-framework";

	export class ClickToEdit {
	@bindable displayValue = "";
	isEditing = false;
	hasDisplayed = false;

	toggleEditing = () => {
	this.isEditing = !this.isEditing;
	this.hasDisplayed = true;
	}
	}
	import {bindable, inlineView, inject, TemplatingEngine} from "aurelia-framework";

	@inlineView(`
	<template>
	<div ref="gridElement"></div>
	</template>
	`)
	@inject(TemplatingEngine)
	export class GridView {
	@bindable columns;
	@bindable source;
	gridElement;
	$grid;

	constructor(templatingEngine){
	this.templatingEngine = templatingEngine;
	}


	attached() {
	this.renderGrid();
	this.setDataSource();
	this.bindEnhanceGridItems();
	}

	renderGrid() {
	var options = this.getGridOptions();
	this.$grid = $(this.gridElement).kendoGrid(options).data("kendoGrid");
	}

	getGridOptions() {
	var options = {
	columns: this.columns
	};
	return options;
	}

	setDataSource() {
	this.$grid.dataSource.data(this.source);
	}

	bindEnhanceGridItems() {

	var self = this;
	var items = $(this.gridElement).find(".enhance-grid-item:not([au-target])");

	if (items.length) {
	items.each((index, element) => {
	const id = $(element).attr("data-id");
	if (id) {
	//const item = sourceById.get(id);
	const item = self.source.filter(x => x.id === id)[0];
	if (item) {
	const view = this.templatingEngine.enhance({ element: element, bindingContext: item });
	view.attached();
	}
	}
	});
	}
	}
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	<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.default.min.css">

	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
	</head>
	<body aurelia-app='bootstrapper'>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>