Kendo AMD not loading, trying to convert to global

  • 0
  • 1
  • Question
  • Updated 3 months ago
  • Answered
I am trying to load Kendo into Quick Base. I understand that Kendo is loaded as an AMD module. Unfortunately, it is not working with my custom application that I'm trying to load through the Rich Text Field. Are there any suggestions for how to convert Kendo to a global module? Is that even necessary? Thank you!
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb

Posted 3 months ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
I understand what you are trying to do but without a CDN URL to the Kendo library I can only guess what version or components you are using.

You basically have two options:

(1) Try to load Kendo as an AMD library using QuickBase's requirejs implementation:

Here is the requirejs code to load D3 used in an old forum answer:

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3";
  }
});
require(['d3'], function(d3) {
  console.dir(d3);
});

https://community.quickbase.com/quickbase/topics/how-do-you-reference-a-js-library-in-a-code-page#re...

(2) Modify the Kendo library to prohibit it from loading as an AMD module. At the bottom of the Kendo library there will be code similar to this:

  ...
  }(jQuery), window.kendo
}, "function" == typeof define && define.amd ? define : function(e, t) {
  t()
});


You need to knock out the logic that tests for define.amd. This is a tricky task to edit it correctly as the original code is minified, nested and uses constructs that are difficult for humans to read. I think this it the correct modification but I did not test it:

  ...
  }(jQuery), window.kendo
}, function(e, t) {
  t()
});

(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
I just noticed there was a small typo in the requirejs code (errant semicolon) I posted. Here is a version of that code that clears the typo and loads d3 and kendo-ui-core using requirejs and then logs the d3 and kendo objects along with all the requirejs loaded modules:

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3",
    "kendo": "https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.core.min"
  }
});
require(['d3', 'kendo'], function(d3, kendo) {
  console.dir(d3);
  console.dir(kendo);
  console.dir(requirejs.s.contexts._.config );
});
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
Okay I see that undefined now - it is probably some remnant due the the history of the command you put in the console without refreshing the page.

But this is a good thread as I suspect many people have given up using AMD libraries with QuickBase because of precisely what you have experienced.

In future versions of QuickBase we will have native ES6 modules, and Sam is going to have an epiphany and go full on with the monadic pipeline of workflows and all these problems will evaporate.
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
That will be great to have the ES6 modules. I was finally able to get everything working. Just for the sake of anyone looking for a final solution, here is the code that got Kendo working in Quickbase. Thank you for starting me on the right path Dan, I really appreciate your help.
(Edited)
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js";, function () { });

require.config({
paths: {
"jquery": "https://code.jquery.com/jquery-1.9.1.min";,
"jszip": "https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min";,
"kendo.all.min": "https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min";,
}
});

require(["jquery", "jszip", "kendo.all.min"], function ($, JSZip, kendo) {
window.JSZip = JSZip;
$(document).ready(function () {
Grid = new GridTest({ ProcessOrderID: '103308881', FieldList: '1.2.3.4' });
Grid.createGrid();
Grid.initiate();
Grid.showColumns();
})

});
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
I don't know why you are loading requirejs through $.getScript() as it is already loaded by QuickBase.
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
You're totally right, that is unnecessary in QuickBase. I was just copying it from my local. My apologies.