KendoUI Bridge Documentation
  • Introduction
  • About this application
    • Introduction
    • Navigation guide
    • Components catalog
    • Installation
    • Catalog index
    • Themes selector
  • About Aurelia
    • Key features
  • About KendoUI
    • Integrated with Aurelia
    • Why choose KendoUI
  • Developers tutorials
    • Introduction
    • Sample application structure
    • esnext - kendo
    • esnext-aspnetcore - kendo-2017
    • esnext-aspnetcore - kendo-2015
    • typescript - kendo
    • typescript-aspnetcore - kendo
    • esnext- webpack
    • typescript-webpack kendo
  • Developers notes
    • Current limitations
    • Loading a subset of controls
    • Lazy loading wrappers
    • Running gists
    • Kendo Tooltip HTML content
    • Bundling details
    • Dynamic content creation
    • Bundling step by step instructions
    • What you need to know
    • Localization
    • Prevent JSPM from loading jQuery
  • Bridge developers notes
    • Introduction
    • Bridge utilities
    • Generation of bindables
    • Babel DTS generator
    • Grid HTML api
    • Template compilation
    • Harvesting bindable variables
    • Registry helper class
    • Creating gists for the catalog app
  • Troubleshooting
    • Introduction
    • Using gists and GistRun
Powered by GitBook
On this page
  • 6.9 Creating gists for the catalog app
  • Introduction
  • Step 1
  • Step 2
  1. Bridge developers notes

Creating gists for the catalog app

PreviousRegistry helper classNextTroubleshooting

Last updated 7 years ago

Bridge developers notes

6.9 Creating gists for the catalog app

Introduction

Note: this article is written for bridge developers only. Creating and using gists for application developers that use the bridge is described here

We recently added the feature to run each example of each Aurelia component in the app, using the Aurelia tool:

Image 1

This GistRun is invoked by a click on the RUN button on the Autocomplete page of the catalog app:

Step 1

{
  "title": "ComboBox",
  "documentation": "http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox",
  "samples": {
    "basic-use": {
      "route": ["", "basic-use"],
      "gist": "https://gist.run/?id=xxx"
    },
    "api": {
      "title": "API",
      "gist": "https://gist.run/?id=xxx"
    },
    "cascading-combobox": {
      "gist": "https://gist.run/?id=xxx"
    },
    "customizing-templates": {
      "gist": "https://gist.run/?id=xxx"
    },
    "grouping": {
      "gist": "https://gist.run/?id=xxx"
    },
    "server-filtering": {
      "gist": "https://gist.run/?id=xxx"
    },
    "virtualization": {
      "gist": "https://gist.run/?id=xxx"
    },
    "events": {
      "gist": "https://gist.run/?id=xxx"
    }
  }
}

Step 2

Create the gists for each of the sample used on this page of the catalog app

To avoid the repetition, we will show the creation of just the ComboBox basic use gist.

Step 2.1 - create a new Gist

Image 2

Step 2.2 - populate the Gist

Drag the four prepared files shown below

Image 3

and drop them on top of the GitHub Gist page which was empty so far, shown on Image 2. Note that this "drag and drop" use is the best workaround for the current lack of GistRun tool's to support the import of the whole project for the gist.

Now, we have these files added to the the gist:

Image 4

Note that we also added the Gist title (top of the gist window) "ComoboBox: basic use".

At this point we need to explain what are these four "prebuilt" files we just added to the gist:

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.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.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/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

This is the standard "beginning" of any Aurelia application - with a very big difference, caused by the line:

<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js">

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}
<template>
    <div id="example">
        <div id="cap-view" class="demo-section k-content">
            <h4>Customize your Kendo T-shirt</h4>
            <img src="http://demos.telerik.com/kendo-ui/content/web/combobox/tShirt.png" id="tshirt"/>

            <h4>T-shirt fabric</h4>
            <ak-combobox k-data-text-field="text"
                              k-data-value-field="value"
                              k-data-source.bind="data"
                              k-value.two-way="fabric"
                              k-filter="contains"
                              k-suggest.bind="true"
                              style="width: 100%;">
            </ak-combobox>

            <h4 style="margin-top: 2em;">T-shirt Size</h4>
            <ak-combobox k-value.two-way="size">
              <select style="width: 100%;">
                <option>X-Small</option>
                <option>Small</option>
                <option>Medium</option>
                <option>Large</option>
                <option>X-Large</option>
                <option>2X-Large</option>
              </select>
            </ak-combobox>

            <button class="k-button k-primary" click.delegate="buyCap()" style="margin-top: 2em; float: right;">Customize</button>
        </div>
    </div>
    <style>
      #tshirt {
           display: block;
           margin: 2em auto;
       }
       .k-readonly
       {
           color: gray;
       }
    </style>
</template>
export class BasicUse {
  data = [
    { text: 'Cotton', value: '1' },
    { text: 'Polyester', value: '2' },
    { text: 'Cotton/Polyester', value: '3' },
    { text: 'Rib Knit', value: '4' }
  ];

  fabric = '3';

  buyCap() {
    alert(`Thank you! Your Choice is:\n\nFabric ID: ${this.fabric} and Size: ${this.size}`);
  }
}

Step 2.3 - Save the Gist

Click on the Save Gist as public or Update public gist

Image 1

Lastly copy the gist ID from the gist page URL

Image 2

and paste it in the registry.json entry for the ComboBox: basic use example.

Image 3 This ends this tutorial

The rest of this article demonstrates the process of adding the **RUN** button to the page.

Prepare the file by adding the basic definition of the gist to be used.

Go to to create a new, empty Gist

which tells the GistRun tool to fetch the complete, bundled Aurelia runtime modules set from the https://rawgit.com server. The actual bundle was prepared by Aurelia-UI-Toolkits team and is being maintained

This is the standard Aurelia configuration function which requires the presence of the Aurelia-KendoUI bridge. That presence is of course ensured by specific content of the repository

app.html - the HTML tab from Code Preview on

app.js - the Javascript tab from Code Preview on

combobox basic use
registry.json
https://gist.github.com/
here
aurelia-kendoui-bundles
this page
this page
Aurelia KendoUI bridge catalog
GistRun