JqxGrid

[rsssParticipant]

The below line is giving compilation error please help me..
import { DataTableModule } from ‘../../modules/datatable.module’;

[rsssParticipant]

ERROR in src/app/app.module.ts(5,35): error TS2307: Cannot find module ‘../../modules/datatable.module’.

[rsssParticipant]

I am trying to using Datatable example but it is giving compitation problem
App.Module.ts:import { DataTableModule } from ‘../../modules/datatable.module’;

[StanislavParticipant]

Hello rsss,

Try doing this:

import { jqxDataTableComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdatatable';

After you import the component in your project (in the app.module.ts file) you need to add jqxDataTableComponent to the declarations as well. After this, the component will be included in your project when you build it.

Best Regards,
Stanislav

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

[rsssParticipant]

I am trying to execute an example referring to link : https://www.jqwidgets.com/angular/angular-datatable/angular-datatable-defaultfunctionality.htm?light
where nothing is working for me.
Thank you for reply

[rsssParticipant]

Please find below stack trace
Uncaught Error: Unexpected directive ‘jqxDataTableComponent’ imported by the module ‘AppModule’. Please add a @NgModule annotation.
at syntaxError (compiler.js:486)
at eval (compiler.js:15240)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15215)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)
at eval (main.ts:11)

[StanislavParticipant]

Hello rsss,

The DataTableModule is used when building the demos on the website.
I would suggest you to download and install our Create jqWidgets Angular app
When you install it and open up the project, it will have a build in jqxGrid, you can just change the widget name to DataTable.

Here is an example as well of a the Default functionality

app.component.ts

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})

export class AppComponent {
    columns: any[] =
    [
        { text: 'First Name', dataField: 'First Name', width: 200 },
        { text: 'Last Name', dataField: 'Last Name', width: 200 },
        { text: 'Product', dataField: 'Product', width: 250 },
        { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
        { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
    ];
}

app.component.html

<jqxDataTable [width]="850" [columns]="columns" [selectionMode]="'singleRow'"
			  [altRows]="true" [sortable]="true" [editable]="true">
	<table id='table' border='1'>
		<thead>
			<tr>
				<th align='left'>First Name</th>
				<th align='left'>Last Name</th>
				<th align='left'>Product</th>
				<th align='right'>Price</th>
				<th align='right'>Quantity</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Ian</td>
				<td>Devling</td>
				<td>Espresso Truffle</td>
				<td>$1.75</td>
				<td>8</td>
			</tr>
			<tr>
				<td>Nancy</td>
				<td>Wilson</td>
				<td>Cappuccino</td>
				<td>$5.00</td>
				<td>3</td>
			</tr>
			<tr>
				<td>Cheryl</td>
				<td>Nodier</td>
				<td>Caffe Americano</td>
				<td>$2.50</td>
				<td>4</td>
			</tr>
			<tr>
				<td>Martin</td>
				<td>Saavedra</td>
				<td>Caramel Latte</td>
				<td>$3.80</td>
				<td>11</td>
			</tr>
		</tbody>
	</table>
</jqxDataTable>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { jqxDataTableComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdatatable';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
	  AppComponent, jqxDataTableComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Best Regards,
Stanislav

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

[Author]

Posts