Multiselect: customizing templates

app.html

<template>
  <require from="./customizing-templates.css!css"></require>
  <require from="aurelia-kendoui-bridge/multiselect/multiselect"></require>
  <require from="aurelia-kendoui-bridge/button/button"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>

  <div id="example" class="multiselect-custom-templates">
    <div class="demo-section wide k-content">
      <ak-multiselect k-placeholder="Select customers..."
                     k-data-text-field="ProductName"
                     k-data-value-field="ProductID"
                     k-height.bind="400"
                     k-data-source.bind="dataSource"
                     k-value.bind="value"
                     k-widget.bind="multiselect"
                     id="multiselect-customizing-templates-customers">
        <ak-template for="noDataTemplate">
          <div>
            <button ak-button click.delegate="addNew()">addNew</button>
          </div>
        </ak-template>
      </ak-multiselect>
    </div>
  </div>
</template>

app.js

export class Grouping {
  dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        dataType: 'jsonp',
        url: 'https://demos.telerik.com/kendo-ui/service/Products'
      },
      create: {
          url: "https://demos.telerik.com/kendo-ui/service/Products/Create",
          dataType: "jsonp"
      },
      parameterMap: function(options, operation) {
          if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
          }
      }
    },
    schema: {
        model: {
            id: "ProductID",
            fields: {
                ProductID: { type: "number" },
                ProductName: { type: "string" }
            }
        }
    }
  });
  
  addNew(ctx) {
    var value = this.multiselect.input.val();

    var dataSource = this.multiselect.dataSource;

    if (confirm("Are you sure?")) {
        dataSource.add({
            ProductID: 0,
            ProductName: value
        });

        dataSource.one("requestEnd", function(args) {
            if (args.type !== "create") {
                return;
            }

            var newValue = args.response[0].ProductID;

            dataSource.one("sync", function() {
                widget.value(widget.value().concat([newValue]));
            });
        });

        dataSource.sync();
    }
  }
}

customizing-templates.css

#multiselect-customizing-templates-customers-list .dropdown-header {
  border-width: 0 0 1px 0;
  text-transform: uppercase;
}

#multiselect-customizing-templates-customers-list .dropdown-header > span {
  display: inline-block;
  padding: 10px;
}

#multiselect-customizing-templates-customers-list .dropdown-header > span:first-child {
  width: 50px;
}

#multiselect-customizing-templates-customers-list .selected-value {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-size: 100%;
  margin-right: 5px;
  border-radius: 50%;
}

#multiselect-customizing-templates-customers_listbox .k-item {
  line-height: 1em;
  min-width: 300px;
}

/* Material Theme padding adjustment*/

#multiselect-customizing-templates-customers_listbox .k-material .k-item,
#multiselect-customizing-templates-customers_listbox .k-material  .k-item.k-state-hover,
#multiselect-customizing-templates-customers_listbox .k-materialblack  .k-item,
#multiselect-customizing-templates-customers_listbox .k-materialblack .k-item.k-state-hover {
  padding-left: 5px;
  border-left: 0;
}

#multiselect-customizing-templates-customers_listbox .k-item > span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  margin: 20px 10px 10px 5px;
}

#multiselect-customizing-templates-customers_listbox .k-item > span:first-child {
  -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
  box-shadow: inset 0 0 30px rgba(0,0,0,.3);
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

#multiselect-customizing-templates-customers_listbox h3 {
  font-size: 1.2em;
  font-weight: normal;
  margin: 0 0 1px 0;
  padding: 0;
}

#multiselect-customizing-templates-customers_listbox  p {
  margin: 0;
  padding: 0;
  font-size: .8em;
}

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/2017.1.118/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/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/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/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.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', kendo => kendo.pro());

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