From ce1d503438d00c1ddaee9790b73aed263d8ee11e Mon Sep 17 00:00:00 2001 From: essentialjs2 Date: Thu, 21 Oct 2021 11:44:08 +0000 Subject: [PATCH] documentation(EJ2-000): source update from ej2-grid-docs --- src/grid/grid/edit.md | 64 +++++++++++++++++- ...-while-focusing-the-drop-down-edit-cell.md | 41 +++++++++++ src/grid/grid/images/drag-icon.PNG | Bin 0 -> 408 bytes src/grid/grid/scrolling.md | 2 +- src/grid/grid/searching.md | 56 ++++++++++++++- src/grid/grid/summary.md | 3 +- src/grid/grid/tool-bar.md | 27 ++++++++ 7 files changed, 189 insertions(+), 4 deletions(-) create mode 100644 src/grid/grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md create mode 100644 src/grid/grid/images/drag-icon.PNG diff --git a/src/grid/grid/edit.md b/src/grid/grid/edit.md index d5811e2..b7215ca 100644 --- a/src/grid/grid/edit.md +++ b/src/grid/grid/edit.md @@ -367,7 +367,7 @@ grid.appendTo('#Grid'); You can prevent the CRUD operations of the Grid by using condition in the [`actionBegin`](../api/grid/#actionbegin) event with requestType as `beginEdit` for editing, `add` for adding and `delete` for deleting actions. -In the below demo, we prevent the CRUD operation based on the `Role` column value. If the Role Column is ‘employee’, we are unable to edit/delete that row. +In the below demo, we prevent the CRUD operation based on the `Role` column value. If the Role Column is `Employee`, we are unable to edit/delete that row. {% tab template="grid/grid",es5Template="canceleditinline" %} @@ -663,6 +663,68 @@ grid.cellEdit= function(args){ {% endtab %} +#### Cancel edit based on condition in Batch mode + +You can prevent the CRUD operations of the Batch edit Grid by using condition in the [`cellEdit`](../api/grid/#cellEdit), [`beforeBatchAdd`](../api/grid/#beforeBatchAdd) and [`beforeBatchDelete`](../api/grid/#beforeBatchDelete) events for Edit, Add and Delete actions respectively. + +In the below demo, we prevent the CRUD operation based on the `Role` column value. If the Role Column is `Employee`, we are unable to edit/delete that row. + +{% tab template="grid/grid",es5Template="canceleditbatch" %} + +```typescript +import { Grid, Edit, Toolbar } from '@syncfusion/ej2-grids'; +import { data } from './datasource.ts'; + +Grid.Inject(Edit, Toolbar); + +let isAddable: boolean = true; +let grid: Grid = new Grid({ + dataSource: data, + toolbar: ['Add', 'Delete', 'Update', 'Cancel'], + editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }, + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true }, + { field: 'Role', headerText: 'Role', width: 120, }, + { field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' }, + { field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 } + ], + cellEdit: cellEdit, + beforeBatchAdd: beforeBatchAdd, + beforeBatchDelete: beforeBatchDelete, + height: 240 +}); +grid.appendTo('#Grid'); + +function cellEdit(args) { + if (args.rowData['Role'] == 'Employee') { + args.cancel = true; + } +} +function beforeBatchAdd(args) { + if (!isAddable) { + args.cancel = true; + } +} +function beforeBatchDelete(args) { + if (args.rowData['Role'] == 'Employee') { + args.cancel = true; + } +} + +var button = document.createElement('button'); +button.innerText = 'Grid is Addable'; +document.body.insertBefore(button, document.body.children[0]); +button.addEventListener('click', btnClick.bind(this)); + +function btnClick(args) { + args.target.innerText == 'Grid is Addable' ? (args.target.innerText = 'Grid is Not Addable') : (args.target.innerText = 'Grid is Addable'); + isAddable = !isAddable; +} + +``` + +{% endtab %} + ## Dialog/Inline template The dialog/inline template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`editSettings.mode`](../api/grid/editSettings/#mode) as `Dialog/Inline` and [`editSetting.template`](../api/grid/editSettings/#template) as SCRIPT element ID or HTML string which holds the template. diff --git a/src/grid/grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md b/src/grid/grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md new file mode 100644 index 0000000..dcfc666 --- /dev/null +++ b/src/grid/grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md @@ -0,0 +1,41 @@ +--- +title: "Open popup while focusing the dropdown edit cell" +component: "Grid" +description: "Learn how to open the popup list while focusing the dropdownedit cell." +--- + +# Open popup while focusing the dropdown edit cell + +You can open the DropDownList popup while focusing the cell by invoking the [`showPopup`](../../api/drop-down-list/#showpopup) method inside the ['focus'](../../api/drop-down-list/#focus) event of DropDownList component. + +In the below demo, we have bound the focus event for the edit DropDownList using the [`columns.edit.params`](../api/grid/column/#edit) property. + +{% tab template="grid/grid",es5Template="openPopup" %} + +```typescript +import { Grid, Edit, Toolbar, EJ2Intance } from '@syncfusion/ej2-grids'; +import { data } from './datasource.ts'; + +Grid.Inject(Edit, Toolbar); + +let grid: Grid = new Grid({ + dataSource: data, + toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], + editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true }, + { field: 'CustomerID', headerText: 'Customer ID', width: 120 }, + { field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' }, + { field: 'ShipCountry', headerText: 'Ship Country', edit: { params: { focus: ddFocus } }, editType: 'dropdownedit', width: 150 } + ], + height: 265 +}); +grid.appendTo('#Grid'); + +function ddFocus(e: {event: MouseEvent | KeyboardEvent | TouchEvent}): void { + ((e.event.target as HTMLElement).querySelector('.e-dropdownlist') as EJ2Intance).ej2_instances[0].showPopup(); +} + +``` + +{% endtab %} diff --git a/src/grid/grid/images/drag-icon.PNG b/src/grid/grid/images/drag-icon.PNG new file mode 100644 index 0000000000000000000000000000000000000000..b7d6e1614a9dc0b801bc800d2f9c21ae321bea19 GIT binary patch literal 408 zcmV;J0cZY+P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0WC>HK~zXf?U12Q z12G&%D<>xqCuWu)wgkhUFp?P@xRD^pf?5y@a>0>_1&N%UJVSyZISk3kGbA^$q$f^P zoTxzj#KcEgJ7}+$FbGQ!d-A3IuJ;)JfZd4CZp6nMA<2=>IV2gOsB$*W2xTD#2Mmlc zG%si1>JlxKYiZZM3RkX-Ga{ZwXsg2?7g(c@Fe8YE0h(*qy2hh0hb`RS5fN^?`oiH* zf0gnGqmFh*Hxa~lFIhnnJd<$FRyhklY@s8HHzO2l_v5g^`4p)dqWKK{edA2*GFu2+ z#JD@Dxe=|{$7AJ|`lyW`c1e&$>CIKn!VjCLh@TU1J8YgHeo36zHg4F(SHybHgngaj zY)`x3LWQju+D6y}_r1W4_!+x~)5)e`f5Cql0p0 { + if (args.requestType === 'searching') { + key = args.searchString.toLowerCase(); + } + }, + queryCellInfo: (args: QueryCellInfoEventArgs) => { + if (key != '') { + let cellContent: string = args.data[args.column.field]; + let parsedContent: string = cellContent.toString().toLowerCase(); + if (parsedContent.includes(key.toLowerCase())) { + let i: number = 0; + let searchStr: string = ''; + while (i < key.length) { + let index: number = parsedContent.indexOf(key[i]); + searchStr = searchStr + cellContent.toString()[index]; + i++; + } + args.cell.innerHTML = args.cell.innerText.replaceAll( + searchStr, + "" + searchStr + '' + ); + } + } + } +}); +grid.appendTo('#Grid'); + +``` + +{% endtab %} diff --git a/src/grid/grid/summary.md b/src/grid/grid/summary.md index 7a5adcc..a083717 100644 --- a/src/grid/grid/summary.md +++ b/src/grid/grid/summary.md @@ -73,4 +73,5 @@ * [Focus the double clicked column](grid/how-to/focus.md) * [Add a title when using Grid print function](grid/how-to/grid-print.md) * [How to Change the hierarchy grid icons](grid/how-to/change-hierarchy-grid-icon.md) -* [Show the count of distinct values in aggregate row](grid/how-to/show-the-count-of-distinct-value-in-aggregate.md) \ No newline at end of file +* [Show the count of distinct values in aggregate row](grid/how-to/show-the-count-of-distinct-value-in-aggregate.md) +* [Open popup while focusing the edit dropdown list](grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md) \ No newline at end of file diff --git a/src/grid/grid/tool-bar.md b/src/grid/grid/tool-bar.md index c0fd9f7..54c7ab6 100644 --- a/src/grid/grid/tool-bar.md +++ b/src/grid/grid/tool-bar.md @@ -246,6 +246,33 @@ function clickHandler(args: ClickEventArgs): void { {% endtab %} +## Add Toolbar at the bottom of Grid + +You can add the Grid toolbar component at the bottom of Grid using the ['created'](../api/grid/#created) event. + +{% tab template="grid/grid", es5Template="bottom-toolbar" %} + +```typescript +var grid = new ej.grids.Grid({ + dataSource: data.slice(0,8), + toolbar: ['Print', 'Search'], + 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', textAlign: 'Right', width: 140, format: 'yMd' } + ], + height: 200, + created: () => { + var toolbar = grid.element.querySelector('.e-toolbar'); + grid.element.appendChild(toolbar); + } +}); +grid.appendTo('#Grid'); +``` + +{% endtab %} + ## See Also * [Define your own toolbar](./how-to/create-custom-tool-bar-with-drop-down-list)