We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
Index.ts
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { Grid, Edit, Toolbar, Page, NewRowPosition, Filter} from '@syncfusion/ej2-grids';
import { orderDataSource } from './data-source';
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { L10n } from '@syncfusion/ej2-base';
/**
* Batch Editing sample
*/
Grid.Inject(Edit, Toolbar, Page, Filter);
L10n.load({
'en-US': {
'grid': {
"FilterButton": "apply",
"ClearButton": "Clear"
},
}
});
let newRowPosition: { [key: string]: Object }[] = [
{ id: 'Top', newRowPosition: 'Top' },
{ id: 'Bottom', newRowPosition: 'Bottom' }
];
let grid: Grid = new Grid(
{
dataSource: orderDataSource,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' },
allowPaging: true,
allowFiltering: true,
filterSettings: { type: 'Menu'},
pageSettings: { pageCount: 5 },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
actionBegin: actionBegin,
actionComplete: actionComplete,
columns: [
{
field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',
validationRules: { required: true, number: true }, width: 140
},
{
field: 'CustomerID', headerText: 'Customer ID',
validationRules: { required: true }, width: 140
},
{
field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',
width: 140, format: 'C2', validationRules: { required: true }
},
{
field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit',
width: 160, format: { type: 'dateTime', format: 'M/d/y hh:mm a' },
},
{
field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,
edit: { params: { popupHeight: '300px' } }
}],
});
grid.appendTo('#Grid');
function actionComplete(args: any): void {
if (args.requestType === 'filterafteropen'){
let gridElement: Element = grid.element;
// You can customize the filter dialog options for each datatype here
if (args.columnType === 'number'){
(gridElement.getElementsByClassName('e-numerictextbox')[0] as any).ej2_instances[0].format = '0'; // You can customize decimal value here
(gridElement.getElementsByClassName('e-numerictextbox')[0] as any).ej2_instances[0].placeholder = 'Customized Placeholder'; // You can customize placeholder value here
(gridElement.getElementsByClassName('e-numerictextbox')[0] as any).ej2_instances[0].cssClass = 'e-custom-numeric-style';// You can customize css styles value here
}
if (args.columnType === 'string') {
(gridElement.getElementsByClassName('e-autocomplete')[0] as any).ej2_instances[0].minLength = 20;
// You can customize query Length here
}
if (args.columnType === 'datetime'){
(gridElement.getElementsByClassName('e-datetimepicker')[0] as any).ej2_instances[0].cssClass = 'e-custom-style';
}
}
}
function actionBegin(args: any): void {
if (args.requestType === 'save') {
if (grid.pageSettings.currentPage !== 1 && grid.editSettings.newRowPosition === 'Top') {
args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - grid.pageSettings.pageSize;
} else if (grid.editSettings.newRowPosition === 'Bottom') {
args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - 1;
}
}
}
let dropDownType: DropDownList = new DropDownList({
dataSource: newRowPosition,
fields: { text: 'newRowPosition', value: 'id' },
value: 'Top',
change: (e: ChangeEventArgs) => {
let newRowPosition: string = <string>e.value;
grid.editSettings.newRowPosition = <NewRowPosition>newRowPosition;
}
});
dropDownType.appendTo('#newRowPosition'); |
|
Index.html
<style>
.e-numeric .e-input-group-icon.e-spin-up:before {
content: "\e823";
color: rgba(0, 0, 0, 0.54);
}
.e-numeric .e-input-group-icon.e-spin-down:before {
content: "\e934";
color: rgba(0, 0, 0, 0.54);
}
.e-input-group.e-datetime-wrapper.e-custom-style:not(.e-float-icon-left)::before, /* csslint allow: adjoining-classes*/
.e-input-group.e-datetime-wrapper.e-custom-style:not(.e-float-icon-left)::after /* csslint allow: adjoining-classes*/
{ /* csslint allow: adjoining-classes*/
background: blue;
}
.e-datetime-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/
background: blue;
}
.e-datetime-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
background: blue;
}
.e-calendar .e-content td.e-disabled .e-day, .e-calendar .e-content td.e-disabled:hover .e-day, .e-calendar .e-content td.e-disabled:focus .e-day {
color: blue;
font-weight: bold;
}
.e-datetime-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons, /* csslint allow: adjoining-classes*/
.e-datetime-wrapper.e-custom-style .e-input { /* csslint allow: adjoining-classes*/
color: blue;
}
.e-datetime-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/
background: blue;
}
.e-datetime-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
background: blue;
}
.e-datetime-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons.e-active { /* csslint allow: adjoining-classes*/
color: blue;
}
//You can customize the filter dialog styles here
.e-flmenu .e-btn.e-flmenu-okbtn {
background-color: #0078d6;
}
.e-flmenu .e-flmenu-cancelbtn {
background-color: #0078d6;
}
.e-flmenu .e-btn.e-flat{
color: #fff;
}
.e-flmenu .e-btn.e-flat:hover{
color: #e3165b;
}
</style> |
