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.

How can the syncfusion widgets be used with requirejs

Thread ID:

Created:

Updated:

Platform:

Replies:

116223 Apr 29,2014 05:40 AM May 21,2014 09:20 AM JavaScript 7
loading
Tags: General
Amarjot
Asked On April 29, 2014 05:40 AM

how do we configure Syncfusion to load it through Requirejs?

Harikrishnan P [Syncfusion]
Replied On May 1, 2014 10:07 AM

Hi Amarjot,

Sorry for the inconvenience caused. We are validating your requirement in our side. We will update you regarding your query in two business days (on 5th May). Please be patience until we get back to you.

 

Please let us know if you have further queries.

Regards,

HariKrishnan.


Harikrishnan P [Syncfusion]
Replied On May 5, 2014 12:19 PM

Hi Amarjot,

Thanks for your patience. Syncfusion JS Framework is not configured to load the dependencies for individual files, so we have to load “ej.web.all.min” as a dependency like JQuery. To configure Syncfusion JS files to be loaded through RequireJS, use the “shim” system. “shim” system is used to load third party libraries that aren’t defined as Require modules, like for example jQuery.  Please refer the below code snippet,

 

        require.config({

            paths: {

               //Specify the path of JQuery and 'ej'

                'jQuery': 'scripts/jquery-1.10.2.min',

                'ej': 'scripts/ej.web.all.min',

                //'app':'path/to/your/files'

            },

            shim: {

                'jQuery': {

                    exports: '$'

                },

                'ej':{

            // Jquery is specified as dependency for 'ej'

                    deps:["jQuery"]

                    }

            }

        });

 

 

In require.config method two objects are used. “paths” object specifies the path from where the script files are referenced. Path for ‘JQuery’ is mapped to ‘JQuery’. For Syncfusion components, it is mentioned as ‘ej’. The path for ej.web.all.min file is mapped to ‘ej’. If you are using your own main.js file to start the application specify the path of ‘ej.web.all.min’ file relative to your application main.js file. Next, in the “shim” object specify JQuery as needed dependency for ‘ej’. This specifies that, JQuery has to be loaded before loading “ej.web.all.min” file.

Then specify ‘ej’ as one of the required dependencies of your function, please specify like below

 

//specify 'ej' as required module for the functions that uses Syncfusion JS components

        require(['ej'], function () {

            console.log("version:", $.fn.jquery);

            $("#treeView").ejTreeView();

        });

 

 

We have attached a simple sample to show how to load Sycfusion JS using RequireJS. Please find the sample location below,

 

Sample Location: RequireJS Sample

 

Please let us know if you have further queries.

Regards,

HariKrishnan.


Amarjot
Replied On May 7, 2014 05:42 AM

Hi Harikrishnan,

Thanks for the sample. I have a query - what about the other dependencies such as jquery.easing, jsrender and jquery.globalize, how are they being loaded or are they not always required?
When I try to use it by just specifying jquery as the dependecy it complains for globalize not defined.

Harikrishnan P [Syncfusion]
Replied On May 8, 2014 12:43 PM

Hi Amarjot,

Thanks for the update.

Query: what about the other dependencies such as jquery.easing, jsrender and jquery.globalize, how are they being loaded or are they not always required?

Yes, all the above specified dependencies are not always required. Since those dependency files varies upon the JS components which are used in our sample. For Datepicker component, ‘ej’ requires the following dependency files

  • Jquery
  • Jquery easing
  • Jquery globalize

Whereas in Grid component we need “jsrender” as additioal dependency along with above files. So we can specify the dependencies for “ej” based on the controls used in our sample. To render DatePicker control please configure RequireJS as shown in the below code snippet.

 

        require.config({

            paths: {

                //Specify the path of JQuery,and 'ej'

                'jQuery': 'scripts/jquery-1.10.2.min',

                'jQuery-easing': 'scripts/jquery.easing.1.3',

                'jQuery-globalize':'scripts/jquery.globalize',

                'ej': 'scripts/ej.web.all.min',

                //'app':'path/to/your/files'

            },

            shim: {

                'jQuery': {

                    exports: '$'

                },

// Jquery specified as dependency for ‘jquery-easing’ and ‘jquery-globalize’

 

                'jQuery-easing':{

                    deps:["jQuery"]

                },

                'jQuery-globalize':{

                    deps: ["jQuery"]

                },

                'ej': {

                    // Jquery Jquery-easing, Jquery-gloablize is specified as dependency for 'ej'

                    deps:["jQuery","jQuery-easing","jQuery-globalize"]

                    }

            }

        });

 

Here we have specified” jQuery”, “jquery.easing” and “jquery.globalize” files as required dependencies for “ej”. Please refer the below code snippet to render DatePicker control.

        require(['ej'], function () {

            console.log("version:", $.fn.jquery);

            $("#datepick").ejDatePicker();

        });

 

Similarly we can configure the dependencies of ‘ej’ based on the controls needed for the module.

 

Please let us know if you have further queries.

Regards,

HariKrishnan.


Amarjot
Replied On May 15, 2014 05:44 AM

Hi,

I am  trying to use knockout bindings with menu widget in the same framework using requirejs.
I have put in the html required for the control as follows

<div id="theControls" style="width:100px;height:50px;" >
<ul id="menuko" data-bind="ejMenu :{fields:{dataSource:controls,id:'id',text:'text',parentId:'parentId',spriteCssClass:'sprite'}</ul>
</div>

and loaded the script files as follows
'ej' : {
deps: ['jquery','jqeasing','jqglobalize','jsrender']
},
'ejko' : {
deps: ['ej']
}

I get the following error :
TypeError: r is undefined
http://localhost:8080/Visilean/scripts/external/syncfusion/js/common/ej.widget.ko.min.js
Line 10

How do we use syncfusion widgets with knockout databinding in a requirejs framework?

Harikrishnan P [Syncfusion]
Replied On May 16, 2014 02:04 PM

Hi Amarjot,

We are currently analyzing the specified issue (r is undefined while using knockout binding) in our side. We will let you know the status of this query in two business days (20th May). Please be patience until we get back to you.

Please let us know if you have further queries.

Regards,

HariKrishnan.


Harikrishnan P [Syncfusion]
Replied On May 21, 2014 09:20 AM

Hi Amarjot,

Query: How do we use syncfusion widgets with knockout databinding in a requirejs framework?

We suspect that the specified error ‘r is undefined’ might have occurred if ‘knockout JS’ is not registered properly.

Please refer below to register the ‘ej.widgets.ko.min.js’ file in shim configuration.

            shim: {

                'jQuery': {

                    exports: '$'

                },

                'jQuery-easing': {

                    deps: ["jQuery"]

                },

                'ej': {

                    // Jquery is specified as dependency for 'ej'

                    deps: ["jQuery", "jQuery-easing"]

                },

//Specify JQuery, KO and ‘ej’ as dependency for ej.widgets.ko

            

                'ejKO': {

                    deps: ["jQuery","KO","ej"]

                }

            }

 

Register ‘KnockOut JS’ as required script file before registering “ej” for your module, please refer the code below,

require(['jQuery','KO'], function ($, ko) {

 

// ko is assigned to window.ko (in order to avoid the ‘ko’ is undefined error)

            window.ko = ko;

            require(['jQuery','jQuery-easing', 'ej', 'ejKO'], function ($,ko) {

                var menu = [

        { id: 1, text: "Leafy and Salad", parentId: null },

        { id: 2, text: "Beans", parentId: null },

        { id: 3, text: "Bulb and Stem", parentId: null },

        { id: 4, text: "Root and Tuberous", parentId: null },

        //first level child

        { id: 11, parentId: 1, text: "Cabbage" },

        { id: 12, parentId: 1, text: "Pea" },

        { id: 13, parentId: 1, text: "Spinach" },

        { id: 16, parentId: 2, text: "Chickpea" },

        { id: 17, parentId: 2, text: "Green bean" },

        { id: 20, parentId: 3, text: "Garlic" },

        { id: 21, parentId: 3, text: "Garlic Chives" },

        { id: 22, parentId: 3, text: "Onion" },

        { id: 26, parentId: 3, text: "Shallot" },

        { id: 27, parentId: 4, text: "Beetroot" },

        { id: 28, parentId: 4, text: "Carrot" },

        { id: 29, parentId: 4, text: "Ginger" },

                ];

                console.log("version:", $.fn.jquery);

                window.viewModel = {

                    dataList: window.ko.observableArray(menu)

                };

                window.ko.applyBindings(viewModel);

 

            });    

 

For your convenience we have attached a simple sample to showcase how to use JS components with Knockout databinding in requires framework. Please find the sample location below,

Sample Location: RequireJS sample

Please let us know if you have further queries.

Regards,

HariKrishnan.


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.

;