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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
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> |
