How can the syncfusion widgets be used with requirejs

[Amarjot]

how do we configure Syncfusion to load it through Requirejs?

[Harikrishnan P]

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 5^th May). Please be patience until we get back to you.

 

Please let us know if you have further queries.

Regards,

HariKrishnan.

[Harikrishnan P]

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]

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]

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]

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]

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 (20^th May). Please be patience until we get back to you.

Please let us know if you have further queries.

Regards,

HariKrishnan.

[Harikrishnan P]

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.