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 :
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 :
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
Hello @antoine_debout
Please refer the below link for your requirements:
https://magento.stackexchange.com/a/85920/24801
Thanks.
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.
Hello @antoine_debout again,
Please use the below code:
var config = { map: { "*": { "script1": "js/script1", "script2": "js/script2" } } };
Thanks.