Multi JQXGrid In a Page

[robynho85Participant]

Hi to all,

I need to implement same JQXGrid in a page. For some reason i must to use a bootstap tab navigation and i have a JQXGrid for each tab.

I can see the first Grid correctly but the other give me this error “Uncaught TypeError: Cannot read property ‘length’ of undefined”, i see data but i have loading data loop forever.

This is my code

var sourceCluster = {
datatype: “json”,
datafields: [
{ name: ‘Id’ }, // Chiave primaria, int, idenity, not null
{ name: ‘Valore’ },
{ name: ‘Abilitata’ }
],
id: ‘Id’,
url: ‘/CRMScelte/GetCluster’,
sortcolumn: ‘Valore’,
sortdirection: ‘asc’
};
var sourceEsit = {
datatype: “json”,
datafields: [
{ name: ‘Id’ }, // Chiave primaria, int, idenity, not null
{ name: ‘Valore’ },
{ name: ‘Abilitata’ }
],
id: ‘Id’,
url: ‘/CRMScelte/GetEsit’,
sortcolumn: ‘Valore’,
sortdirection: ‘asc’
};
var sourceGest = {
datatype: “json”,
datafields: [
{ name: ‘Id’ }, // Chiave primaria, int, idenity, not null
{ name: ‘Valore’ },
{ name: ‘Abilitata’ }
],
id: ‘Id’,
url: ‘/CRMScelte/GetGest’,
sortcolumn: ‘Valore’,
sortdirection: ‘asc’
};
$(“#jqxCluster”).jqxGrid(
{
width: ‘97%’,
height: ‘500px’,
source: sourceCluster,
theme: ‘light’,
columnsresize: true,
localization: getLocalization(‘it’),
editable: false,
sortable: true,
altrows: true,
groupable: false,
showstatusbar: false,
showaggregates: false,
showtoolbar: false,
columns: [
{ text: ‘Id’, datafield: ‘Id’, width: ‘0%’, hidden: true },
{ text: ‘Valore’, datafield: ‘Valore’, width: ‘80%’ },
{ text: ‘Abilitata’, datafield: ‘Abilitata’, width: ‘20%’, columntype: ‘checkbox’, filtertype: ‘bool’ }
]
});
$(“#jqxEsit”).jqxGrid(
{
width: ‘97%’,
height: ‘500px’,
source: sourceEsit,
theme: ‘light’,
columnsresize: true,
localization: getLocalization(‘it’),
editable: false,
sortable: true,
altrows: true,
groupable: false,
showstatusbar: false,
showaggregates: false,
showtoolbar: false,
columns: [
{ text: ‘Id’, datafield: ‘Id’, width: ‘0%’, hidden: true },
{ text: ‘Valore’, datafield: ‘Valore’, width: ‘80%’ },
{ text: ‘Abilitata’, datafield: ‘Abilitata’, width: ‘20%’, columntype: ‘checkbox’, filtertype: ‘bool’ }
]
});
$(“#jqxGest”).jqxGrid(
{
width: ‘97%’,
height: ‘500px’,
source: sourceGest,
theme: ‘light’,
columnsresize: true,
localization: getLocalization(‘it’),
editable: false,
sortable: true,
altrows: true,
groupable: false,
showstatusbar: false,
showaggregates: false,
showtoolbar: false,
columns: [
{ text: ‘Id’, datafield: ‘Id’, width: ‘0%’, hidden: true },
{ text: ‘Valore’, datafield: ‘Valore’, width: ‘80%’ },
{ text: ‘Abilitata’, datafield: ‘Abilitata’, width: ‘20%’, columntype: ‘checkbox’, filtertype: ‘bool’ }
]
});

How can i solve this problem?Please help me. Thank you

[Ivo ZhulevParticipant]

Hi robynho85,

You dont have dataAdapters. The source must be passed to a dataAdapter and the dataAdapter to the grid source property.

var dataAdapter = new $.jqx.dataAdapter(source, {
      downloadComplete: function (data, status, xhr) { },
      loadComplete: function (data) { },
      loadError: function (xhr, status, error) { }
});

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[robynho85Participant]

If I add a dataadapter the problem is the same. How can i add more datasource in the same page and load all at the start of the page?

Now my code is:

var sourceAgCom = {
datatype: “json”,
datafields: [
{ name: ‘Id’ }, // Chiave primaria, int, idenity, not null
{ name: ‘Valore’ },
{ name: ‘Abilitata’ }
],
id: ‘Id’,
url: ‘/CRMScelte/GetAgCom’,
sortcolumn: ‘Valore’,
sortdirection: ‘asc’
};
var dataAdapterAgCom = new $.jqx.dataAdapter(sourceAgCom, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#jqxAgCom”).jqxGrid(
{
width: ‘97%’,
height: ‘500px’,
source: dataAdapterAgCom,
theme: ‘light’,
columnsresize: true,
localization: getLocalization(‘it’),
editable: false,
sortable: true,
altrows: true,
groupable: false,
showstatusbar: false,
showaggregates: false,
showtoolbar: false,
columns: [
{ text: ‘Id’, datafield: ‘Id’, width: ‘0%’, hidden: true },
{ text: ‘Valore’, datafield: ‘Valore’, width: ‘80%’ },
{ text: ‘Abilitata’, datafield: ‘Abilitata’, width: ‘20%’, columntype: ‘checkbox’, filtertype: ‘bool’ }
]
});
var sourceDiss = {
datatype: “json”,
datafields: [
{ name: ‘Id’ }, // Chiave primaria, int, idenity, not null
{ name: ‘Valore’ },
{ name: ‘Abilitata’ }
],
id: ‘Id’,
url: ‘/CRMScelte/GetDiss’,
sortcolumn: ‘Valore’,
sortdirection: ‘asc’
};
var dataAdapterDiss = new $.jqx.dataAdapter(sourceDiss, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
dataAdapterDiss.dataBind();
$(“#jqxDiss”).jqxGrid(
{
width: ‘97%’,
height: ‘500px’,
source: dataAdapterDiss,
theme: ‘light’,
columnsresize: true,
localization: getLocalization(‘it’),
editable: false,
sortable: true,
altrows: true,
groupable: false,
showstatusbar: false,
showaggregates: false,
showtoolbar: false,
columns: [
{ text: ‘Id’, datafield: ‘Id’, width: ‘0%’, hidden: true },
{ text: ‘Valore’, datafield: ‘Valore’, width: ‘80%’ },
{ text: ‘Abilitata’, datafield: ‘Abilitata’, width: ‘20%’, columntype: ‘checkbox’, filtertype: ‘bool’ }
]
});

Thank you

[Ivo ZhulevParticipant]

Hey robynho85,

Could you please make a fiddle

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[rasoul_parParticipant]

Hi
I think this is a problem with your html not your grids.
If you provide your html code maybe somebody could help.

[Author]

Posts