Data not displayed in proper format

[mshethParticipant]

When gone through the normal process of displaying grid with static value, the data display in vertical format in place of horizontal.
Firstly i thought it may would be my issue but then i tried creating example with jqxTable format, then data was displaying in proper format.
I used filtering which is working perfectly and sorting data as required, the only issue is data is being displayed vertically instead of horizontally.
I followed step as specified on below link:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-cli/angular-cli-jqxgrid.htm?search=

Installing jqxWidgets-scripts packages for this.
I think maybe this is an installation issue, or may be the issue is in jqx.base.css file.
If from inspect element if we apply position:absolute to every element then this problem is solved. Classes they were using were jqx-grid-cell and jqx-item, i tried modifying base.css file but no luck,.

Attaching the code below

.html :

<jqxGrid #myGrid
[width]=”1650″ [source]=”dataAdapter” [columns]=”columns” [filterable]=”true”
[sortable]=”true” [ready]=”ready” [autoshowfiltericon]=”true”>

.ts:

export class AppComponent {
source: any =
{
localdata:
[
[‘Alfreds Futterkiste’, ‘Maria Anders’, ‘Sales Representative’, ‘Obere Str. 57’, ‘Berlin’, ‘Germany’],
[‘Ana Trujillo Emparedados y helados’, ‘Ana Trujillo’, ‘Owner’, ‘Avda. de la Constitucin 2222’, ‘Mxico D.F.’, ‘Mexico’],
[‘Antonio Moreno Taquera’, ‘Antonio Moreno’, ‘Owner’, ‘Mataderos 2312’, ‘Mxico D.F.’, ‘Mexico’],
[‘Around the Horn’, ‘Thomas Hardy’, ‘Sales Representative’, ‘120 Hanover Sq.’, ‘London’, ‘UK’],
[‘Berglunds snabbkp’, ‘Christina Berglund’, ‘Order Administrator’, ‘Berguvsvgen 8’, ‘Lule’, ‘Sweden’],
[‘Blauer See Delikatessen’, ‘Hanna Moos’, ‘Sales Representative’, ‘Forsterstr. 57’, ‘Mannheim’, ‘Germany’],
[‘Blondesddsl pre et fils’, ‘Frdrique Citeaux’, ‘Marketing Manager’, ’24, place Klber’, ‘Strasbourg’, ‘France’],
[‘Blido Comidas preparadas’, ‘Martn Sommer’, ‘Owner’, ‘C\/ Araquil, 67’, ‘Madrid’, ‘Spain’],
[‘Bon app’, ‘Laurence Lebihan’, ‘Owner’, ’12, rue des Bouchers’, ‘Marseille’, ‘France’],
[‘Bottom-Dollar Markets’, ‘Elizabeth Lincoln’, ‘Accounting Manager’, ’23 Tsawassen Blvd.’, ‘Tsawassen’, ‘Canada’],
[‘B`s Beverages’, ‘Victoria Ashworth’, ‘Sales Representative’, ‘Fauntleroy Circus’, ‘London’, ‘UK’],
[‘Cactus Comidas para llelet’, ‘Patricio Simpson’, ‘Sales Agent’, ‘Cerrito 333’, ‘Buenos Aires’, ‘Argentina’],
[‘Centro comercial Moctezuma’, ‘Francisco Chang’, ‘Marketing Manager’, ‘Sierras de Granada 9993’, ‘Mxico D.F.’, ‘Mexico’],
[‘Chop-suey Chinese’, ‘Yang Wang’, ‘Owner’, ‘Hauptstr. 29’, ‘Bern’, ‘Switzerland’],
[‘Comrcio Mineiro’, ‘Pedro Afonso’, ‘Sales Associate’, ‘Av. dos Lusadas, 23’, ‘Sao Paulo’, ‘Brazil’],
[‘Consolidated Holdings’, ‘Elizabeth Brown’, ‘Sales Representative’, ‘Berkeley Gardens 12 Brewery’, ‘London’, ‘UK’],
[‘Drachenblut Delikatessen’, ‘Sven Ottlieb’, ‘Order Administrator’, ‘Walserweg 21’, ‘Aachen’, ‘Germany’],
[‘Du monde entier’, ‘Janine Labrune’, ‘Owner’, ’67, rue des Cinquante Otages’, ‘Nantes’, ‘France’],
[‘Eastern Connection’, ‘Ann Devon’, ‘Sales Agent’, ’35 King George’, ‘London’, ‘UK’],
[‘Ernst Handel’, ‘Roland Mendel’, ‘Sales Manager’, ‘Kirchgasse 6’, ‘Graz’, ‘Austria’]
],
datafields:
[
{ name: ‘CompanyName’, type: ‘string’, map: ‘0’ },
{ name: ‘ContactName’, type: ‘string’, map: ‘1’ },
{ name: ‘Title’, type: ‘string’, map: ‘2’ },
{ name: ‘Address’, type: ‘string’, map: ‘3’ },
{ name: ‘City’, type: ‘string’, map: ‘4’ },
{ name: ‘Country’, type: ‘string’, map: ‘5’ }
],
datatype: ‘array’
};

dataAdapter: any = new jqx.dataAdapter(this.source);

columns: any[] =
[
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 300 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 300 },
{ text: ‘Contact Title’, datafield: ‘Title’, width: 300 },
{ text: ‘Address’, datafield: ‘Address’, width: 300 },
{ text: ‘City’, datafield: ‘City’, width: 200 },
{ text: ‘Country’, datafield: ‘Country’ }
];
}

If there is other way to install and run this jqx-widgets file please tell.Thanks

[Peter StoevKeymaster]

Hi msheth,

This can happen, if the required jqx.base.css file is not referred in the angular.json, styles. Ex: “node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css” or “node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css”, if you use the jqwidgets-framework NPM package.

Regards,
Peter

[mshethParticipant]

Thanks Peter Stoev,

Already added jqx.base.css path in angular.json style part but still same issue when going with jqxWidgets-scripts package.
I think the problem is with jqxWidgets-scripts package, I tried using jqxwidgets-framework package and everything works fine.
Still trying to find out what was the issue.

And also: *color: expression(this.parentNode.currentStyle[‘color’]) !important;
Such styling in base.css file shows error in angular, just for refrence.

Thanks for the help.

Regards,
Megh

[Peter StoevKeymaster]

Hi Megh,

1. Both packages contain the same source files and also the package’s name is jqwidgets-scripts, not jqxWidgets-scripts. If you refer it like that, nothing will be imported. Example: https://stackblitz.com/github/jqwidgets/angular_demos/tree/master/grid/defaultfunctionality/

2. The CSS setting displays a warning, not an error. It is valid CSS left for compatibility with older browsers.

Regards,
Peter

[Author]

Posts