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.

Load Seprate js for grid instead of ej.web.all.min.js

Thread ID:

Created:

Updated:

Platform:

Replies:

121540 Dec 28,2015 05:13 AM Feb 14,2018 06:37 AM JavaScript 14
loading
Tags: ejGrid
Gomtesh
Asked On December 28, 2015 05:13 AM

When ej.web.all.min.js takes too much time then decide to load seprate js files only required for grid and

But when load grid with checkboxes and dropdownlist it gives  following errors.

Uncaught TypeError: Cannot read property 'match' of undefinedt.
widget.addInitTemplate @ ej.grid.min.js:10
t.widget._initGridRender @ ej.grid.min.js:10
(anonymous function) @ ej.grid.min.js:10
j @ jquery-2.1.1.min.js:2
k.fireWith @ jquery-2.1.1.min.js:
2(anonymous function) @ ej.data.min.js:10

and

Uncaught TypeError: Cannot read property 'match' of 
undefinedt.widget.addInitTemplate @ ej.grid.min.js:10
t.widget._initGridRender @ ej.grid.min.js:
10(anonymous function)@ ej.grid.min.js:10
j @ jquery-2.1.1.min.js:2
k.fireWith @ jquery-2.1.1.min.js:2
(anonymous function) @ ej.data.min.js:10

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 29, 2015 12:46 AM

Hi Gomtesh,

We suspect that you are using a column template in ejGrid. If the field / headertext of the templatecolumn is undefined, the reported issue will occur and it has been fixed in our latest version 13.3.0.18.

We suggest you to upgrade to our latest version 13.3.0.18 using below steps.

1)                  Download and install the Essential Studio v13.3.0.18 from the below link. 

http://www.syncfusion.com/forums/121314/essential-studio-2015-volume-3-service-pack-2-release-v13-3-0-18-available-for-download

2)                   Replace the Syncfusion scripts, and CSS in your project from the following location.

                                Scripts and Css: C:\Program Files (x86)\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets

Here XX.X.X.XX denotes the product version(13.3.0.18).

After upgrading, please ensure to clear browser cache to avoid accidental reference of the old and scripts/CSS.

We have prepared a sample with column template without field/headertext (for a template column) that can be referred in the following jsPlayground.

http://jsplayground.syncfusion.com/4w4stq4b

If you are unable to upgrade to our latest version, define the headertext of the template column as an empty string. Please refer to the following code example.

    <script type="text/x-jsrender" id="checkboxTemplateDemo">

        <input type="checkbox" class="rowCheckboxDemo" />

    </script>

    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                dataSource: ej.DataManager(window.employeeView),

                allowPaging: true,

                templateRefresh: "refresh",

                columns: [

                        { headerText: ""/*use an empty string for headertext*/, template: true, templateID: "#checkboxTemplateDemo" },

                          . . . . . .

                        { field: "Country", headerText: "Country" }


                ]

            });

        });

        function refresh(args) {

            $(args.cell).find("input").ejCheckBox({ checked: true });

        }
    </script>


We have prepared sample with this solution that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/uuzps4fz

Regards,
Seeni Sakthi Kumar S.


Gomtesh
Replied On December 29, 2015 03:22 AM

When used grid for inline editing with dropdownlist and allowEditing false for dropdownlist to disable dropdown while editing but enable dropdown while adding record
but dropdownlist is still disable while adding new record

Sample for this available on : http://jsplayground.syncfusion.com/1d2v0wvm

Gomtesh
Replied On December 29, 2015 03:50 AM

I have corrected sample as follow::
http://jsplayground.syncfusion.com/1d2v0wvm

Gomtesh
Replied On December 29, 2015 03:51 AM

I have corrected sample as follow::
http://jsplayground.syncfusion.com/1d2v0wvm

Final sample is:

http://jsplayground.syncfusion.com/2xdzmb4a

sample

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 30, 2015 01:18 AM

Hi Gomtesh,

Your requirement is disable the columns while editing and enable the same column while adding a record, which holds the allowEditing as false. But by default the column disabled with allowEditing must be disabled while editing/adding a record.

However, we will provide you a solution to overcome this behavior. While adding a new record, in the actionComplete event re-enable the disabled column. Please refer to the below code example.

<script type="text/x-jsrender" id="checkboxTemplateDemo">

        <input type="checkbox" class="rowCheckboxDemo" />

    </script>

    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {

        $("#Grid").ejGrid({

            // the datasource "window.employeeView" is referred from jsondata.min.js

            dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(8)),

            allowPaging: true,

            templateRefresh: "refresh",

            pageSettings: { pageSize: 4 },

            actionComplete: 'complete',

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] },

            columns: [

                    { headerText: ""/*use an empty string for headertext*/, template: true, templateID: "#checkboxTemplateDemo", width: 90 },

                    { field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },

                    . . . . .

                    { field: "EmployeeID", allowEditing: false, headerText: "Employee ID", editType: ej.Grid.EditingType.Dropdown }


            ]

        });

        });

        function refresh(args) {

            if ($(args.cell).find(".e-chkbox-wrap").length == 0)

                $(args.cell).find("input").ejCheckBox({ checked: true });

        }

        function complete(args) {

            if (args.requestType == "add") //requestType must be “add”

                $("#GridEmployeeID").ejDropDownList({ enabled: true })//Selector must be Grid ID and Field name "Grid" + "EmployeeID"

        }
    </script>


We have prepared a sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/b0akqg3h

Refer to the Help Document for events of Grid and other APIs.

http://help.syncfusion.com/js/api/ejgrid#events

http://help.syncfusion.com/js/api/ejgrid#members

Regards,
Seeni Sakthi Kumar S.

Vinay Kumar
Replied On February 6, 2018 09:04 AM

Hi Sakthi Kumar,


I'm very new to SyncFusion concept. In my new project, we are using SyncFusion controls and for every control, it's invoking ej.web.all.min.js file (even I'm not understanding how it's invoking). As it is taking too much time for loading, I would like to load separate js files for those controls (like ejGrid, ejDropDownList, ejPager and etc..). So could you please let me know the process for how to proceed on this asap.Thank you!

Vinay Kumar
Replied On February 6, 2018 09:07 AM

Hi Gomtesh,


I'm very new to SyncFusion concept. In my new project, we are using SyncFusion controls and for every control, it's invokingej.web.all.min.js file (even I'm not understanding how it's invoking). As it is taking too much time for loading, I would like to load separate js files for those controls (like ejGrid, ejDropDownList, ejPager and etc..). So could you please let me know the process for how to proceed on this asap.

Also, I'm sharing my contact number(9492983960) here. If possible please text me and I'll contact you. (some urgency)Thank you!

Balasubramanian Masilamani [Syncfusion]
Replied On February 7, 2018 01:42 AM

Hi Vinay Kumar, 

Thanks for contacting Syncfusion support. 

We have checked the query and your requirement is to load separate JS files for those controls (ejGrid, ejDropDownList, ejPager etc.) instead of using “ej.web.all.min.js”. This can be processed by referring required JS files for those controls in your script section. 

Please refer the code sample 
<head>……………………………….. 
    <script src="scripts/ej.core.js"></script> 
    <script src="scripts/ej.data.js"></script> 
    <script src="scripts/ej.globalize.min.js"></script> 
    <script src="scripts/ej.grid.min.js"></script> 
    <script src="scripts/ej.pager.min.js"></script> 
    <script src="scripts/ej.scroller.min.js"></script> 
    <script src="scripts/ej.waitingpopup.min.js"></script> 
    <script src="scripts/ej.dropdownlist.min.js"></script> 
    <script src="scripts/ej.dialog.min.js"></script> 
    <script src="scripts/ej.button.min.js"></script> 
    <script src="scripts/ej.autocomplete.min.js"></script> 
    <script src="scripts/ej.checkbox.min.js"></script> 
    <script src="scripts/ej.draggable.min.js"></script> 
    <script src="scripts/ej.datepicker.min.js"></script> 
    <script src="scripts/ej.datetimepicker.min.js"></script> 
    <script src="scripts/ej.editor.min.js"></script> 
    <script src="scripts/ej.toolbar.min.js"></script> 
       <script src="scripts/ej.tooltip.min.js"></script> 
    <script src="scripts/ej.menu.min.js"></script> 
    <script src="scripts/ej.excelfilter.min.js"></script> 
    <script src="scripts/ej.radiobutton.min.js"></script> 
    <script src="scripts/ej.togglebutton.min.js"></script> 
</head> 

We have prepared a sample for better understanding 

Please refer to the documentation link 
 

Please let us know if u need any further assistance. 

Regards, 
Balasubramanian Masilamani 




Vinay Kumar
Replied On February 8, 2018 09:25 AM

Hi Balasubramanian Masilamani,

Thanks for giving the reply. I was tried to load the page by mentioning separate script files(commented ej.web.all.min.js) in _Layout page.
But the grid in not at all loading and nothing visible to the user. It keeps on loading. So please find the below attached screenshots and kindly let me know the further steps. Thank you!

Attachment: SyncFusionscreenshots_9c1341fa.7z

Sathyanarayanamoorthy Eswararao [Syncfusion]
Replied On February 9, 2018 11:58 AM

Hi Vinay, 

We have analyzed your query and found that the mentioned issue occurs due to not referring the dependent script files that are needed for the grid component. 

Please refer the below link for the details of Grid dependent script files that are needed for rendering the grid component. 


Also we found that in your Layout.html page you have referred the css files also individually for the components. We suggest you to refer ej.web.all.css since the css files are common for all the components.  

We have prepared a sample by referring individual script files of grid for your reference which can be downloaded from below location. 


If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 



Vinay Kumar
Replied On February 12, 2018 07:57 AM

Hi Sathyanarayanamoorthy,

Still I couldn't able to load the Grid. It's showing few errors in Console (Uncaught TypeError) and I've attached those screenshots below.
Please check it once and kindly let me know. Thank you!

Regards,
Vinay

Attachment: Grid_Errors_38fee12e.7z

Balasubramanian Masilamani [Syncfusion]
Replied On February 13, 2018 07:31 AM

  
Hi Vinay Kumar, 
 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query and we suspect that you are not able to load the grid due to script errors. We found that the mentioned issue occurs due to not referring the dependent script files that are needed for the grid component. From the screenshot you sent, we suspect the reason for the occurrence of issue as follows 
  1. “ej.datetimepicker.min.js” file has been referred twice.
  2. “ej.excelfilter.min.js” file is not referred.
  3. “ej.culture.min.js” file is not referred.
  4. Reference of Grid dependent script files should be of the mentioned order.
 
Please refer the code sample 
<script src="scripts/ej.core.js"></script> 
<script src="scripts/ej.data.js"></script> 
<script src="scripts/ej.touch.min.js"></script> 
<script src="scripts/ej.globalize.min.js"></script> 
    <script src="scripts/ej.grid.min.js"></script> 
    <script src="scripts/ej.pager.min.js"></script> 
    <script src="scripts/ej.scroller.min.js"></script> 
    <script src="scripts/ej.waitingpopup.min.js"></script> 
    <script src="scripts/ej.dropdownlist.min.js"></script> 
    <script src="scripts/ej.autocomplete.min.js"></script> 
    <script src="scripts/ej.checkbox.min.js"></script> 
    <script src="scripts/ej.draggable.min.js"></script> 
    <script src="scripts/ej.datepicker.min.js"></script> 
    <script src="scripts/ej.datetimepicker.min.js"></script> 
              <script src="scripts/ej.timepicker.min.js"></script> 
    <script src="scripts/ej.editor.min.js"></script> 
    <script src="scripts/ej.excelfilter.min.js"></script> 
     

 
 
Please refer the documentation link for details of referring Grid dependent script files with their order. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Balasubramanian Masilamani 


Vinay Kumar
Replied On February 13, 2018 10:16 AM

Hi Balasubramanian,

I couldn't able to find the below mentioned files. 

ej.culture.min.js
ej.draggable.min.js
ej.gridresize.min.js 

So could you please provide these files and also kindly let me know the exact order of all the files to mention in Layout page. Thank you!

Regards,
Vinay

Balasubramanian Masilamani [Syncfusion]
Replied On February 14, 2018 06:37 AM


Hi Vinay, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query and we suggest you the CDN links of the script files required for you to load the grid. 
CDN Link: 
CDN link of “ej.culture.min.js"     -  https://cdn.syncfusion.com/js/assets/i18n/ej.culture.de-DE.min.js 
 
 
 
If you are using the script file instead of CDN link these script files will be available at the installed build location. 
 
Build Location: 
 
Build location of “ej.culture.min.js”- 
            C:\xxxxxx\Syncfusion\Essential Studio\xxxxx\JavaScript\assets\scripts\i18n 
 
Build location of “ej.draggable.min.js”- 
            C:\xxxxx\Syncfusion\Essential Studio\xxxxx\JavaScript\assets\scripts\common 
 
 
The exact order of all the script files to be mentioned in layout page can be identified from the code sample given below. 
 
Please refer the code sample 
 
<script src="scripts/ej.core.js"></script> 
<script src="scripts/ej.data.js"></script> 
<script src="scripts/ej.touch.min.js"></script> 
<script src="scripts/ej.globalize.min.js"></script> 
    <script src="scripts/ej.grid.min.js"></script> 
    <script src="scripts/ej.pager.min.js"></script> 
    <script src="scripts/ej.scroller.min.js"></script> 
    <script src="scripts/ej.waitingpopup.min.js"></script> 
    <script src="scripts/ej.dropdownlist.min.js"></script> 
    <script src="scripts/ej.autocomplete.min.js"></script> 
    <script src="scripts/ej.checkbox.min.js"></script> 
    <script src="scripts/ej.draggable.min.js"></script> 
    <script src="scripts/ej.datepicker.min.js"></script> 
    <script src="scripts/ej.datetimepicker.min.js"></script> 
<script src="scripts/ej.timepicker.min.js"></script> 
    <script src="scripts/ej.editor.min.js"></script> 
    <script src="scripts/ej.excelfilter.min.js"></script> 
 
 
 
Please refer the documentation link for details of referring Grid dependent script files with their order. 
 
The above code sample provides the exact code sample in which the script files are to be referred. The order given in the documentation link also provides the exact order at which the script files are to be mentioned in layout page to load a grid. 
 
Please let us know if you need further assistance. 
 
Regards, 
Balasubramanian Masilamani 
 
 





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.

;