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.
Unfortunately, activation email could not send to your email. Please try again.

Is it possible to use ej widgets with webpack

Thread ID:

Created:

Updated:

Platform:

Replies:

119657 Jul 18,2015 04:55 PM Jul 18,2016 03:24 AM JavaScript 7
loading
Tags: ejReportViewer
Richard Harding
Asked On July 18, 2015 04:55 PM

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?

Ragavee U S [Syncfusion]
Replied On July 20, 2015 08:23 AM

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

Richard Harding
Replied On July 21, 2015 03:44 AM

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

Ragavee U S [Syncfusion]
Replied On July 22, 2015 03:05 AM

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

Kevin robinson
Replied On July 15, 2016 05:13 AM

Do you have an example of this?

Richard Harding
Replied On July 15, 2016 06:02 AM

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?

Kevin robinson
Replied On July 15, 2016 08:25 AM

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="">

Yuvaraj Devarajan [Syncfusion]
Replied On July 18, 2016 03:24 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;