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

[Gomtesh]

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

follow http://help.syncfusion.com/js/api/ejgrid.

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]

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]

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]

I have corrected sample as follow::

http://jsplayground.syncfusion.com/1d2v0wvm

Sample

[Gomtesh]

I have corrected sample as follow::

http://jsplayground.syncfusion.com/1d2v0wvm

Sample

Final sample is:

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

sample

[Seeni Sakthi Kumar Seeni Raj]

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]

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]

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]

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 

http://www.syncfusion.com/downloads/support/forum/121540/ze/gridsample401628557 

Please refer to the documentation link 

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

 

Please let us know if u need any further assistance. 

Regards, 

Balasubramanian Masilamani 

[Vinay Kumar]

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]

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. 

Link: https://help.syncfusion.com/aspnetmvc/grid/grid-dependencies 

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/121540/ze/SyncfusionMvcApplication11721530842.zip 

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

Regards, 

Sathyanarayanamoorthy 

[Vinay Kumar]

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]

  

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. 

https://help.syncfusion.com/js/grid/getting-started 

 

Please let us know if you need any further assistance. 

 

Regards, 

Balasubramanian Masilamani 

[Vinay Kumar]

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]

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 

 

CDN link of “ej.draggable.min.js” - http://cdn.syncfusion.com/15.4.0.17/js/common/ej.draggable.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. 

https://help.syncfusion.com/js/grid/getting-started 

 

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