# esnext-aspnetcore - kendo-2017

## Summary

This article replaces the original [**esnext-aspnetcore - kendo-2015**](https://github.com/aurelia-ui-toolkits/kendoui-bridge-docs/tree/fb7ebff1868c263a493ed170041f9d234694bd9f/developers-tutorials/43_es2016-aspnet5.html#esnext-aspnetcore---kendo) by describing the changes due to .NET Core 2.0 SDK. Note that the reference to installing .NET core SDK (as mentioned in the paragraph below has to be changed to point to [**this**](https://www.microsoft.com/net/core#windowscmd) article.

* Details on building and running this applications are [**here**](https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-aspnetcore/src/skeleton#running-the-app-without-visual-studio).
* Temporarily (until this whole books is completely updated, please use the this next section as a guide for KendoUI SDK and KendoUI bridge installation. Observe that several references to KendoUI SDK are different than in the original [**esnext-aspnetcore - kendo-2015**](https://github.com/aurelia-ui-toolkits/kendoui-bridge-docs/tree/fb7ebff1868c263a493ed170041f9d234694bd9f/developers-tutorials/43_es2016-aspnet5.html#esnext-aspnetcore---kendo) chapter.

## Details

### Step 0 - KendoUI SDK and KendoUI bridge installation

Progress / Telerik has dramatically improved the tooling for KendoUI SDK distribution and installation by adding the support for using **npm** in that process (see [**this article**](http://docs.telerik.com/kendo-ui/intro/installation/npm) for more details). Because of that, we will now always use the command

```
npm install --save @progress/kendo-ui
```

as the means to add KendoUI PRO SDK to various applications described in this set of tutorials

### Step 1.

Since we are starting with the well known [**skeleton-esnext-aspnetcore**](https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-aspnetcore), let's start with making the folder `skeleton-esnext-aspnetcore-2017\src\skeleton` to be the current folder and entering the following commands in the console:

```
    npm install --save @progress/kendo-ui
    npm install css aurelia-kendoui-bridge
    jspm install
```

(*Note that* `jspm install` *simply updates the existing* `config.js`*file, to accomodate for just added KendoUI SDK, as well as* `css` *and* `aurelia-kendoui-bridge` *bridge libraries.* )

### Step 2.

Manually pdate `config.js` (*Note that this file is now in* `wwwroot/config.js` *file*)

```
    paths: {
       "*": "dist/*",
       "github:*": "jspm_packages/github/*",
       "npm:*": "jspm_packages/npm/*",
       "kendo.*": "node_modules/@progress\kendo-ui/js/kendo.*.js"
    },
```

### Step 3.

Add this `autocomplete.js` file to the project

```
    import 'kendo-ui/js/kendo.autocomplete.min';

    export class autocomplete{
      constructor() {
        this.datasource = {
          transport: {
            read: {
              dataType: 'jsonp',
              url: '//demos.telerik.com/kendo-ui/service/Customers'
            }
          }
        };
      }    
    }
```

### Step 4.

Add this `autocomplete.html` file project

```
    <template>
      <require from="aurelia-kendoui-bridge/autocomplete/autocomplete"></require>
      <require from="aurelia-kendoui-bridge/common/template"></require>
      <require from="kendo-ui/styles/kendo.common.min.css!"></require>
      <require from="kendo-ui/styles/kendo.bootstrap.min.css!"></require>
      <require from="./autocomplete.css"></require>

      <div id="example" style="margin-top: 20px; margin-left: 20px">
        <div class="demo-section k-content">
          <p><strong>Customers:</strong></p>

          <ak-autocomplete k-data-source.bind="datasource"
                          k-height.bind="400"
                          k-min-length.bind="1"
                          k-data-text-field="ContactName">
            <ak-template>
              <span class="k-state-default" style="background-image: url('http://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg')"></span>
              <span class="k-state-default"><h3>${ContactName}</h3><p>${CompanyName}</p></span>
            </ak-template>
            <ak-template for='headerTemplate'>
              <div class="dropdown-header k-widget k-header">
                <span>Photo</span>
                <span>Contact info</span>
              </div>
            </ak-template>

            <input id="autocomplete-customizing-templates-customers" style="width: 50%"/>
          </ak-autocomplete>

          <p class="demo-hint">Start typing to find a customer. E.g. "Ann" </p>
        </div>
      </div>
    </template>
```

### Step 5.

Add this `autocomplete.css` file to the project

```
    .dropdown-header {
            border-width: 0 0 1px 0;
            text-transform: uppercase;
        }

        .dropdown-header > span {
            display: inline-block;
            padding: 10px;
        }

        .dropdown-header > span:first-child {
            width: 50px;
        }

        .k-item {
            line-height: 1em;
            min-width: 300px;
        }

        /* Material Theme padding adjustment*/

        .k-material .k-item,
        .k-material .k-item.k-state-hover,
        .k-materialblack .k-item,
        .k-materialblack .k-item.k-state-hover {
            padding-left: 5px;
            border-left: 0;
        }

        .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;
        }

        .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;
        }

        h3 {
            font-size: 1.2em;
            font-weight: normal;
            margin: 0 0 1px 0;
            padding: 0;
        }

        p {
            margin: 0;
            padding: 0;
            font-size: .8em;
        }
```

### Step 6.

Add the request to load the aurelia-kendoui-bridge plugin by adding the highlighted statement below (`.plugin('aurelia-kendoui-bridge');` to the file `main.js`

![](https://cloud.githubusercontent.com/assets/2712405/21959138/412ffcfc-da8c-11e6-82bd-b326e34e830d.png)

### Step 7.

Add the following line to `app.js`

```
    { route: 'autocomplete',  name: 'autocomplete', moduleId: 'autocomplete', nav: true, title: 'Autocomplete' }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aurelia-ui-toolkits-1.gitbook.io/kendoui-bridge-docs/developers-tutorials/esnext-aspnetcore-kendo-2017.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.