We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Starting in 2019, the Reporting control is no longer included in Essential Studio. If you're experiencing issues with the Syncfusion Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion and appreciate your understanding.

Is it possible to use ej widgets with webpack

Do you have a sample of using syncfusion with webpack module loader 

I have a grid working but when I enable edit functionality I get an error when creating the grid

"Uncaught TypeError: n.templates is not a function"

ar

t.gridFeatures.edit.addEditingTemplate @ ej.web.all.min.js:10

I suspect this is due to webpack not correctly loading dependencies eg jsrender? - when I check in the console jsrender is loaded together with jquery

I'm able to bind the grid to an odata serivce but only with edit capability switched off

Could you give me any ideas on what the issue might be?

7 Replies

RU Ragavee U S Syncfusion Team July 20, 2015 12:23 PM UTC

Hi Richard,

We have analyzed the reported query and we suspect that the cause of the issue may be referring different version of jQuery script file in the same sample.

So please ensure that only one jquery file has been referred in your sample.

If you still face any difficulty, please share the below details with us which will be very helpful for us to assist you accordingly.

1.       If there are any special characters in your dataSource field, then we may get that error on editing. So please the data structure of the dataSource that you have bound to the grid.
2.       Please share the order of the script files that you have referred in your project.
3.       Please share your grid rendering code with us.
4.       Also, please share more and clear details on the files you have loaded using the webpack module loader.

Please get back to us if you need any further assistance.

Regards
Ragavee U S


RH Richard Harding July 21, 2015 07:44 AM UTC

Thanks for the response - I suspect this was an issue with loading some of the dependent jQuery plugins - most likely JsRender - I was able to compare with the samples which worked correctly

I then changed the configuration of the webpack bundling to load the pre-req JQuery plugins via the "script-loader" mechanism which worked


RU Ragavee U S Syncfusion Team July 22, 2015 07:05 AM UTC

Hi Richard,

Thanks for the update. 
 
We are happy that your issue is resolved.
 
If you have any queries in the future, please get back to us. We will be happy to assist you.

Regards
Ragavee U S


KR Kevin robinson July 15, 2016 09:13 AM UTC

Do you have an example of this?


RH Richard Harding July 15, 2016 10:02 AM UTC

Kevin - an example of what  - loading syncfusion assets via script loader?

Its been a while since I looked at this so not sure what you need?


KR Kevin robinson July 15, 2016 12:25 PM UTC

Yes I am trying to use webpack.   webpack runs (and produces the bundle)  OK but I am getting an error.
 
Here is a link to a sample (supplied by SyncFusion) which I am modifying --  Project


require("jquery.easing");
require("bootstrap-webpack");

require("./SyncFusion/Scripts/jquery-1.10.2.min.js");
require("./SyncFusion/Scripts/jquery.globalize.min.js");
require("./SyncFusion/Scripts/angular.min.js");

require("./SyncFusion/Scripts/ej.web.all.min.js");
require("./SyncFusion/Scripts/ej.widget.all.min.js");
require("./SyncFusion/Scripts/ej.widget.angular.min.js");
require("./SyncFusion/Scripts/ej.reportviewer.js");
require("./SyncFusion/themes/bootstrap.min.css");

require("./SyncFusion/themes/default-theme/ej.widgets.all.css");
require("./SyncFusion/themes/default.css");
require("./SyncFusion/themes/default-responsive.css");

require("./src/app.js");
require("./src/components/SfReportViewer/sfReportViewer.js");



Webpack.config.js
'use strict';
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var webpack = require("webpack");

function absPath(_path) {
    return path.join(__dirname, _path);
}
var config = {
    context: __dirname,
        entry: "./entry.js",
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: 'http://localhost:3001/app/dist/'
    },
    module: {
        loaders: [
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)(\?v=[0-9].[0-9].[0-9])?$/,
                loader: 'file?name=/fonts/[sha512:hash:base64:7].[ext]',
                exclude: /node_modules\/(?!font-awesome)/
            },
            {
                test: /bootstrap\/js\//,
                loader: 'imports?jQuery=jquery'
            },
            {
                test: /\.css$/,
                loader: 'file?/[sha512:hash:base64:7].[ext]',

            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "jQuery.$.fn" : "jquery",
            "window.jQuery": "jquery",
            "root.jQuery": "jquery",
        })
    ]
};

// window.ej = window.Syncfusion = window.Syncfusion || {};
module.exports = config;


Error
bundle.js:14669 TypeError: Cannot read property 'id' of undefined
    at Object._renderPopupPanelWrapper (http://localhost:60360/app/dist/bundle.js:14807:684856)
    at Object._render (http://localhost:60360/app/dist/bundle.js:14807:680184)
    at Object._init (http://localhost:60360/app/dist/bundle.js:14807:673623)
    at Object.<anonymous> (http://localhost:60360/app/dist/bundle.js:14807:14640)
    at jQuery.$.fn.(anonymous function) [as ejDropDownList] (http://localhost:60360/app/dist/bundle.js:15875:26)
    at Object._renderToolBar (http://localhost:60360/app/dist/bundle.js:14807:2715421)
    at Object._renderViewer (http://localhost:60360/app/dist/bundle.js:14807:2733021)
    at Object._init (http://localhost:60360/app/dist/bundle.js:14807:2710213)
    at Object.<anonymous> (http://localhost:60360/app/dist/bundle.js:14807:14640)
    at jQuery.$.fn.(anonymous function) [as ejReportViewer] (http://localhost:60360/app/dist/bundle.js:15875:26) <div id="container" ej-reportviewer="ej-reportviewer" e-reportserviceurl="samplevalue" e-processingmode="mode" e-reportpath="path" style="height:680px" class="e-reportviewer e-js" tabindex="">


YD Yuvaraj Devarajan Syncfusion Team July 18, 2016 07:24 AM UTC

Hi Kevin, 
 
The shared sample rar file was corrupted and we are getting the below error while extracting the rar file. So please share this file again to validate the reported issue. 
 
Error Detail: 
 
Regards, 
Yuvaraj D. 


Loader.
Live Chat Icon For mobile
Up arrow icon