Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 150396 | Jan 5,2020 06:49 PM UTC | Jan 9,2020 05:50 AM UTC | JavaScript - EJ 2 | 9 |
|
Tags: Grid |
|
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> |
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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
