0

I am trying to use Kendo Grid in Lightning. I was running into similar issues as this thread Error while loading a js as static resource in lightning Web component.

I was able to get a little further by preloading jquery then including individual java scripts instead of kendo.all.min.js. However after rendering the header the grid fails to render rows and complains about

Error: Invalid template:'

in html template I have:

  <div id="grid1" class="myGrid"></div>

in renderedCallback I have:

loadScript(this, KendoJS + '/jquery.min.js')
 .then(() => {

      Promise.all([
        loadStyle(this, KendoJS + '/kendo.common.min.css'),
        loadStyle(this, KendoJS + '/kendo.default.min.css'),
        loadScript(this, KendoJS + '/kendo.core.min.js'),
        loadScript(this, KendoJS + '/kendo.data.min.js'),
        loadScript(this, KendoJS + '/kendo.columnsorter.min.js'),
        loadScript(this, KendoJS + '/kendo.grid.min.js'),
      ])
      .then(() => {

        const ele = this.template.querySelector('div.myGrid');
        // eslint-disable-next-line no-undef
        $(ele).kendoGrid({
          columns: [ {
            field: "name",
            template: "<strong>#: name # </strong>"
          }],
          dataSource: [ { name: "Jane Doe" }, { name: "John Doe2" } ]             
        });
      })
      .catch(error => {
      // eslint-disable-next-line no-console
      console.error({
        message: 'Error occured on KendoGrid',
        error
      });
    })
  });

Has anyone successfully loaded a KendoGrid in a Ligthning Web Component?

  • is <div id="grid1" class="myGrid"></div> all your template? isn't it wrapped in <template> tags? – glls Oct 25 '19 at 14:10
  • my full template was <template> <div id="grid1" class="myGrid"></div> </template> – Drew Oct 25 '19 at 21:37
0

You need to make sure that none of the imported JavaScript files reference external URLs (e.g. CDNs) since Salesforce disallows such access as a security measure. This is probably why the all JS file fails to load. Also note that export and import statements cannot appear in the main JS static resource you load using loadScript.

Additionally, your template needs to be of the form:

<template>
    <div id="grid1" class="myGrid" lwc:dom="manual"></div>
</template>

I recommend reviewing the documentation to see if there are other points you have missed.

|improve this answer|||||
  • my full template was <template> <div id="grid1" class="myGrid"></div> </template> I also include the js as a local static resource and seems to be loading just fine. Issue is within kendo somewhere. I am following patter to similar to github.com/Gurenax/sfdx-lwc-fullcalendarjs – Drew Oct 25 '19 at 21:37
  • I also dont believe it is referencing external js... full error is : Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['name'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['name'] ? '<span class="k-dirty"></span>' : '' #<strong>#: name # </strong></td></tr>' – Drew Oct 25 '19 at 21:54
  • Try adding the DOM manual attribute in the template – Phil W Oct 25 '19 at 21:57
  • Adding lwc:dom="manual" did not help. The error stack trace shows all inside kendo and seems to be related to some dynamic compilation. at Object.compile (..../KendoJS/kendo.core.min.js:25:8911) at Object.i [as template] (.../KendoJS/jquery.min.js:2:86266) at init._tmpl (.../KendoJS/kendo.grid.min.js:28:18826) at init._templates (.../KendoJS/kendo.grid.min.js:28:21189) – Drew Oct 28 '19 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.