Giter Site home page Giter Site logo

demo-kendo's Introduction

aurelia-kendoui-plugin demo site

Live demo Plugin repository

How to run

  1. npm install
  2. jspm install
  3. gulp watch

How to deploy from samples

  1. remove the src, styles and images folder from the demo-kendo repository
  2. copy from the aurelia-kendoui-plugin/sample folder, the src, styles, images folder over to demo-kendo
  3. update the plugin: jspm install aurelia-kendoui-bridge
  4. run gulp watch and verify that everything runs correctly, and that there are no errors in the console
  5. gulp deploy
  6. open the site. If you get errors in the console, it has happened that they disappear after about a minute
  7. push changes made by gulp deploy to the github repo

demo-kendo's People

Contributors

jeroenvinke avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

demo-kendo's Issues

Too many samples for a component need independent scrolling

Grid grew a lot since I last saw it - and this creates an ugly user experience: selecting the list item of a sample that is way down off the page, results the information for that sample be displayed off the page as well (above the current location). The solution for this ought to be simple: the navigation bar that manages the list of samples has to scroll independently of the rest of the page.

We need to use newer versions of some packages

1. jQuery version and package-lock.json file

Almost any GitHub repository that has parts of KendoUI is deemed "infected" by GitHub and I do not advise to ignore it 馃槃 . The problem is with the version of the jQuery that we still insist on using (it is version lot older than current and I am pretty sure that everything works jut fine with the most current version).

2. marked

This issue is similar to the jQuery above:

image

Solution

In order to pacify GitHub staff, I propose that as a first aid, we remove the package-lock.json file from all Kendo repositories and then verify that KendoUI bridge works with most current versions of the packages that "irritate" GitHub.

Building the app results with a lot of "deprecated" warnings

This is a typical set of warnings:

...
ok   Installed github:jspm/nodelibs-http@^1.7.0 (1.7.1)
     Downloading npm:[email protected]
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
ok   Installed npm:os-browserify@^0.1.2 (0.1.2)
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
ok   Installed npm:[email protected] (0.0.0)
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
ok   Installed npm:Base64@~0.2.0 (0.2.1)
ok   Installed clean-css as npm:clean-css@^3.4.8 (3.4.25)
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
ok   Installed babel-runtime as npm:babel-runtime@^5.8.24 (5.8.38)
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
(node:16028) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
...

area-charts-binding-to-grouped-data fails to render the chart

http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/area-charts-binding-to-grouped-data

Error:

Unhandled rejection (SystemJS) XHR error (404 Not Found) loading http://aurelia-ui-toolkits.github.io/demo-kendo/src/stock-data-2011.json
	Error: XHR error (404 Not Found) loading http://aurelia-ui-toolkits.github.io/demo-kendo/src/stock-data-2011.json
	Error loading http://aurelia-ui-toolkits.github.io/demo-kendo/src/stock-data-2011.json!ht鈥s.github.io/demo-kendo/jspm_packages/github/systemjs/[email protected] as "stock-data-2011.json!json" from https://gist-serve.jeroenvinke.nl/file-cache-bust/28004/8a0ec3066cf189f1e30c01bc648a73c0/app.js

several different samples for Menu component are broken

Direction sample: attempt to change any of the provided settings (green rectangle):

image

The menu object gets rendered as a single line (likely weight is set to 0):

image

The same is true for Orientation sample and Animation sample

Very Interesting

I have worked with kendo ui a lot in the past. Really awesome to see this done with aurelia ! 馃憤

App fails to build locally

Chrome console shows

Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:9000/dist/app-build.js
    Error loading http://localhost:9000/dist/app-build.js
    Error loading http://localhost:9000/jspm_packages/npm/[email protected]
    at o (http://localhost:9000/jspm_packages/system.js:4:12694)
    at XMLHttpRequest.s.onreadystatechange (http://localhost:9000/jspm_packages/system.js:4:13219)

I built it the standard way:

Step 1 - cloned the repo

C:\work\aurelia-ui-toolkits
位 git clone https://github.com/aurelia-ui-toolkits/demo-kendo.git
Cloning into 'demo-kendo'...
remote: Counting objects: 133, done.
remote: Compressing objects: 100% (87/87), done.
remote: Total 133 (delta 27), reused 131 (delta 27), pack-reused 0
Receiving objects: 100% (133/133), 488.03 KiB | 0 bytes/s, done.
Resolving deltas: 100% (27/27), done.
Checking connectivity... done.

Step 2 run the installs

npm install
jspm install

Step 3 run the app

位 gulp watch
[18:37:52] Using gulpfile C:\work\aurelia-ui-toolkits\demo-kendo\gulpfile.js
[18:37:52] Starting 'build'...
[18:37:52] Starting 'clean'...
[18:37:52] Finished 'clean' after 9.91 ms
[18:37:52] Starting 'build-system'...
[18:37:52] Starting 'build-html'...
[18:37:52] Starting 'build-css'...
[18:37:52] Finished 'build-css' after 25 ms
[18:37:53] Finished 'build-html' after 854 ms
[18:37:53] Finished 'build-system' after 923 ms
[18:37:53] Finished 'build' after 937 ms
[18:37:53] Starting 'serve'...
[BS] Local URL: http://localhost:9000
[BS] Serving files from: .
[18:37:54] Finished 'serve' after 1.09 s
[18:37:54] Starting 'watch'...
[18:37:54] Finished 'watch' after 67 ms

Perhaps it's too late in the day - but I have no clue what is the problem here. Since the app runs deployed, it ought to be that you did not "check-in" something?

Toolbar'a imports section incomplete

See Integration with editors sample:

image

versus actual code in app.html

  <require from="./integration-with-editors.css!css"></require>
  <require from="aurelia-kendoui-bridge/toolbar/toolbar"></require>
  <require from="aurelia-kendoui-bridge/toolbar/toolbar-item"></require>
  <require from="aurelia-kendoui-bridge/toolbar/toolbar-item-button"></require>
  <require from="aurelia-kendoui-bridge/dropdownlist/dropdownlist"></require>
  <require from="aurelia-kendoui-bridge/numerictextbox/numerictextbox"></require>
  <require from="aurelia-kendoui-bridge/colorpicker/colorpicker"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>

Rebuilding kendo-demo

I believe that it is time to recreate the kendo-demo (as kendo-demo-2.0) where we replace the kendo-sdk folder with the npm-installed most current KendoUI SDK. I will do it in parallel with the existing demo-kendo and once all is verified correct, we will swap them.

Once I am done with the Aurelia CI-CD project, I will apply that knowledge to kendo-demo - so it will be deployed as a Docker / Kubernete container

Failed to update demo-kendo

I forgot how to build the content of the sample folder in the context of urelia-kendoui-bridge, since running gulp watch in the sample folder fails because there is no gulpfile.js.

So here is my status

  1. I fixed the samples.json file
  2. I cloned https://github.com/aurelia-ui-toolkits/demo-kendo and fixed controls.html in that repo. Tested 1. and 2. locally - all fine.
  3. In order to stay compliant with the build process for catalog, I did not use this https://github.com/aurelia-ui-toolkits/demo-kendo repo to update the Catalog - for the reason explained in the first paragraph above.

In order to make you the Catalog update as simple as possible I added the fix 2 above to urelia-kendoui-bridge - see aurelia-ui-toolkits/aurelia-kendoui-bridge@46c32c1

If you cannot do this early on your Monday, I will post the message in the gitter channel that the Pivot Grid is accessible via http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/pivot-grid-basic-use

Error: (SystemJS) [BABEL] unknown: Unknown option: direct.0

Running gulp watch results with

Error: (SystemJS) [BABEL] unknown: Unknown option: direct.0
	ReferenceError: [BABEL] unknown: Unknown option: direct.0
	    at Logger.error (http://localhost:9000/jspm_packages/npm/[email protected]/browser.js:8955:11)
	    at OptionManager.mergeOptions (http://localhost:9000/jspm_packages/npm/[email protected]/browser.js:9463:29)
	    at OptionManager.init (http://localhost:9000/jspm_packages/npm/[email protected]/browser.js:9553:10)
	    at File.initOptions (http://localhost:9000/jspm_packages/npm/[email protected]/browser.js:8193:75)
	    at new File (http://localhost:9000/jspm_packages/npm/[email protected]/browser.js:8183:22)
	    at Pipeline.transform (http://localhost:9000/jspm_packages/npm/[email protected]/browser.js:13515:16)
	    at r (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:31:7722)
	    at r._settlePromiseFromHandler (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:30:13014)
	    at r._settlePromise (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:30:13817)
	    at r._settlePromise0 (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:30:14518)
	    at r._settlePromises (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:30:15848)
	    at r._drainQueue (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:29:3148)
	    at r._drainQueues (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:29:3209)
	    at drainQueues (https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js:29:1238)

@JeroenVinke: Googling for this message does not yield anything meaningful. Did you change the babel-core version recently? Why does this not happen to you?

Building demo-kendo issues

Following my response to @Rhistina 鈽濓笍 November 16, 2017 4:13 PM:

A long list of deprecation warnings (see the next section ) - using

位 npm -v                                                                              
5.4.2                                                                                 
                                                                                      
H:\work\aurelia-ui-toolkits\kendoui\demo-kendo (master) ([email protected])  
位 jspm -v                                                                             
0.16.15                                                                               
Running against local jspm install.                                                   

Running gulp watch, the app crashes

aurelia-logging-console.js:54 ERROR [app-router] Error: Route not found: pivotgrid
    at Router._createNavigationInstruction (aurelia-router.js:1082)
    at aurelia-router.js:1506
    at r (bluebird.min.js:31)
    at r._settlePromiseFromHandler (bluebird.min.js:30)
    at r._settlePromise (bluebird.min.js:30)
    at r._settlePromise0 (bluebird.min.js:30)
    at r._settlePromises (bluebird.min.js:30)
    at r._drainQueue (bluebird.min.js:29)
    at r._drainQueues (bluebird.min.js:29)
    at drainQueues (bluebird.min.js:29)
    at <anonymous>

App crashes here

    Router.prototype._createNavigationInstruction = function _createNavigationInstruction() {
      var url = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
      var parentInstruction = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];

      var fragment = url;
      var queryString = '';

      var queryIndex = url.indexOf('?');
      if (queryIndex !== -1) {
        fragment = url.substr(0, queryIndex);
        queryString = url.substr(queryIndex + 1);
      }

      var results = this._recognizer.recognize(url);
      if (!results || !results.length) {
        results = this._childRecognizer.recognize(url);
      }

      var instructionInit = {
        fragment: fragment,
        queryString: queryString,
        config: null,
        parentInstruction: parentInstruction,
        previousInstruction: this.currentInstruction,
        router: this,
        options: {
          compareQueryParams: this.options.compareQueryParams
        }
      };

      if (results && results.length) {
        var first = results[0];
        var _instruction = new NavigationInstruction(Object.assign({}, instructionInit, {
          params: first.params,
          queryParams: first.queryParams || results.queryParams,
          config: first.config || first.handler
        }));

        if (typeof first.handler === 'function') {
          return evaluateNavigationStrategy(_instruction, first.handler, first);
        } else if (first.handler && typeof first.handler.navigationStrategy === 'function') {
          return evaluateNavigationStrategy(_instruction, first.handler.navigationStrategy, first.handler);
        }

        return Promise.resolve(_instruction);
      } else if (this.catchAllHandler) {
        var _instruction2 = new NavigationInstruction(Object.assign({}, instructionInit, {
          params: { path: fragment },
          queryParams: results && results.queryParams,
          config: null }));

        return evaluateNavigationStrategy(_instruction2, this.catchAllHandler);
      }

      return Promise.reject(new Error('Route not found: ' + url));          <-------
    };

Problems deploying this application to gh-pages

I finally discovered why was I not able to deploy demo-kendo: it was my interpretation of the instructions in the README file. The actual command that failed is deploy.js - which consistently failed to copy anything from the jspm_packages folder.

Once I looked in the content of that folder, I realized that this is indeed the correct behavior - as nothing in that folder matches the definitions below

    './jspm_packages/*.js', // include system.js
    './jspm_packages/github/twbs/bootstrap@*/fonts/*',
    './jspm_packages/npm/font-awesome@*/**/*',
    './jspm_packages/npm/font-awesome*.js',
    './jspm_packages/github/PrismJS/prism*/themes/*.css',
    './jspm_packages/github/google/code-prettify*/loader/**/*',
    './jspm_packages/npm/babel-runtime*/**/*',

In other words, the jspm_packages was not correct in my situation. So, before going any deeper in this analysis, @JeroenVinke can you please confirm that the instructions in the README.md are still accurate?

In particular:

  1. What are the prerequisites for the How to run section?. (do I first clone this repo and then start with this section?)
  2. Item 2.vi. requires Telerik credentials so, if I do need to run this step, I know what was my "jinks" as I do not have these credentials.
  3. The item 2. in How to deploy from samples is obviously inaccurate as there is no doc folder in the aurelia-kendoui-plugin/sample folder.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    馃枛 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 馃搳馃搱馃帀

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google 鉂わ笍 Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.