Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
142914 | Feb 25,2019 10:06 PM UTC | Feb 28,2019 04:24 AM UTC | JavaScript - EJ 2 | 3 |
![]() |
Tags: Grid |
...
import { Grid, Selection, Page, Reorder, Group, Sort, ColumnMenu } from '@syncfusion/ej2-grids';
...
Grid.Inject(Selection, Page, Reorder, Group, Sort, ColumnMenu);
/**
* Default Grid sample
*/
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15));
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
],
allowPaging: true,
allowReordering: true,
allowGrouping: true,
allowSorting: true,
pageSettings: { pageSize: 7 },
showColumnMenu: true,
});
let newColumns = [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'OrderDate', headerText: 'Order Date', width: 80, format: 'yMd' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 200, format: 'C' },
{ field: 'CustomerID', width: 70, headerText: 'Customer ID', type: 'string', visible: false },
];
grid.appendTo('#Grid');
let chngBut: Button = new Button({ cssClass: 'e-flat'},'#change');
document.getElementById('change').onclick = () => {
(grid as any).columns = newColumns; //change
}
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.