JQwidgets Angular 5 Demo

[BhavinParticipant]

I have a template which is developed in Angular-5. Now, I want to add Jqwidgets in Angular-5 existing App.

Now, Let’s take a example,
I have installed jqwidgets in my Angular-5 app.

I want to show it in Dashboard components.
I have 4 files dashboard.component.ts , dashboard.module.ts , dashboard.component.html , dashboard-routing.module.ts.

I have imported modules in dashboard.module.ts,

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { AppComponent } from ‘./app.component’;
import { GridModule } from ‘../../modules/grid.module’;
import { CheckBoxModule } from ‘../../modules/checkbox.module’;
import { ButtonModule } from ‘../../modules/button.module’;
import { PanelModule } from ‘../../modules/panel.module’;

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, CommonModule, GridModule, CheckBoxModule, ButtonModule, PanelModule ], providers: [], bootstrap: [AppComponent]})

export class AppModule { }

But I got this Error :- ‘../../modules/checkbox.module’; not found where are the modules folders in node ?

I have imported in component.ts,

import { Component, ViewChild, ViewEncapsulation } from ‘@angular/core’;

import { jqxGridComponent } from ‘../../../jqwidgets-ts/angular_jqxgrid’;
import { jqxPanelComponent } from ‘../../../jqwidgets-ts/angular_jqxpanel’;

import { generatedata } from ‘../../../sampledata/generatedata’;

But how I can fetch everything in single HTML file because I have only one html file dashboard.component.html and in your every example there are two html file app.html and app.component.html.

But it doesn’t work because in every demo you provided reference with app components and I’m newbie in Angular-5.

So, it is very difficult from my side to manage.

[StanislavParticipant]

Hello Bhavin,

You should use this as your rout:

import { jqxGridComponent } from 'jqwidgets-ts/angular_jqxgrid';
import { jqxPanelComponent } from 'jqwidgets-ts/angular_jqxpanel';

You don’t need to import the modules of the files, the components are enough.

Best Regards,
Stanislav

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

[BhavinParticipant]

Thank you for your answer.

As per your suggestion,

I have imported,

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';
import { jqxPanelComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxpanel';

I have installed “jqwidgets-framework”.
So, I have to change the import path but it’s working it doesn’t show error in sublime.

And in dashboard.component.ts file I have put this code,

// Jqwidgets code starts here

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: 200 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘Title’, width: 100 },
{ text: ‘Address’, datafield: ‘Address’, width: 100 },
{ text: ‘City’, datafield: ‘City’, width: 100 },
{ text: ‘Country’, datafield: ‘Country’ }
];

// Jqwidgets code ends here

And in My html (dashboard.component.html) file, I have put following code,

<jqxGrid #myGrid
                [width]="850" [source]="dataAdapter" [columns]="columns"
                [columnsresize]="true" [editable]="true" [selectionmode]="'multiplecellsadvanced'">
            </jqxGrid>

But it still showing me error that,

ERROR ReferenceError: jqx is not defined
at new DashboardComponent (dashboard.component.ts:55)

Am I missing something the import error has gone. I have import script or css files in index.html ?

[StanislavParticipant]

Hello Bhavin,

Are you using the create-jqwidgets-angular-app?
If not I would highly suggest you to use it.
It comes with our latest versions and is very easy to set up.

Also, make sure you are running the latest version of node. You can check it by typing npm -v in your console. Or just download it from their official website Node.

Best Regards,
Stanislav

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

[BhavinParticipant]

Hey Jqwidgets Team.

Thank you for your fast reply.
Problem is solved when I install angular-5 app using create-jqwidgets-angular-app and then I have used the installed app’s components then it works.

But may be the issues is that when I install your package from npm server.
It make a folder which is created under node_modules it’s named as “jqwidgets-framework” but from create-jqwidgets-angular-app the folder which is created under node_modules is jqwidgets-scripts.

So, I have literally copy – paste from create-jqwidgets-angular-app and it worked.

So, May be I’m wrong but why both folder name is different from npm install and create-jqwidgets-angular-app.

[StanislavParticipant]

Hello Bhavin,

The jqwidgets-scripts package contains only the jQWidgets scripts and styles.
The jqwidgets-framework package contains all these plus demos and documentation.

Best Regards,
Stanislav

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

[Author]

Posts