Trying to add a template to my grid and I get "@parcel/core: No transformers found for index.x-jsrender."

Hi, I m new to using Syncfusion, and have been liking what I have been able to do with the JavaScript (ES5) 

Components, however I have been trying to copy the demo grid and add an image to my grid, but every time I add the <script> element to the index.html file I get these errors when compiling


I am able to customise a cell within the index.js file without issues, but as soon as I add "<script type="text/x-jsrender" or "<script type="text/x-template" it breaks

I have run updates on the jsrender and parcel packages via npm, but the same error

I am using SyncFusion v20.2.38


Do you know if I have missed anything obvious in my setup that will cause this, or is there anything I need to install in adition to resolve this issue

Many thanks in advance for any help you can provide


6 Replies

RS Rajapandiyan Settu Syncfusion Team July 18, 2022 02:20 PM UTC

Hi Orlando,


Thanks for contacting Syncfusion support.


Currently, we are validating the reported query at our end. We will provide further details on or before July 20th, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S



RS Rajapandiyan Settu Syncfusion Team July 20, 2022 02:04 PM UTC

Hi Orlando,


Thanks for your patience.

By analyzing the error (“@parcel/core: No transformers found for index.x-jsrender”), it seems that this is a common issue and not related to Syncfusion. Kindly refer to the below blog which helps you to resolve the reported behavior,

https://github.com/parcel-bundler/parcel/issues/6791


By default in the EJ2 Syncfusion components, we have used javascript’s x-template type of script. The EJ2 Syncfusion component does not support x-jsrender type of script.

Find the below documentation and sample for more information.


Doc: https://ej2.syncfusion.com/javascript/documentation/grid/columns/column-template/

Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/column-template.html


Still, if you face the same issue, kindly share the issue reproducible to validate further.


Regards,

Rajapandiyan S



OR Orlando replied to Rajapandiyan Settu July 26, 2022 10:25 AM UTC

Many thanks Rajapandiyan for getting back to me,


I was having the same issue with both x-template and x-jsrender. and it looks like, after further investigation, that Parcel.js which I use to bundle my code doe not support the script type="text/x-template" at all.

Do you have any recommendations on replacement for Parcel that work with Syncfusion?

Or are there ways of implementing the templates without using x-template, I notice in some other modules that it is not used for similar results, like the list view for example, or is this something for future versions?

I am not sure what you mean by "The EJ2 Syncfusion component does not support x-jsrender type of script." as this is something I lifted from the overview demo.

https://ej2.syncfusion.com/javascript/demos/?_ga=2.216847766.1638783931.1658822440-1038998486.1658216462#/bootstrap5/grid/grid-overview.html


Thanks again

-- Orlando 




RS Rajapandiyan Settu Syncfusion Team July 27, 2022 01:36 PM UTC

Hi Orlando,


Sorry for the inconvenience caused.


The reported problem is a common issue and not related to Syncfusion. Kindly refer to public blogs to use text/x-template & text/x-jsrender type of script with parcel.JS.


https://parceljs.org/languages/html/#dependencies

https://parceljs.org/getting-started/webapp/

https://www.youtube.com/watch?v=R02ehdTzi3I


Query: are there ways of implementing the templates without using x-template


In EJ2 Grid, the column.template property accepts either template string or HTML element ID. So, you can achieve your requirement by defining the template element in string format,


Template: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#template



    {

      headerText: 'Employee Image',

      textAlign: 'Center',

      template:

        '<div class="image"><img src="//ej2.syncfusion.com/javascript/demos/src/grid/images/${EmployeeID}.png" alt="${EmployeeID}" /></div>',

      width: 150,

    }

 


Sample: https://stackblitz.com/edit/kqwega?file=index.js


Regards,

Rajapandiyan S



OR Orlando July 27, 2022 02:15 PM UTC

That is great, thanks Rajapandiyan for the info on the template options and I will give this a try and see if it solves my problem.


Many thanks


-- Orlando 



RS Rajapandiyan Settu Syncfusion Team July 28, 2022 04:28 AM UTC

Hi Orlando,


Thanks for your update. Please get back to us if you need further assistance.


Regards,

Rajapandiyan S


Loader.
Up arrow icon