JeroenVinke/app.html

## app.html
<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>
  <require from="aurelia-kendoui-bridge/grid/grid-command"></require>

  <h1>Forked frozed columns</h1>

  <button ak-button click.delegate="showSelection()">Show selection</button>

  <p>Selected IDs: ${selectedids}</p>

  <ak-grid k-data-source.bind="datasource" id="grid" k-widget.bind="grid"
     k-on-data-bound.delegate="onDataBound($event.detail)"
     k-on-edit.delegate="onEdit($event.detail)"
     k-sortable.bind="{ mode: 'multiple',   allowUnsort: 'true'}"
     k-filterable.bind="{  mode: 'row' }" k-editable="inline" k-reorderable.bind="true"
     k-groupable.bind="true"
     k-resizable.bind="true" k-column-menu.bind="true"
     k-selectable="[row,multiple]"
     k-pageable.bind="pageable">

    <ak-col k-field="OrderID" k-title="Order ID" k-locked.bind="true" k-lockable.bind="false" k-width.bind="150"></ak-col>
    <ak-col k-title="Web Link1" k-width="160px"
       k-template="<a class='my-link' href='http://aurelia.io' target='_blank'>http://aurelia.io</a>">
    </ak-col>
    <ak-col k-width="180px" k-title="command" k-command.bind="['edit']"
        k-click.call="onEdit($event)" k-title="&nbsp;" k-locked.bind="true" k-lockable.bind="false"></ak-col>


    <ak-col  k-title="Details"  k-width.bind="150">
      <ak-template>
        <button click.delegate='details($event)' class='k-button'>${OrderID}</button>
      </ak-template>
    </ak-col>
    <ak-col k-field="OrderID" k-lockable.bind="false" ></ak-col>
    <ak-col k-field="ShipCountry" k-title="Ship Country" k-width.bind="300"></ak-col>
    <ak-col k-field="ShipCity" k-title="Ship City" k-width.bind="300"></ak-col>
    <ak-col k-field="ShipName" k-title="Ship Name" k-locked.bind="true" k-width.bind="300"></ak-col>
    <ak-col k-field="ShipAddress" k-lockable.bind="false" k-width.bind="400"></ak-col>
  </ak-grid>
</template>

## app.js
export class FrozenColumns {
    constructor() {
        this.selectedids = [];
        this.datasource = {
            type: 'odata',
            transport: {
                read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'
            },
            schema: {
                model: {
                    fields: {
                        OrderID: {
                            type: 'number'
                        },
                        ShipCountry: {
                            type: 'string'
                        },
                        ShipName: {
                            type: 'string'
                        },
                        ShipCity: {
                            type: 'string'
                        },
                        ShipAddress: {
                            type: 'string'
                        }
                    }
                }
            },
            pageSize: 10
        };
    }
    onDataBound(e) {
        let grid = e.sender;
        kendo.jQuery('a[href*=\'#\']', grid.tbody).removeAttr('href');
    }

    details(e) {
        let grid = this.grid;
        var targetRow = $(e.target).closest("tr");

        grid.select(targetRow);
        // redirect if required
    }

    onEdit(e) {
        let grid = e.sender;
        var targetRow = $(e.container);
        grid.select(targetRow);
    }

    showSelection() {
        var sels = [];
        var grid = this.grid;
        var selectedRows = grid.select();
        var maxRows = selectedRows.length / 2;

        selectedRows.each(function(idx, el) {
            let dataItem = grid.dataItem(el);
        });

        var i;
        var a1;
        for (i = 0; i < maxRows; i++) {
            a1 = selectedRows[i];
            let dataItem = grid.dataItem(a1);

            sels.push(dataItem.OrderID);
        }

        this.selectedids = sels;
    }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <!--<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>-->
        <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.2.0/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge');

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="aurelia-kendoui-bridge/grid/grid"></require>
	<require from="aurelia-kendoui-bridge/grid/col"></require>
	<require from="aurelia-kendoui-bridge/common/template"></require>
	<require from="aurelia-kendoui-bridge/grid/grid-command"></require>

	<h1>Forked frozed columns</h1>

	<button ak-button click.delegate="showSelection()">Show selection</button>

	<p>Selected IDs: ${selectedids}</p>

	<ak-grid k-data-source.bind="datasource" id="grid" k-widget.bind="grid"
	k-on-data-bound.delegate="onDataBound($event.detail)"
	k-on-edit.delegate="onEdit($event.detail)"
	k-sortable.bind="{ mode: 'multiple', allowUnsort: 'true'}"
	k-filterable.bind="{ mode: 'row' }" k-editable="inline" k-reorderable.bind="true"
	k-groupable.bind="true"
	k-resizable.bind="true" k-column-menu.bind="true"
	k-selectable="[row,multiple]"
	k-pageable.bind="pageable">

	<ak-col k-field="OrderID" k-title="Order ID" k-locked.bind="true" k-lockable.bind="false" k-width.bind="150"></ak-col>
	<ak-col k-title="Web Link1" k-width="160px"
	k-template="<a class='my-link' href='http://aurelia.io' target='_blank'>http://aurelia.io</a>">
	</ak-col>
	<ak-col k-width="180px" k-title="command" k-command.bind="['edit']"
	k-click.call="onEdit($event)" k-title=" " k-locked.bind="true" k-lockable.bind="false"></ak-col>


	<ak-col k-title="Details" k-width.bind="150">
	<ak-template>
	<button click.delegate='details($event)' class='k-button'>${OrderID}</button>
	</ak-template>
	</ak-col>
	<ak-col k-field="OrderID" k-lockable.bind="false" ></ak-col>
	<ak-col k-field="ShipCountry" k-title="Ship Country" k-width.bind="300"></ak-col>
	<ak-col k-field="ShipCity" k-title="Ship City" k-width.bind="300"></ak-col>
	<ak-col k-field="ShipName" k-title="Ship Name" k-locked.bind="true" k-width.bind="300"></ak-col>
	<ak-col k-field="ShipAddress" k-lockable.bind="false" k-width.bind="400"></ak-col>
	</ak-grid>
	</template>
	export class FrozenColumns {
	constructor() {
	this.selectedids = [];
	this.datasource = {
	type: 'odata',
	transport: {
	read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'
	},
	schema: {
	model: {
	fields: {
	OrderID: {
	type: 'number'
	},
	ShipCountry: {
	type: 'string'
	},
	ShipName: {
	type: 'string'
	},
	ShipCity: {
	type: 'string'
	},
	ShipAddress: {
	type: 'string'
	}
	}
	}
	},
	pageSize: 10
	};
	}
	onDataBound(e) {
	let grid = e.sender;
	kendo.jQuery('a[href*=\'#\']', grid.tbody).removeAttr('href');
	}

	details(e) {
	let grid = this.grid;
	var targetRow = $(e.target).closest("tr");

	grid.select(targetRow);
	// redirect if required
	}

	onEdit(e) {
	let grid = e.sender;
	var targetRow = $(e.container);
	grid.select(targetRow);
	}

	showSelection() {
	var sels = [];
	var grid = this.grid;
	var selectedRows = grid.select();
	var maxRows = selectedRows.length / 2;

	selectedRows.each(function(idx, el) {
	let dataItem = grid.dataItem(el);
	});

	var i;
	var a1;
	for (i = 0; i < maxRows; i++) {
	a1 = selectedRows[i];
	let dataItem = grid.dataItem(a1);

	sels.push(dataItem.OrderID);
	}

	this.selectedids = sels;
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<!--<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>-->
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.2.0/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge');

	aurelia.start().then(a => a.setRoot());
	}