cancel
Showing results for 
Search instead for 
Did you mean: 

Include "jsGrid", jquery plugin in magento 2.3.1

Include "jsGrid", jquery plugin in magento 2.3.1

Hi,

I would like to use jsGrid in the backend (in Magento 2.3.1) by using a CDN link, but, for some reason, the script appears in the F12 console,
but it is load before jquery. So it can't works.

I try to put the link in N_Module/view/adminhtml/layout/layout_name.xml in the <head> tag :

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js" src_type="url"></script>

When i try it, i've got 2 errors in the console :

Capture.PNG

 

I also try by using requirejs and shim (neither kendo nor jsgrid works), i put librairies.js
in N_Module/view/adminhtml/web/js and i've got this requirejs-config :

var config = {
	paths: {
        'kendo': 'Nxo_Approval/js/kendo.all.min',
        'jsgrid' : 'Nxo_Approval/js/jsgrid.min.js'
    },
    map: {
        '*': {
            jquery_cookie:           'Nxo_Approval/js/jquery_cookie',
            kendo:           'Nxo_Approval/js/kendo.all.min',
            jsgrid:           'Nxo_Approval/js/jsgrid.min',
        }
    },
    shim: {
        'kendo': {
            deps: ['jquery']
        },
        'jsgrid': {
            deps: ['jquery']
        },
   }
};

When i try it i've got this error :

Capture.PNG

 

For both solutions, this is the code in the N_Module/view/adminhtml/templates/index.phtml to call jsGrid :

<script>
[...]
require(['jquery'], function($){
    $("#grid").jsGrid({
        width: "100%",
        height: "400px",
 
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
 
        data: clients,
 
        fields: [
            { name: "Name", type: "text", width: 150, validate: "required" },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
});
[...]
</script>

Thanks by advance,
Antoine

4 REPLIES 4

Re: Include "jsGrid", jquery plugin in magento 2.3.1

Hello @antoine_debout 

 

Please refer the below link for your requirements:

 

https://magento.stackexchange.com/a/85920/24801

 

Thanks.

Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.

Re: Include "jsGrid", jquery plugin in magento 2.3.1

Thanks for the reply @Sanjay Jethva 

 

I've tried the solution in this topic, and it works for jsGrid. But unfortunately it doesn't work with kendo, another library that i need whereas i used the same solution than jsgrid.

 

Re: Include "jsGrid", jquery plugin in magento 2.3.1

Hello @antoine_debout  again,

 

Please use the below code:

var config = {
    map: {
        "*": {
            "script1": "js/script1",
            "script2": "js/script2"
        }
    }
};

Thanks.

Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.

Re: Include "jsGrid", jquery plugin in magento 2.3.1

Thanks @Sanjay Jethva 

 

It doesn't work. Do you have any other idea ?