[StanislavParticipant]

Hello karinamachado,

Here is an example: Example

You can take a look at this forum post: Link

Best Regards,
Stanislav

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

[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/

[StanislavParticipant]

Hello Michel,

Can you send us an example of this issue?
I would like to take a better look at it, using your settings and options.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello andrea,

Do you mean something like this?
app.component.ts

export class AppComponent {
	@ViewChild('myGrid') myGrid: jqxGridComponent;
	@ViewChild('myButton') myButton: jqxButtonComponent;

	source: any =
	{
		datafields: [
			{ name: 'FirstName' },
			{ name: 'LastName' },
			{ name: 'Title' },
			{ name: 'Address' },
			{ name: 'City' }
		],
		root: 'Employees',
		record: 'Employee',
		id: 'EmployeeID',
		datatype: 'xml',
		url: '../assets/sampledata/employees.xml'
	};

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

	ordersSource: any =
	{
		datafields: [
			{ name: 'EmployeeID', type: 'string' },
			{ name: 'ShipName', type: 'string' },
			{ name: 'ShipAddress', type: 'string' },
			{ name: 'ShipCity', type: 'string' },
			{ name: 'ShipCountry', type: 'string' },
			{ name: 'ShippedDate', type: 'date' }
		],
		root: 'Orders',
		record: 'Order',
		datatype: 'xml',
		url: '../assets/sampledata/orderdetails.xml'
	};

	ordersDataAdapter = new jqx.dataAdapter(this.ordersSource, { autoBind: true });

	nestedGrids: any[] = new Array();

	// create nested grid.
	initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
		let id = record.uid.toString();
		let nestedGridContainer = parentElement.children[0];
		this.nestedGrids[index] = nestedGridContainer;
		let filtergroup = new jqx.filter();
		let filter_or_operator = 1;
		let filtervalue = id;
		let filtercondition = 'equal';
		let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
		// fill the orders depending on the id.
		let orders = this.ordersDataAdapter.records;
		let ordersbyid = [];
		for (let i = 0; i < orders.length; i++) {
			let result = filter.evaluate(orders[i]['EmployeeID']);
			if (result)
				ordersbyid.push(orders[i]);
		}
		let ordersSource = {
			datafields: [
				{ name: 'EmployeeID', type: 'string' },
				{ name: 'ShipName', type: 'string' },
				{ name: 'ShipAddress', type: 'string' },
				{ name: 'ShipCity', type: 'string' },
				{ name: 'ShipCountry', type: 'string' },
				{ name: 'ShippedDate', type: 'date' }
			],
			id: 'OrderID',
			localdata: ordersbyid
		}
		let nestedGridAdapter = new jqx.dataAdapter(ordersSource);
		if (nestedGridContainer != null) {

			let settings = {
				width: 780,
				height: 200,
				source: nestedGridAdapter,
				columns: [
					{ text: 'Ship Name', datafield: 'ShipName', width: 200 },
					{ text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
					{ text: 'Ship City', datafield: 'ShipCity', width: 150 },
					{ text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
					{ text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
				]
			};

			jqwidgets.createInstance(<code>#${nestedGridContainer.id}</code>, 'jqxGrid', settings);
		}
	}

	renderer = (row: number, column: any, value: string): string => {
		return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
	}

	rowdetailstemplate: any = {
		rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>', rowdetailsheight: 220, rowdetailshidden: true
	};

	columns: any[] =
	[
		{ text: 'Photo', width: 50 },
		{ text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: this.renderer },
		{ text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: this.renderer },
		{ text: 'Title', datafield: 'Title', width: 180, cellsrenderer: this.renderer },
		{ text: 'Address', datafield: 'Address', width: 300, cellsrenderer: this.renderer },
		{ text: 'City', datafield: 'City', width: 170, cellsrenderer: this.renderer }
	];

	onButtonClick(event) {
		let rows = this.myGrid.getrows();

		for (let i = 0; i < rows.length; i++) {
			let data = this.myGrid.getrowdata(i);

			if (data.City == 'London') {
				this.myGrid.showrowdetails(i)
			}
		}
	}
}

app.component.HTML

<jqxGrid #myGrid
		 [width]="850" [height]="365" [source]="employeesAdapter" [columns]="columns"
		 [rowdetails]="true" [rowsheight]="35" [initrowdetails]="initRowDetails"
		 [rowdetailstemplate]="rowdetailstemplate">
</jqxGrid>

<jqxButton #myButton (onClick)="onButtonClick($event)"
		   [width]="120" [height]="40">
	Show nested rows
</jqxButton>

Best Regards,
Stanislav

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

[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/

[StanislavParticipant]

Hello Kelsey,

Can you please send us an example of your case?

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Michal6677,

Thanks for posting this.
An example is nearly done and we will post it here.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello jimbears,

You want to remove the tooltips from the chart, right?
If that is the case, try using hideToolTip from the charts API.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello cem,

No, this is a fix for the given issue.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Grigoriy,

Can you please send us an example of how you define your dynamic grids with the buttons?

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello shakti_singh,

Take a look at this demo: Grid Server Paging
It is a grid with server-side paging.

It shows the loader automatically when you change the page of the grid.
And the loader is active until the grid loads the data on the page after that is hades the loader again.

If this doesn’t help you, can you please send us an example so we can take a better look at your case?

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Liam,

Thanks for the report again.
This shouldn’t be happening, and unfortunately, I am unable to give you a workaround for the time being.

A fix should be released in the near future.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Benny,

That is a dropDownList element.
You need to select the element and use its API to change it.

Here is a link to the API of the DropDownList: Link to API

Here is an example: Example

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Liam,

I am not certain of when the fix will be released.
I would suggest you keep an eye on these:
RoadMap
Release History

When e new version is released it will be posted in the ‘release history’ along with all that has been updated/changed and improved.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Michal6677,

Have you seen our documentation on reactive forms?
Here is a link to it: Link

Best Regards,
Stanislav

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

[Author]

Posts