+ 
+ There is no data available to display at the moment.
+
);
+ },
+
+ /* eslint-disable-next-line react/jsx-no-target-blank */
+ productTemplate(props: any) {
+ const customerName = props.CustomerName;
+ return (
+
+ );
+ },
+
+ columnMenuSettings: () => {
+ return (
+
+ Customer Details
+
+ )
+ },
+
+ columnClipModeSettings: (column: GridColumn) => {
+ const align = column.headerTextAlign;
+ const justify =
+ align === 'Right' ? 'flex-end' :
+ align === 'Center' ? 'center' : 'flex-start';
+ return (
+
+ {
+ isHeaderTemplate = true;
+ }}
+ cssClass="custom-menu-column-clipmode"
+ />
+
+
+ )
+ },
+
+ columnMenuFreezeSettings: () => {
+ return (
+
+
+
+ Ship Address
+
+
+ { isHeaderTemplate = true; }}
+ cssClass="custom-menu-column-name"
+ />
+ Order ID
+
+ )
+ },
+
+ columnMenuCheckboxSettings: (column: GridColumn) => {
+ const align = column.headerTextAlign;
+ const justify =
+ align === 'Right' ? 'flex-end' :
+ align === 'Center' ? 'center' : 'flex-start';
+ return (
+
+ {
+ isHeaderTemplate = true;
+ }}
+ cssClass="custom-menu-column-verified"
+ />
+
+ )
+ },
+
+ columnMenuDateFormatSettings: (column: GridColumn) => {
+ const align = column.headerTextAlign;
+ const justify =
+ align === 'Right' ? 'flex-end' :
+ align === 'Center' ? 'center' : 'flex-start';
+ return (
+
+
+
+
+ Verified
+
+ {
+ isHeaderTemplate = true;
+ }}
+ cssClass="custom-menu-column-date"
+ />
+
+
+ )
+ },
+
+ columnMenuFormatSettings: (column: GridColumn) => {
+ const align = column.headerTextAlign;
+ const justify =
+ align === 'Right' ? 'flex-end' :
+ align === 'Center' ? 'center' : 'flex-start';
+ return (
+
+
+
+
+ Order Date
+
+ {
+ isHeaderTemplate = true;
+ }}
+ cssClass="custom-menu-column-number"
+ />
+
+
+ )
+ },
+
+ localeValueTemplate: (data: any) => {
+ return (
+
+
+
+ Freight
+
+
+ listObj = list} dataSource={dropdownDataSource.listViewData} height='100%' cssClass="e-template-list" template={gridCommonTemplates.listTemplate} fields={listFields} select={gridCommonTemplates.OnSelect}>
+
+
+
+ );
+ },
+
+ dialogObjOpen: () => {
+ setShowDialog(true);
+ gridCommonTemplates.selectItem();
+ const indicatorElement = document.getElementById("loadingindicator");
+ const infinitescrollingElement = document.getElementById("enableinfinitescrolling");
+ if (gridInstance.filterSettings.type === "FilterBar" || gridInstance.filterSettings.type === "Menu") {
+ indicatorElement!.classList.add("e-disabled");
+ indicatorElement!.setAttribute("disabled", "true");
+ infinitescrollingElement!.classList.add("e-disabled");
+ infinitescrollingElement!.setAttribute("disabled", "true");
+ }
+ },
+
+ dialogObjClose: () => {
+ if (selectedItemRef.current && listObj) {
+ listObj.unselectItem(selectedItemRef.current);
+ console.log("Restored Selected Item:", selectedItemRef.current.text);
+ }
+ setShowDialog(false);
+ },
+
+ footerTemplate: () => {
+ return (
+
+
+
+
+
+
+
+ {customComponentTemplates.addPropertiesInsideDialogbox("Header Settings")}
+
+
+ gridPrivateMethods.handleClick('Save')}>
+ Save
+
+ gridPrivateMethods.handleClick('Apply')}>
+ Apply
+
+
+ );
+ },
+
+
+ HeaderTemplate: (): JSX.Element => {
+ return (
+
+ dialogObj = dialog}
+ enableRtl={enableRtlListView}
+ visible={showDialog}
+ isModal={true}
+ header="Settings"
+ height='100%'
+ width='720px'
+ content={gridCommonTemplates.sideBar}
+ open={gridCommonTemplates.dialogObjOpen}
+ close={gridCommonTemplates.dialogObjClose}
+ footerTemplate={gridCommonTemplates.footerTemplate as any}
+ showCloseIcon={true}
+ >
+
+
);
+ },
+
+ customerDetailsTemplate: () => {
+ return (
+
+ Customer Details
+
+ )
+ },
+
+ productDetailsTemplate: () => {
+ return (
+
+
+ Product Details
+
+ )
+ },
+
+ shipCountryTemplate: () => {
+ return (
+
+ 
+ Ship Country
+
+ )
+ },
+
+ getCountryMessage: (shipCountry: string) => {
+ switch (shipCountry) {
+ case 'France':
+ return 'France.jpg';
+ case 'Germany':
+ return 'https://ej2.syncfusion.com/javascript/demos/src/tree-grid/images/Germany.png';
+ case 'Brazil':
+ return 'https://ej2.syncfusion.com/react/demos/src/grid/images/country/Brazil.png';
+ case 'Spain':
+ return 'https://ej2.syncfusion.com/react/demos/src/grid/images/country/Spain.png';
+ case 'Switzerland':
+ return 'https://ej2.syncfusion.com/react/demos/src/grid/images/country/Switzerland.webp';
+ case 'Italy':
+ return 'https://ej2.syncfusion.com/react/demos/src/grid/images/country/Italy.png';
+ default:
+ return 'https://ej2.syncfusion.com/javascript/demos/src/tree-grid/images/USA.png';
+ }
+ },
+
+ countryTemplate: (props: Orders): JSX.Element => {
+ let countryImage = gridCommonTemplates.getCountryMessage(props.ShipCountry);
+ return (
+
+ Ship Country
+
+ 
+ {props.ShipCountry}
+
+ );
+ },
+
+ orderDetailsTemplate: () => {
+ return (
+
+
+ Order Details
+
+ )
+ },
+
+ shippingDetailsTemplate: () => {
+ return (
+
+
+ Shipping Information
+
+ )
+ },
+
+
+ imageTemplate: (props: Orders): JSX.Element => {
+ let imageIndex: number = props.EmployeeID % 9;
+ imageIndex = imageIndex === 0 ? 1 : imageIndex;
+ const altImg: number = !isNullOrUndefined(props.EmployeeID) ? props.EmployeeID : imageIndex;
+ const isBase64String: boolean = !isNullOrUndefined(props) && !isNullOrUndefined(props.EmployeeImage)
+ && props.EmployeeImage.indexOf("data:application") === -1 ? false : true;
+ const matchingBatchEdit: BatchOrders = batchEdit.find((edit) => edit.orderID === props.OrderID) as BatchOrders;
+ const src: string = matchingBatchEdit ? matchingBatchEdit.employeeImage : !isBase64String ? "data:image/jpeg;base64," + props.EmployeeImage
+ : props.EmployeeImage ? !batchFlag ? 'https://ej2.syncfusion.com/react/demos/src/grid/images/' + imageIndex + '.png' : props.EmployeeImage : '';
+ return (
+
+ 
+
+ );
+ },
+
+ getBase64: (file: File): string => {
+ const reader: FileReader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => {
+ imageStream = reader.result as string;
+ };
+ return imageStream;
+ },
+
+ path: {
+ saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save',
+ removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
+ } as AsyncSettingsModel,
+
+ onupload: (args: any) => {
+ for (const i of args.filesData) {
+ const liparentDiv = createElement('div', { className: 'image-list' });
+ const liImage = createElement('img', { className: 'image' });
+ liparentDiv.appendChild(liImage);
+ gridCommonTemplates.readURL(liImage, i);
+ previewRef!.appendChild(liparentDiv);
+
+ const fileBlob: Blob = (args.filesData[0] as FileInfo).rawFile as Blob;
+ const file: File = new File([fileBlob], (args.filesData[0] as FileInfo).name);
+ imageStream = gridCommonTemplates.getBase64(file);
+ batchFlag = true;
+ }
+ },
+
+ readURL: (liImage: any, file: any) => {
+ const imgPreview = liImage;
+ const imageFile = file.rawFile;
+ const reader = new FileReader();
+ reader.addEventListener('load', () => {
+ imgPreview.src = reader.result;
+ }, false);
+ if (imageFile) {
+ reader.readAsDataURL(imageFile);
+ }
+ },
+
+ uploaderEditTemplate: (): JSX.Element => {
+ return (
+
+ {showEditLabel && (
+
+ )
+ }
+ };
+
+ const gridAggregateTemplates = {
+
+ aggregateCustomization: (text: string) => {
+ return (props: AggregateTemplateContext) => {
+ const { Sum, Average, Min, Max, Count } = props as {
+ Sum?: number;
+ Average?: number;
+ Min?: number;
+ Max?: number;
+ Count?: number;
+ };
+ const aggregationValue =
+ Sum ?? Average ?? Min ?? Max ?? Count ?? 'N/A';
+ return (
+
+ )
+ }
+ },
+
+ GroupSummaryCalculation: (args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ let aggregates: AggregateRowModel[] = gridInstance.aggregates as AggregateRowModel[];
+ if (aggregates.length > 0 && aggregates[1].columns && aggregates[1].columns.length > 0) {
+ aggregates[1].columns[0].type = data.properties.text;
+ aggregates[1].columns[0].groupFooterTemplate = gridAggregateTemplates.aggregateCustomization('groupFooter');
+ }
+ }
+ },
+
+ SummaryCalculation: (args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ let aggregates: AggregateRowModel[] = gridInstance.aggregates as AggregateRowModel[];
+ if (aggregates.length > 0 && aggregates[0].columns && aggregates[0].columns.length > 0) {
+ aggregates[0].columns[0].type = data.properties.text;
+ aggregates[0].columns[0].footerTemplate = gridAggregateTemplates.aggregateCustomization('footer');
+ }
+ }
+ },
+
+ footerCountTemplate: (props: AggregateTemplateContext): JSX.Element => {
+ return (
+
+
+
+ )}
+ previewRef = previewEle}>
+
+
+
+
+ Total Orders:
+
+ {(props as { Count?: number }).Count}
+
+
+
+ )
+ },
+
+ footerAvgTemplate: (props: any): JSX.Element => {
+ const displayValue = props.Average === " " || isNullOrUndefined(props.Average) ? 0 : Number(props.Average).toFixed(1);
+ return Avg Rating: {displayValue}
;
+ },
+
+ groupCaptionMaxTemplate: (props: AggregateTemplateContext): JSX.Element => {
+ return (
+
+ Min
+
+ ${((props as { Min?: number }).Min ?? 0).toFixed(2)}
+
+ Max
+
+ ${((props as { Max?: number }).Max ?? 0).toFixed(2)}
+
);
+ }
+
+ };
+
+ const menuItemMethods = {
+ gridLineValueChange: (args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ gridInstance.gridLines = data.properties.text;
+ }
+ },
+
+ htmlEncodeChange: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.headerText === 'Order ID') {
+ if (args.checked) {
+ col.disableHtmlEncode = false;
+ } else {
+ col.disableHtmlEncode = true;
+ }
+ }
+ });
+ gridInstance.refreshColumns();
+ }
+
+ }),
+
+ enableCheckBoxChange: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.field === 'Verified') {
+ col.displayAsCheckBox = args.checked;
+ }
+ });
+ gridInstance.refreshColumns();
+ }
+ }),
+
+ hideSpecifiedColumn: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.headerText === 'Verified') {
+ col.visible = args.checked;
+ gridInstance.refreshColumns();
+ }
+ });
+ }
+
+ }),
+
+ singleColumnSettingsTextWrap: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ gridInstance.allowTextWrap = args.checked;
+ }
+ }),
+
+ singleColumnSettingsClipMode: ((args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.field === "ShipAddress") {
+ col.clipMode = data.properties.text;
+ gridInstance.refreshColumns();
+ }
+ });
+ }
+ }),
+
+ frozenChange: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.headerText === 'Order ID') {
+ if (args.checked) {
+ col.isFrozen = true;
+ } else {
+ col.isFrozen = false;
+ }
+ }
+ });
+ }
+ }),
+
+ singleColumnSettingsFreeze: ((args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.headerText === "Commands" && data.properties.text === 'Right') {
+ col.freeze = data.properties.text;
+ gridInstance.refreshColumns();
+ }
+ });
+ }
+ }),
+
+ singleColumnSettingsDateFormat: ((args: ChangeEventArgs, data: any) => {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.field === 'OrderDate') {
+ col.format = data.properties.text;
+ gridInstance.refreshColumns();
+ }
+ });
+ }),
+
+ singleColumnSettingsHeaderTextAlign: ((args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.field === "Freight") {
+ col.headerTextAlign = data.properties.text;
+ }
+ });
+ gridInstance.refreshColumns();
+ }
+ }),
+
+ singleColumnSettingsCellTextAlign: ((args: ChangeEventArgs, data?: any) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.field === "Freight") {
+ col.textAlign = data.properties.text;
+ }
+ });
+ gridInstance.refreshColumns();
+ }
+ }),
+
+ enableColumnEditing: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12) {
+ col.allowEditing = args.checked;
+ }
+ });
+ }
+ }),
+
+ enableColumnFiltering: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12) {
+ col.allowFiltering = args.checked;
+ }
+ });
+ }
+ }),
+
+ enableColumnGrouping: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12 || col.index === 15) {
+ col.allowGrouping = args.checked;
+ }
+ });
+ }
+ }),
+
+ enableColumnReordering: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12) {
+ col.allowReordering = args.checked;
+ }
+ });
+ }
+ }),
+
+ enableColumnResize: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12 || col.index === 15) {
+ col.allowResizing = args.checked;
+ }
+ });
+ }
+ }),
+
+ enableColumnSearching: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12) {
+ col.allowSearching = args.checked;
+ }
+ });
+ }
+ }),
+
+ enableColumnSorting: ((args: ChangeEventArgs) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.index === 12 || col.index === 15) {
+ col.allowSorting = args.checked;
+ }
+ });
+ }
+ }),
+
+
+ singleColumnSettingsFormat: ((args: ChangeEventArgs, data: any) => {
+ if (gridInstance) {
+ let columns = gridInstance.getColumns();
+ columns.forEach((col) => {
+ if (col.field === 'Freight') {
+ col.format = data.properties.text;
+ gridInstance.refreshColumns();
+ }
+ });
+
+ const aggregateColumns = gridInstance.aggregates[0].columns;
+ aggregateColumns?.forEach((col) => {
+ if (col.field === "Freight") {
+ col.format = data.properties.text;
+ }
+ });
+ }
+ }),
+
+
+ handleFilterTypeChange: (value: any, dropRef: any) => {
+ const filterbarElement = document.getElementById("filterbar");
+ const barstatusElement = document.getElementById("barstatus");
+ const filterbarmodeElement = document.getElementById("filterbarmode");
+ const indicatorElement = document.getElementById("loadingindicator");
+ const infinitescrollingElement = document.getElementById("enableinfinitescrolling");
+ let filterbarCheckElement = filterbarElement?.querySelector('.e-checkbox-wrapper');
+ let barStatusCheckElement = barstatusElement?.querySelector('.e-checkbox-wrapper');
+ let infinitescrollingCheckElement = infinitescrollingElement?.querySelector('.e-checkbox-wrapper');
+
+ if (value === "Menu" || value === "Excel" || value === "CheckBox") {
+ filterbarCheckElement!.classList.add("e-checkbox-disabled");
+ filterbarCheckElement!.setAttribute("disabled", "true");
+ barStatusCheckElement!.classList.add("e-checkbox-disabled");
+ barStatusCheckElement!.setAttribute("disabled", "true");
+ dropRef['filterbarmode'].enabled = false;
+ filterbarmodeElement!.classList.add("e-disabled");
+ filterbarmodeElement!.setAttribute("disabled", "true");
+ if (value === "Excel" || value === "CheckBox") {
+ dropRef['loadingindicator'].enabled = true;
+ indicatorElement!.classList.remove("e-disabled");
+ indicatorElement!.removeAttribute("disabled");
+ infinitescrollingCheckElement!.classList.remove("e-checkbox-disabled");
+ infinitescrollingCheckElement!.removeAttribute("disabled");
+ } else {
+ if (value === "Menu") {
+ dropRef['loadingindicator'].enabled = false;
+ indicatorElement!.classList.add("e-disabled");
+ indicatorElement!.setAttribute("disabled", "true");
+ infinitescrollingCheckElement!.classList.add("e-checkbox-disabled");
+ infinitescrollingCheckElement!.setAttribute("disabled", "true");
+ }
+ }
+ } else {
+ filterbarCheckElement!.classList.remove("e-checkbox-disabled");
+ filterbarCheckElement!.removeAttribute("disabled");
+ barStatusCheckElement!.classList.remove("e-checkbox-disabled");
+ barStatusCheckElement!.removeAttribute("disabled");
+ dropRef['filterbarmode'].enabled = true;
+ filterbarmodeElement!.classList.remove("e-disabled");
+ filterbarmodeElement!.removeAttribute("disabled");
+ if (value === "FilterBar") {
+ dropRef['loadingindicator'].enabled = false;
+ indicatorElement!.classList.add("e-disabled");
+ indicatorElement!.setAttribute("disabled", "true");
+ infinitescrollingCheckElement!.classList.add("e-checkbox-disabled");
+ infinitescrollingCheckElement!.setAttribute("disabled", "true");
+ }
+
+ }
+ },
+
+
+ disableDropdownItem: (data: any, dropRef: any, id: string) => {
+ if (gridInstance.enableVirtualization || gridInstance.enableInfiniteScrolling) {
+ dropRef["editmode"].dataSource = dropdownDataSource.editModeModified;
+ dropRef["newrowposition"].enabled = false;
+ } else {
+ dropRef["editmode"].dataSource = dropdownDataSource.editMode;
+ dropRef["newrowposition"].enabled = true;
+ }
+ },
+
+ selectionTypeChange: (value: any, dropRef: any) => {
+ const selectionTypeItems = document.getElementById("simplemultirow");
+ const checkboxSelection = document.getElementById("checkboxonly");
+
+ const simpleMultiRowCheckbox = selectionTypeItems?.querySelector('.e-checkbox-wrapper') as HTMLElement;
+ const simpleMultiRowInput = selectionTypeItems?.querySelector('input[type="checkbox"]') as any;
+
+ const checkboxOnlyCheckbox = checkboxSelection?.querySelector('.e-checkbox-wrapper') as HTMLElement;
+ const checkboxOnlyInput = checkboxSelection?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+ const disableCheckbox = (checkbox: HTMLElement | null, input: HTMLInputElement | null) => {
+ checkbox?.classList.add("e-checkbox-disabled");
+ checkbox?.setAttribute("disabled", "true");
+ if (input) input.checked = false; // uncheck if disabled
+ };
+
+ const enableCheckbox = (checkbox: HTMLElement | null) => {
+ checkbox?.classList.remove("e-checkbox-disabled");
+ checkbox?.removeAttribute("disabled");
+ };
+
+ switch (value) {
+ case 'Single':
+ disableCheckbox(simpleMultiRowCheckbox, simpleMultiRowInput);
+ enableCheckbox(checkboxOnlyCheckbox);
+ if (!isNullOrUndefined(simpleMultiRowInput.ej2_instances)) {
+ simpleMultiRowInput.ej2_instances[0].checked = false;
+ gridInstance.selectionSettings.enableSimpleMultiRowSelection = false;
+ }
+ setCheckboxValues((prev) => {
+ prev.simplemultirow = false;
+ Object.keys(checkboxValues).forEach((prop) => {
+ checkboxValues[prop] = prev[prop];
+ });
+ return prev;
+ });
+ break;
+
+ case 'Multiple':
+ enableCheckbox(simpleMultiRowCheckbox);
+ if (dropRef['checkboxmodedefault'].value !== 'ResetOnRowClick') {
+ enableCheckbox(checkboxOnlyCheckbox);
+ }
+ break;
+
+ case 'Default':
+ enableCheckbox(checkboxOnlyCheckbox);
+ if (dropRef['selectiontype'].value === 'Single') {
+ disableCheckbox(simpleMultiRowCheckbox, simpleMultiRowInput);
+ } else {
+ enableCheckbox(simpleMultiRowCheckbox);
+ }
+ break;
+
+ case 'ResetOnRowClick':
+ disableCheckbox(simpleMultiRowCheckbox, simpleMultiRowInput);
+ disableCheckbox(checkboxOnlyCheckbox, checkboxOnlyInput);
+ gridInstance.selectionSettings.enableSimpleMultiRowSelection = false;
+ break;
+
+ default:
+ break;
+ }
+ },
+
+ handlePagingChange: (value: any, id: string, checkRef: any, eventName: string) => {
+ const setState = (keys: string[], prop: keyof HTMLInputElement, val: boolean) => {
+ keys.forEach(k => checkRef[k][prop] = val);
+ };
+
+ const disableAllEnableVirtual = () => {
+ setState(['autofill', 'paging', 'infinitescroll'], 'disabled', true);
+ checkRef['virtualization'].disabled = false;
+ checkRef['virtualization'].checked = true;
+ };
+
+ const enableAllAndCheckPaging = () => {
+ setState(['infinitescroll', 'paging', 'autofill'], 'disabled', false);
+ checkRef['paging'].checked = true;
+ };
+
+ if (eventName === 'Created') {
+ if (checkRef['paging'].checked) {
+ setState(['infinitescroll', 'virtualization'], 'disabled', true);
+ } else if (checkRef['virtualization'].checked) {
+ setState(['infinitescroll', 'autofill', 'paging'], 'disabled', true);
+ checkRef['paging'].checked = false;
+ } else if (checkRef['infinitescroll'].checked) {
+ setState(['virtualization', 'autofill', 'paging'], 'disabled', true);
+ checkRef['paging'].checked = false;
+ } else {
+ enableAllAndCheckPaging();
+ }
+ } else {
+ if (id === 'paging') {
+ if (!checkRef['paging'].checked) {
+ disableAllEnableVirtual();
+ } else {
+ setState(['infinitescroll', 'virtualization'], 'disabled', true);
+ }
+ }
+
+ if (id === 'virtualization') {
+ if (value) {
+ setState(['infinitescroll', 'autofill', 'paging'], 'disabled', true);
+ checkRef['paging'].checked = false;
+ } else {
+ enableAllAndCheckPaging();
+ }
+ }
+
+ if (id === 'infinitescroll') {
+ if (value) {
+ setState(['virtualization', 'autofill', 'paging'], 'disabled', true);
+ checkRef['paging'].checked = false;
+ } else {
+ enableAllAndCheckPaging();
+ }
+ }
+ }
+
+ setCheckboxValues((prev) => {
+ prev.paging = checkRef['paging'].checked;
+ prev.enableinfinitescrolling = checkRef['infinitescroll'].checked;
+ prev.virtualization = checkRef['virtualization'].checked;
+ Object.keys(checkboxValues).forEach((prop) => {
+ checkboxValues[prop] = prev[prop];
+ });
+ return prev;
+ });
+ }
+ };
+
+ const menuItemProperties = {
+ gridLineProperties: [
+ {
+ iconCss: 'e-icons e-border-all',
+ items: [
+ { text: 'Both', id: 'GridLine Both', method: menuItemMethods.gridLineValueChange, checkbox: true },
+ { text: 'Default', id: 'GridLine Default', method: menuItemMethods.gridLineValueChange, checkbox: false },
+ { text: 'Horizontal', id: 'GridLine Horizontal', method: menuItemMethods.gridLineValueChange, checkbox: false },
+ { text: 'Vertical', id: 'GridLine Vertical', method: menuItemMethods.gridLineValueChange, checkbox: false },
+ { text: 'None', id: 'GridLine None', method: menuItemMethods.gridLineValueChange, checkbox: false }
+ ],
+ },
+ ],
+ aggregateValues: [
+ {
+ text: 'Sum',
+ items: [
+ { text: 'Sum', id: 'Aggregate Sum', checkbox: true, method: gridAggregateTemplates.SummaryCalculation },
+ { text: 'Average', id: 'Aggregate Average', checkbox: false, method: gridAggregateTemplates.SummaryCalculation },
+ { text: 'Min', id: 'Aggregate Min', checkbox: false, method: gridAggregateTemplates.SummaryCalculation },
+ { text: 'Max', id: 'Aggregate Max', checkbox: false, method: gridAggregateTemplates.SummaryCalculation },
+ { text: 'Count', id: 'Aggregate Count', checkbox: false, method: gridAggregateTemplates.SummaryCalculation }
+ ],
+ },
+ ],
+ aggregateGroupValues: [
+ {
+ text: 'Sum',
+ items: [
+ { text: 'Sum', id: 'Group Aggregate Sum', checkbox: true, method: gridAggregateTemplates.GroupSummaryCalculation },
+ { text: 'Average', id: 'Group Aggregate Average', checkbox: false, method: gridAggregateTemplates.GroupSummaryCalculation },
+ { text: 'Min', id: 'Group Aggregate Min', checkbox: false, method: gridAggregateTemplates.GroupSummaryCalculation },
+ { text: 'Max', id: 'Group Aggregate Max', checkbox: false, method: gridAggregateTemplates.GroupSummaryCalculation },
+ { text: 'Count', id: 'Group Aggregate Count', checkbox: false, method: gridAggregateTemplates.GroupSummaryCalculation }
+ ],
+ },
+ ],
+ columnMenuDateFormatProperties: [
+ {
+ text: 'Column Date',
+ iconCss: 'e-icons e-settings icon',
+ items: [
+ { text: 'yMMM', id: 'Date Format yMMM', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
+ { text: 'dd/MM/yyyy', id: 'Date Format dd/MM/yyyy', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: true },
+ { text: 'dd.MM.yyyy', id: 'Date Format dd.MM.yyyy', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
+ { text: 'dd/MM/yyyy hh:mm a', id: 'Date Format dd/MM/yyyy hh:mm a', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false },
+ { text: 'MM/dd/yyyy hh:mm:ss a', id: 'Date Format MM/dd/yyyy hh:mm:ss a', method: menuItemMethods.singleColumnSettingsDateFormat, checkbox: false }
+ ],
+ },
+ ],
+ columnMenuFormatProperties: [
+ {
+ text: 'Column Number',
+ iconCss: 'e-icons e-settings icon',
+ items: [
+ {
+ text: 'Header Text Alignment',
+ items: [
+ { text: 'Left', id: 'Header Left', method: menuItemMethods.singleColumnSettingsHeaderTextAlign, checkbox: false },
+ { text: 'Right', id: 'Header Right', method: menuItemMethods.singleColumnSettingsHeaderTextAlign, checkbox: true },
+ { text: 'Center', id: 'Header Center', method: menuItemMethods.singleColumnSettingsHeaderTextAlign, checkbox: false },
+ { text: 'Justify', id: 'Header Justify', method: menuItemMethods.singleColumnSettingsHeaderTextAlign, checkbox: false },
+ ]
+ },
+ {
+ text: 'Cell Text Alignment',
+ items: [
+ { text: 'Left', id: 'Cell Left', method: menuItemMethods.singleColumnSettingsCellTextAlign, checkbox: false },
+ { text: 'Right', id: 'Cell Right', method: menuItemMethods.singleColumnSettingsCellTextAlign, checkbox: true },
+ { text: 'Center', id: 'Cell Center', method: menuItemMethods.singleColumnSettingsCellTextAlign, checkbox: false },
+ { text: 'Justify', id: 'Cell Justify', method: menuItemMethods.singleColumnSettingsCellTextAlign, checkbox: false },
+ ]
+ },
+ {
+ text: 'Data Operations',
+ items: [
+ { text: 'Enable Editing', method: menuItemMethods.enableColumnEditing, singlecheckbox: true },
+ { text: 'Enable Filtering', method: menuItemMethods.enableColumnFiltering, singlecheckbox: true },
+ { text: 'Enable Grouping', method: menuItemMethods.enableColumnGrouping, singlecheckbox: true },
+ { text: 'Enable Reordering', method: menuItemMethods.enableColumnReordering, singlecheckbox: true },
+ { text: 'Enable Resizing', method: menuItemMethods.enableColumnResize, singlecheckbox: true },
+ { text: 'Enable Searching', method: menuItemMethods.enableColumnSearching, singlecheckbox: true },
+ { text: 'Enable Sorting', method: menuItemMethods.enableColumnSorting, singlecheckbox: false }
+ ]
+ },
+ {
+ text: 'Format',
+ items: [
+ { text: 'p0', id: 'Number Format p0', method: menuItemMethods.singleColumnSettingsFormat, checkbox: false },
+ { text: 'p1', id: 'Number Format p1', method: menuItemMethods.singleColumnSettingsFormat, checkbox: false },
+ { text: 'n0', id: 'Number Format n0', method: menuItemMethods.singleColumnSettingsFormat, checkbox: false },
+ { text: 'n1', id: 'Number Format n1', method: menuItemMethods.singleColumnSettingsFormat, checkbox: false },
+ { text: 'n2', id: 'Number Format n2', method: menuItemMethods.singleColumnSettingsFormat, checkbox: false },
+ { text: 'C2', id: 'Number Format C2', method: menuItemMethods.singleColumnSettingsFormat, checkbox: true }
+ ]
+ }
+ ],
+ },
+ ],
+ columnMenuCheckboxProperties: [
+ {
+ text: 'Column Verified',
+ iconCss: 'e-icons e-settings icon',
+ items: [
+ { text: 'Display as checkbox', method: menuItemMethods.enableCheckBoxChange, singlecheckbox: true },
+ { text: 'Visible', method: menuItemMethods.hideSpecifiedColumn, singlecheckbox: true }
+ ],
+ },
+ ],
+ columnMenuProperties: [
+ {
+ text: 'Column Name',
+ iconCss: 'e-icons e-settings icon',
+ items: [
+ {
+ text: 'Clip Mode',
+ items: [
+ { text: 'Clip', id: 'ClipMode_Clip', method: menuItemMethods.singleColumnSettingsClipMode, checkbox: false },
+ { text: 'Ellipsis', id: 'ClipMode_Ellipsis', method: menuItemMethods.singleColumnSettingsClipMode, checkbox: false },
+ { text: 'EllipsisWithTooltip', id: 'ClipMode_EllipsisWithTooltip', method: menuItemMethods.singleColumnSettingsClipMode, checkbox: true },
+ ]
+ },
+ { text: 'Enable Resizing', method: menuItemMethods.enableColumnResize, singlecheckbox: true },
+ { text: 'Enable Grouping', method: menuItemMethods.enableColumnGrouping, singlecheckbox: true },
+ { text: 'Enable Text Wrap', method: menuItemMethods.singleColumnSettingsTextWrap, singlecheckbox: false },
+ { text: 'Enable Sorting', method: menuItemMethods.enableColumnSorting, singlecheckbox: false }
+ ],
+ },
+ ],
+
+ columnMenuFreezeProperties: [
+ {
+ text: 'Column Name',
+ iconCss: 'e-icons e-settings icon',
+ items: [
+ { text: 'Display as HTML encode', method: menuItemMethods.htmlEncodeChange, singlecheckbox: true },
+ { text: 'Enable Frozen', method: menuItemMethods.frozenChange, singlecheckbox: true },
+ { separator: true },
+ {
+ text: 'Freeze',
+ items: [
+ { text: 'Left', id: 'Freeze Left', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: true },
+ { text: 'Right', id: 'Freeze Right', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: false },
+ { text: 'Fixed', id: 'Freeze Fixed', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: false },
+ { text: 'None', id: 'Freeze None', method: menuItemMethods.singleColumnSettingsFreeze, checkbox: false },
+ ]
+ }
+ ],
+ },
+ ],
+
+ };
+
+ const propertyDescription: { [key: string]: string } = {
+ "Enable Editing": "Allows editing the cell content in this specific column. If true, the user can modify the cell value in-place.",
+ "Enable Reordering": "Allows the user to drag and reorder this column among others in the grid.",
+ "Enable Searching": "If enabled, this column's values will be included in global search operations (like search textbox above the grid).",
+ "Enable Resizing": "Enables users to adjust the width of the column by dragging its header edge.",
+ "Enable Sorting": "The allowSorting property enables the sorting of grid records when clicking on the column header.",
+ "Enable Multi-Column Sorting": "The allowMultiSorting property enables the user to sort multiple column in the grid.",
+ "Enable Filtering": "The allowFiltering property enables the filter bar to be displayed.",
+ "Enable Grouping": "The allowGrouping property allows dynamically grouping or ungrouping columns. Grouping can be done by dragging and dropping columns from the column header to the group drop area",
+ "Enable Column Reordering": "The allowReordering property enables the reordering of grid columns by dragging and dropping columns from one index to another",
+ "Enable Column Resizing": "The allowResizing property enables the resizing of grid columns.",
+ "Enable Paging": "The allowPaging property enables a pager control to be rendered at the bottom of the grid, allowing you to navigate through different pages of data.",
+ "Enable Immutable Mode": "The enableImmutableMode property is set to true, the grid will reuse old rows if it exists in the new result instead of full refresh while performing the grid actions.",
+ "Allow Selection": "Various features enable selection processing in the Grid, including drag, hover, and focus interactions.",
+ "Enable Row Drag and Drop": "The allowRowDragAndDrop property is set to true, you can drag and drop grid rows at another grid",
+ "Enable Autofill": "When the enableAutoFill property is enabled, an auto-fill icon will be displayed when cells are selected for copying.",
+ "Show Column Menu": "The showColumnMenu property is set to true, it will enable the column menu options in each columns.",
+ "Allow Text Wrap": "The allowTextWrap property is set to true, then text content will wrap to the next line when its text content exceeds the width of the Column Cells.",
+ "Auto-Fit Column Content": "The autoFit property, when enabled, automatically adjusts the width of columns based on the given width.",
+ "Enable Alternate Row Styling": "The enableAltRow property is set to true, the grid will render with e-altrow CSS class to the alternative tr elements.",
+ "Enable Row Hover Effect": "The enableHover property is set to true, the row hover is enabled in the Grid.",
+ "Enable Header Focus": "The enableHeaderFocus is set to true, then header element will be focused when focus moves to grid.",
+ "Enable Excel Export": "Export the Grid to Excel.",
+ "Enable PDF Export": "Export the Grid to PDF",
+ "Enable Virtual Scrolling": "The enableVirtualization property allows the Grid to render only the rows visible within the viewport and load subsequent rows on vertical scrolling. This helps in efficiently handling large datasets in the Grid.",
+ "Enable Infinite Scrolling": "The enableInfiniteScrolling property is set to true, then the data will be loaded in Checkbox filter Popup content, when the scrollbar reaches the end. This helps to load large dataset in Checkbox filter Popup content.",
+ "Show Group Drop Area": "The showDropArea property makes the group drop area element visible at the top of the Grid.",
+ "Show Grouped Columns": "The showGroupedColumn property is set to false, it hides the grouped column after grouping.",
+ "Show Toggle Button": "The showToggleButton property is set to true, then the toggle button will be showed in the column headers which can be used to group or ungroup columns by clicking them.",
+ "Show Ungroup Icon in Header": "The showUngroupButton property is set to false, then ungroup button is hidden in dropped element. It can be used to ungroup the grouped column when click on ungroup button.",
+ "Enable Case Sensitivity": "The enableCaseSensitivity property is set to true then searches grid records with exact match based on the filter operator. It will have no effect on number, boolean and Date fields.",
+ "Ignore accent": "The ignoreAccent property is set to true, then filter ignores the diacritic characters or accents while filtering or searching.",
+ "Filter Type": "It provides various filter options such as menu, Excel-like filtering, filter bar, and checkboxes to refine and search data efficiently.",
+ "Show Filter Bar Operator": "The showFilterBarOperator property is set to true, then it renders the dropdownlist component to select the operator in filterbar input.",
+ "Show Filter Bar Status": "The filterBarStatus propperty is set to true, shows or hides the filtered status message on the pager.",
+ "Filter Bar Mode": "Filter bar modes define how filtering is triggered in the grid, either manually on Enter key press (OnEnter) or automatically after a delay (Immediate).",
+ "Loading Indicator Type": "Display a loading indicator while the data is being loaded.",
+ "Enable Toggle Selection": "The enableToggle property is set to true, then the user can able to perform toggle for the selected row.",
+ "Enable Column Selection": "The allowColumnSelection is set to true, then the user can able to select the columns.",
+ "Selection Type": "Specifies the selection types: Single (selects one row or cell) and Multiple (selects multiple rows or cells).",
+ "Enable Simple Multi Row Selection": "The enableSimpleMultiRowSelection property is set to true, then the user can able to perform multiple row selection with single clicks.",
+ "Allow Checkbox Selection Only": "The checkboxOnly property is set to true, then the Grid selection is allowed only through checkbox.",
+ "Checkbox Selection Mode": "The Checkbox selection mode controls how rows are selected: 'Default' allows selecting multiple rows one by one, while 'ResetOnRowClick' clears previous selections and selects only the current row.",
+ "Edit Mode": "Specifies the editing mode for the grid.",
+ "Allow Adding Row": "The allowAdding property is set to true, new records can be added to the Grid.",
+ "Allow Next Row Edit": "The allowNextRowEdit is set to true, editing is done to next row. By default allowNextRowEdit is set to false.",
+ "New Row Position": "Specifies where a new row is added in the grid.",
+ "Allow Editing Row": "The allowEditing is set to true, values can be updated in the existing record.",
+ "Edit on Double Click": "The allowEditOnDblClick is set to false, Grid will not allow editing of a record on double click.",
+ "Allow Delete Row": "The allowDeleting property is set to true, existing record can be deleted from the Grid.",
+ "Show Confirmation Dialog": "The showConfirmDialog is set to false, confirm dialog does not show when batch changes are saved or discarded.",
+ "Show Delete Confirmation Dialog": "The showDeleteConfirmDialog is set to true, confirm dialog will show delete action. You can also cancel delete command.",
+ "Localization": "Localization is the process of adapting software, content, or applications to a specific region, language, or culture by translating text, formatting data, and modifying UI elements to align with local preferences.",
+ "Theme": "A theme is a predefined set of visual styles, including colors, fonts, and layout, that determines the look and feel of an application or website. It helps create a consistent design across the entire interface.",
+ "Interaction Type": "Interaction types are the various ways users engage with a system, such as clicking, typing, or touching.",
+ "Enable RTL": "RTL (Right-to-Left) refers to the text direction used in languages like Arabic and Hebrew, where text is read and written starting from the right side of the page.",
+ "Aggregate_Sum": "Calculates the total of all values in the column.",
+ "Export": "Export the data as a PDF or Excel file using the available export properties",
+ "Scrolling": "To enhance data loading and navigation in the Grid.",
+ "Alignment": "Alignment of the columns header and cell contents.",
+ "Data Operations": "Data operations in the Grid help manage and organize data through sorting, filtering, grouping, and paging.",
+ "Aggregate_Average": "Computes the mean of all numeric values in the column.",
+ "Aggregate_Min": "Displays the smallest value in the column.",
+ "Aggregate_Max": "Displays the largest value in the column.",
+ "Aggregate_Count": "Shows the number of records in the column.",
+ "Group_Aggregate_Sum": "Calculates the total of all values in the column.",
+ "Group_Aggregate_Average": "Computes the mean of all numeric values in the column.",
+ "Group_Aggregate_Min": "Displays the smallest value in the column.",
+ "Group_Aggregate_Max": "Displays the largest value in the column.",
+ "Group_Aggregate_Count": "Shows the number of records in the column.",
+ "Allow selection": "The allowSelection property is set to true, it allows selection of (highlight row) Grid records by clicking it",
+ "Type": "Specifies the available filtering types, determining how data is filtered in the grid.",
+ "Clip Mode": "Specifies how overflowed cell content is displayed in the grid.",
+ "Freeze": "Specifies the column freeze direction in the grid.",
+ "Header text alignment": "Define the alignment of column header which is used to align the text of column header.",
+ "Cell text alignment": "Defines the alignment of the column in both header and content cells.",
+ "Searching": "The allowSearching property is set to false, then it disables Searching of a particular column. By default all columns allow Searching.",
+ "Display as HTML encode": "The disableHtmlEncode property is set to true, it encodes the HTML of the header and content cells.",
+ "Format": "Formats the displayed value without altering the original data. Supports standard and custom number or date formats.",
+ "Group by format": "The enableGroupByFormat property is set to true, then it groups the particular column by formatted values. By default no columns are group by format.",
+ "Display as checkbox": "The displayAsCheckBox property is set to true, it displays the column value as a check box instead of Boolean value.",
+ "Visible": "Controls column visibility in the grid. When visible is set to false, the column is hidden. By default, all columns are shown.",
+ "Operator": "Defines the search operator for Column Chooser.",
+ "Default": "This is the default checkboxMode, allowing users to select multiple rows by clicking them individually.",
+ "ResetOnRowClick": "In ResetOnRowClick mode, clicking a row resets the previously selected row. Multiple rows can be selected using the CTRL or SHIFT key.",
+ "Single": "Allows selection of only a row or a cell.",
+ "Multiple": "Allows selection of multiple rows or cells.",
+ "Normal": "Normal mode allows inline editing of a single row at a time.",
+ "Dialog": "Dialog opens a pop-up dialog for editing the selected row",
+ "Batch": "Batch enables multiple row edits before saving changes in bulk.",
+ "Top": "Inserts the new row at the beginning of the grid.",
+ "Bottom": "Adds the new row at the end of the grid.",
+ "ClipMode_Clip": "Truncates the cell content when it overflows its area.",
+ "ClipMode_Ellipsis": "Displays ellipsis when the cell content overflows its area.",
+ "ClipMode_EllipsisWithTooltip": "Displays ellipsis when the cell content overflows its area also it will display tooltip while hover on ellipsis applied cell.",
+ "ClipMode": "Defines the cell content’s overflow mode",
+ "Enable Frozen": "To freeze a specific column in the Grid, set the isFrozen property of that column to true.",
+ "Freeze_Left": "Freeze the column at left side.",
+ "Freeze_Right": "Freeze the column at right side.",
+ "Freeze_Fixed": "Freeze the column at center.",
+ "Freeze_None": "Does not freeze the column.",
+ "Header_Center": "Defines center alignment of the header text within the column.",
+ "Header_Left": "Defines justify alignment of the header text within the column.",
+ "Header_Right": "Defines center alignment of the header text within the column.",
+ "Header_Justify": "Defines justify alignment of the header text within the column.",
+ "Cell_Center": "Defines center alignment of the content text within the cell.",
+ "Cell_Justify": "Defines justify alignment of the content text within the cell.",
+ "Cell_Left": "Defines left alignment of the content text within the cell.",
+ "Cell_Right": "Defines right alignment of the content text within the cell.",
+ "Number_Format_p0": "The number is converted to percentage with 0 decimal place",
+ "Number_Format_p1": "The number is converted to percentage with 1 decimal place",
+ "Number_Format_n0": "The number is rounded to 0 decimal place",
+ "Number_Format_n1": "The number is rounded to 1 decimal place",
+ "Number_Format_n2": "The number is rounded to 2 decimal place",
+ "Number_Format_C2": "The currency symbol is appended to number and number is rounded to 2 decimal place",
+ "Date_Format_yMMM": "Displays year and abbreviated month name",
+ "Date_Format_dd/MM/yyyy": "Common date format (day-first) used in the UK, India, etc.",
+ "Date_Format_dd.MM.yyyy": "European format using dots as separators",
+ "Date_Format_dd/MM/yyyy_hh:mm_a": "Displays date with time in 12-hour format",
+ "Date_Format_MM/dd/yyyy_hh:mm:ss_a": "US format with full timestamp and AM/PM",
+ "Spinner": "Shows a rotating loader to indicate processing",
+ "Shimmer": "Displays a shimmering effect as a placeholder until data loads.",
+ "OnEnter": "Initiates filter operation after Enter key is pressed.",
+ "Immediate": "Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.",
+ "Menu": "Specifies the filter type as menu.",
+ "Checkbox": "Specifies the filter type as checkbox.",
+ "FilterBar": "Specifies the filter type as filterbar.",
+ "Excel": "Specifies the filter type as checkbox.",
+ "Selection type": "Selection types include Single (selects one row or cell) and Multiple (selects multiple rows or cells).",
+ "Small": " Compact rows with minimal spacing (25px) for a tighter layout.",
+ "Medium": "Balanced spacing (36px) for better readability and a comfortable view.",
+ "Large": "Wide spacing (60px) for a clear and spacious data display.",
+ "GridLine_Default": "Displays grid lines based on the theme.",
+ "GridLine_Both": "Displays both the horizontal and vertical grid lines.",
+ "GridLine_Vertical": "Displays the vertical grid lines only.",
+ "GridLine_Horizontal": "Displays the horizontal grid lines only.",
+ "GridLine_None": "No grid lines are displayed.",
+ "Persist Selection": "The persistSelection is set to true, the Grid selection is maintained across all operations, and at least one column must be enabled as the primary key to persist the selection.",
+ "Enable Text Wrap": "When the cell/header content exceeds the column width, it wraps onto multiple lines to ensure the entire text is visible."
+ };
+
+ const menuItemTemplates = {
+
+ gridLineCustomization: () => {
+ return (
+
+
+ )
+ },
+
+ buttonClick: (args: any) => {
+ document.getElementById('dialogbox')!.style.left = `${args.clientX}px`;
+ let topPosition = document.getElementById('search_box')!.getBoundingClientRect().height + args.clientY - 10;
+ document.getElementById('dialogbox')!.style.top = `${topPosition}px`;
+ const dialog = document.getElementById('dialogbox');
+ const gridContainer = document.getElementById('overviewgrid');
+ const viewportWidth = window.innerWidth;
+ if (!dialog) return;
+ const dialogWidth = dialog.offsetWidth;
+ const containerRect = gridContainer?.getBoundingClientRect();
+ const maxLeft = Math.min(viewportWidth, containerRect?.right || viewportWidth) - dialogWidth;
+ let left = args.clientX;
+ if (left > maxLeft) {
+ left = maxLeft - 10;
+ }
+ dialog.style.left = `${left}px`;
+ setStatus(true);
+ dialogInstance?.show();
+ },
+
+ textValue: (args: ChangedEventArgs) => {
+ setSearchText(() => {
+ searchText = args.value ?? '';
+ return searchText;
+ });
+ },
+
+ dialogCreated: () => {
+ dialogInstance?.hide();
+ },
+
+ dialogClose: () => {
+ setStatus(false);
+ },
+
+ dialogOpen: () => {
+ setStatus(true);
+ },
+
+ columnFieldsChange: (args: any) => {
+ setSelectedField(() => {
+ selectedField = args.value;
+ return selectedField;
+ });
+ },
+
+ operatorValueChange: (args: any) => {
+ setSelectedOperator(() => {
+ selectedOperator = args.value;
+ return selectedOperator;
+ });
+ },
+
+ caseSensitiveChange: (args: any) => {
+ setCaseSensitiveChecked(() => {
+ caseSensitiveChecked = args.checked;
+ return caseSensitiveChecked;
+ });
+ },
+
+ ignoreAccentChange: (args: any) => {
+ setIgnoreAccentChecked(() => {
+ ignoreAccentChecked = args.checked;
+ return ignoreAccentChecked;
+ });
+ },
+
+ createListBox: () => {
+ return (
+
+
+ )
+ },
+
+ chipClick: (args: any) => {
+ if (!gridInstance) return;
+ if (args.target.textContent === "Clear filter") {
+ gridInstance.clearFiltering();
+ gridInstance.search("");
+ textboxInstance.value = "";
+ dialogInstance!.hide();
+ } else if (args.target.textContent === "Search") {
+ if (selectedField && selectedOperator) {
+ gridInstance.searchSettings = {
+ fields: [selectedField],
+ operator: selectedOperator,
+ ignoreCase: caseSensitiveChecked,
+ ignoreAccent: ignoreAccentChecked,
+ key: searchText,
+ };
+ if (!caseSensitiveChecked) {
+ gridCommonTemplates.emptyMessageTemplate();
+ }
+ } else {
+ console.warn("Search field and operator are required.");
+ }
+ }
+ },
+
+
+ createDialogFooter: () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ },
+
+ menuTextboxSearch: () => {
+ return (
+
+ {
+ if (text) {
+ textboxInstance = text;
+ }
+ }}
+ >
+ dialogInstance = dialog}
+ id="dialogbox"
+ enableRtl={enableRtlListView}
+ created={menuItemTemplates.dialogCreated}
+ footerTemplate={menuItemTemplates.createDialogFooter}
+ content={menuItemTemplates.createListBox}
+ showCloseIcon={false}
+ visible={status}
+ width={'300px'}
+ open={menuItemTemplates.dialogOpen}
+ close={menuItemTemplates.dialogClose}
+ height={'228px'}
+ >
+
+
+ )
+ },
+
+ getLabelElement: (switchId: string | GridPropertiesGroup, treeViewElement: Element | null): HTMLElement | null => {
+ let labelElement: HTMLElement | null = null;
+ if (typeof switchId === "object" && !isNullOrUndefined(switchId) && Array.isArray(switchId["items"])) {
+ switchId["items"].some((item: any) => {
+ labelElement = treeViewElement!.querySelector('label') as HTMLElement;
+ return !!labelElement;
+ });
+ }
+ return labelElement;
+ },
+
+
+ beforeOpen: ((args: BeforeOpenEventArgs, switchId: string | any): void => {
+ const targetElement = args.target as HTMLElement;
+ const treeViewElement = targetElement.closest('.treeviewdiv');
+ let labelElement: HTMLElement | null;
+ let description: string;
+ let labelText: string;
+
+ if (treeViewElement) {
+ if (switchId && Array.isArray(switchId["items"])) {
+ labelElement = menuItemTemplates.getLabelElement(switchId, targetElement.parentElement);
+ labelText = labelElement!.innerText;
+ description = labelElement ? propertyDescription[labelText] : '';
+ } else if (switchId.includes('switch')) {
+ labelElement = targetElement.parentElement!.querySelector('label') as HTMLElement;
+ labelText = labelElement!.innerText;
+ description = labelElement ? propertyDescription[labelText] : '';
+ } else if (switchId.includes('check')) {
+ labelElement = targetElement.parentElement!.querySelector('label') as HTMLElement;
+ labelText = switchId.split('_check')[0];
+ description = labelElement ? propertyDescription[labelText] : '';
+ }
+ else {
+ labelElement = treeViewElement.querySelector(`.${switchId?.replace(/\s+/g, "")}-custom-label`)?.querySelector('label') as HTMLElement;
+ labelText = switchId;
+ description = labelElement ? propertyDescription[labelText] : '';
+ }
+ if (labelElement === null) {
+ labelElement = treeViewElement.querySelector('.e-checkbox-wrapper label .e-label') as HTMLElement;
+ description = labelElement ? propertyDescription[labelElement.innerText.trim()] : '';
+ }
+ if (description && tooltipRefs.current[labelText]) {
+ tooltipRefs.current[labelText]!.content = description;
+ }
+ }
+ }),
+
+ changeCheckBox: (args: ChangeEventArgs, checkId: string, checkRefs: any) => {
+ setCheckedStates((prevState) => {
+ const newState = {
+ ...prevState,
+ [checkId]: args.checked,
+ };
+ checkedStates = newState;
+
+ // Common function to update group checkboxes by prefix
+ const updateGroupCheckboxes = (prefix: string) => {
+ if (checkId.includes(prefix)) {
+ const checkInstance = Object.fromEntries(
+ Object.entries(checkRefs.current).filter(([key, _]) =>
+ key.startsWith(prefix)
+ )
+ );
+
+ Object.entries(checkInstance).forEach(([id, ref]: [string, any]) => {
+ const isChecked = id === checkId ? args.checked : false;
+ if (ref && typeof ref.checked !== "undefined") {
+ ref.checked = isChecked;
+ }
+ newState[id] = isChecked;
+ });
+ }
+ };
+
+ // Update based on different groups single check box selection
+ ['Header', 'Cell', 'GridLine', 'Number_Format', 'Date_Format', 'Aggregate', 'ClipMode', 'Group_Aggregate'].forEach(prefix => {
+ if (checkId.includes(prefix)) {
+ updateGroupCheckboxes(prefix);
+ }
+ });
+
+ return newState;
+ });
+ },
+
+ changeSwitch: (args: ChangeEventArgs, switchId: string, data: any) => {
+ setSwitchStates((prevState) => {
+ const newState = {
+ ...prevState,
+ [switchId]: args.checked,
+ };
+ switchStates = newState;
+ return newState;
+ });
+ },
+
+ menuSwitchTemplate: (data: any) => {
+ if (!isNullOrUndefined(data.properties.iconCss)) {
+ return (
+
+
);
+ }
+ else if (!isNullOrUndefined(data.singlecheckbox)) {
+ let switchId = data.properties.text.replace(/\s/g, "_") + "_switch";
+ return (
+
+ {
+ if (t) tooltipRefs.current[data.properties.text] = t;
+ }} windowCollision={true} mouseTrail={true}
+ target='.single-column-exclamation-container' enableRtl={enableRtlListView} position="RightCenter" beforeOpen={(args) => menuItemTemplates.beforeOpen(args, switchId)} >
+
+
+ );
+ }
+ else if (!isNullOrUndefined(data.checkbox)) {
+ let checkId = data.properties.id.replace(/\s/g, "_") + "_check";
+ return (
+
+ {
+ if (args.event.target.innerText !== 'Visible') {
+ menuItemTemplates.changeSwitch(args, switchId, data);
+ }
+ data.method(args);
+ }}
+ checked={switchStates[switchId] ?? data.singlecheckbox}
+ />
+
+
+
+
+
+ {
+ if (t) tooltipRefs.current[data.properties.id.replace(/\s/g, "_")] = t;
+ }} windowCollision={true} mouseTrail={true}
+ target='.single-column-exclamation-container' enableRtl={enableRtlListView} position="RightCenter" beforeOpen={(args) => menuItemTemplates.beforeOpen(args, checkId)} >
+ {
+ if (instance) {
+ checkRefs.current[checkId] = instance;
+ }
+ }}
+ label={data.properties.text} cssClass='custom-checkbox'
+ disabled={data.disable}
+ change={(args) => {
+ menuItemTemplates.changeCheckBox(args, checkId, checkRefs);
+ data.method(args, data);
+ }} checked={checkedStates[checkId] ?? data.checkbox} />
+
+
+
+ );
+ }
+ else {
+ return (
+
+
+
+
);
+ }
+ },
+ }
+
+ const gridFilterTemplates = {
+ filterTemplate: () => {
+ return (
+
+ )
+ },
+
+ templateOptionsNumericTextBox: {
+ create: () => {
+ numericElement = document.createElement('input');
+ return numericElement;
+ },
+ write: (args: any) => {
+ const uniqueFreightValues = Array.from(new Set((employeeDetails as { Freight: number }[]).map(emp => emp.Freight))).map(freight => ({ Freight: freight }));
+ const freightNumbers = uniqueFreightValues.map(obj => obj.Freight);
+ const minFreight = Math.floor(Math.min(...freightNumbers));
+ const maxFreight = Math.floor(Math.max(...freightNumbers));
+ const datePickerObj = new NumericTextBox({
+ cssClass: 'e-fltrtemp-focus',
+ min: minFreight,
+ max: maxFreight,
+ format:'n0',
+ enableRtl: enableRtlListView,
+ change: gridFilterTemplates.handleFilterChange,
+ });
+ datePickerObj.appendTo(numericElement);
+ },
+ },
+
+ templateOptionsDatePicker: {
+ create: () => {
+ dateElement = document.createElement('input');
+ return dateElement;
+ },
+ write: (args: any) => {
+ const datePickerObj = new DatePicker({
+ value: new Date(args.column.field),
+ placeholder: 'Select the Order Date',
+ enableRtl: enableRtlListView,
+ change: gridFilterTemplates.handleFilterChange,
+ });
+ datePickerObj.appendTo(dateElement);
+ },
+ },
+
+ createInputElement: () => createElement('input'),
+
+ getUniqueFieldValues: (data: any[], field: string): any[] => {
+ const uniqueSet = new Set(data.map(item => item[field]));
+ return Array.from(uniqueSet).map(value => ({ [field]: value }));
+ },
+
+ createAutoCompleteFilter: (placeholder: string, dataSource: any[], appendElement: HTMLElement, options?: Partial
+
+
+
+
+ {gridProperties.map((propertyFields: any) => (
+
+ );
+ },
+
+ trackingChipTemplate: (props: Orders): JSX.Element => {
+ return (
+
+ {
+ if (propertyFields && Array.isArray(propertyFields["items"])) {
+ propertyFields["items"].forEach((item: any) => {
+ if (t) tooltipRefs.current[item.label] = t;
+ });
+ } else {
+ if (t) tooltipRefs.current[propertyFields.label] = t;
+ }
+ }} windowCollision={true} mouseTrail={true}
+ target='.exclamation-container' enableRtl={enableRtlListView} position="RightCenter" beforeOpen={(args) => menuItemTemplates.beforeOpen(args, propertyFields.label || propertyFields)}>
+ {(() => {
+ return (
+
+
+ ))}
+
+
+ );
+ })()}
+
+ {/* Group Header */}
+
+ {/* Render Checkboxes or Dropdown for Group */} + {propertyFields.items.map((item: any) => ( +
+ {propertyFields.groupField}
+ + {/* Render Checkboxes or Dropdown for Group */} + {propertyFields.items.map((item: any) => ( +
+ {item.type === "dropdown" ? (
+ // created div element for the dropdown list element
+
+ ) : ( +
+
+ ))}
+
+ {/* created div element for the dropdown label element */}
+
+ ) : item.type === "Separator" ? (
+ /* Separator Element */
+
+ {/* created dropdown label value */}
+
+
+ {/* created div element for the icon symbol */}
+
+
+
+ {/* created dropdown component */}
+
+ {
+ if (instance) {
+ dropdownRefs.current[item.id] = instance;
+ }
+ }}
+ itemTemplate={item.itemTemplate}
+ valueTemplate={item.valueTemplate}
+ dataSource={item.dataSource}
+ fields={item.dataFields ? item.dataFields : { text: 'text', value: 'value' }}
+ value={dropdownValues[item.id] || item.placeholder}
+ enableRtl={enableRtlListView}
+ width={166}
+ created={(e) => {
+ gridPrivateMethods.changeDropdownValue(item.id, dropdownValues[item.id] || item.placeholder);
+ if (!isNullOrUndefined(item.dataFields)) {
+ item.method(item.dataSource, dropdownRefs.current, item.id);
+ } else if (!isNullOrUndefined(item.method)) {
+ item.method(dropdownRefs.current[item.id].value, dropdownRefs.current);
+ }
+ }}
+ change={(e) => {
+ gridPrivateMethods.changeDropdownValue(item.id, e.value);
+ if (!isNullOrUndefined(item.method)) {
+ item.method(e.value, dropdownRefs.current);
+ }
+ }}
+ placeholder={item.placeholder}
+ />
+ + ) : ( +
+ {/* created checkbox component if the groupfield contains in the checkbox configurations */}
+ {
+ if (instance) {
+ checkboxRefs.current[item.id] = instance;
+ }
+ }}
+ label={item.label}
+ enableRtl={enableRtlListView}
+ checked={checkboxValues[item.id]}
+ created={(e) => {
+ if (!isNullOrUndefined(item.method)) {
+ item.method(checkboxValues[item.id], item.id, checkboxRefs.current, 'Created');
+ }
+ }}
+ change={(e) => {
+ gridPrivateMethods.handleCheckboxChange(item.id, e.checked);
+ if (!isNullOrUndefined(item.method)) {
+ item.method(e.checked, item.id, checkboxRefs.current, 'Change');
+ }
+ }}
+ />
+
+
+ )}
+
+
+
+ +
+ " + props.Rating + ""} name={'Rating'} value={props.Rating} readOnly={true} cssClass='e-custom-rating'>
+
+ );
+ },
+
+ ratingEditTemplate: (props: Orders): JSX.Element => {
+ const isRTL = document.getElementById('overviewgrid')?.classList.contains('e-rtl');
+ const ratingClass = isRTL ? 'e-custom-rating e-rtl' : 'e-custom-rating';
+ return (
+
+ {showEditLabel && (
+
+ )}
+
+ );
+ },
+
+ progressTemplate: (props: Orders): JSX.Element => {
+ let colorValue: string = props.OrderStatus === 'Delivered' ? "#205107" : props.OrderStatus === 'Cancelled' ? '#B3261E' : '#914C00';
+ return (
+
+
+ );
+ }
+
+ };
+
+ const handleGridEvent = {
+ onGridCreated: () => {
+ startTime = new Date().getTime();
+ },
+
+ cellSelect: () => {
+ const selectedCells = gridInstance.getSelectedRowCellIndexes();
+ if (selectedCells.length > 0) {
+ setRowIndexValue(`${selectedCells.map((cell) => cell.rowIndex).join(", ")}`);
+ setCellIndexValue(`${selectedCells.map((cell) => cell.cellIndexes).join(", ")}`);
+ }
+ },
+
+ onDataBound: () => {
+ if (gridInstance) {
+ const endTime = new Date().getTime();
+ const elapsedTime = (endTime - startTime);
+ setLoadingTime(Number(elapsedTime));
+ gridInstance.scrollModule.refresh();
+ }
+ },
+
+ selectedRow: () => {
+ setSelectedCount(gridInstance.getSelectedRecords().length);
+ },
+
+ onActionComplete: (args: PageEventArgs | GroupEventArgs | FilterEventArgs | SearchEventArgs | SortEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs | ActionEventArgs | NotifyArgs | ReorderEventArgs) => {
+ if (args.requestType === 'filtering') {
+ filteredData = gridInstance.getFilteredRecords();
+ if (Array.isArray(filteredData)) {
+ setFilteredCount(filteredData.length);
+ }
+ } else if (args.requestType === "searching") {
+ setSearchedCount(gridInstance.currentViewData.length);
+ } else if (args.requestType === "save" && 'action' in args && args.action === "add") {
+ setAddedCount((prevCount) => prevCount + 1);
+ } else if (args.requestType === "delete") {
+ setDeletedCount((prevCount) => prevCount + (args as any).data.length);
+ } else if (args.requestType === "save") {
+ setUpdatedCount((prevCount) => prevCount + 1);
+ }
+ },
+
+ actionBegin: (args: PageEventArgs | GroupEventArgs | FilterEventArgs | SearchEventArgs | SortEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs | ActionEventArgs | NotifyArgs | ReorderEventArgs): void => {
+
+ if ((isHeaderTemplate || ((args as any).target && (args as any).target.closest && (args as any).target.closest('.e-icons.e-settings.icon'))) && args.requestType === 'sorting') {
+ isHeaderTemplate = false;
+ args.cancel = true;
+ }
+ if (args.requestType === 'beginEdit' || args.requestType === 'add') {
+ showEditLabel = gridInstance.editSettings.mode === 'Dialog' ? true : false;
+ }
+ if (args.requestType === 'save' && batchFlag && imageStream) {
+ ((args as any).data as Orders).EmployeeImage = imageStream;
+ imageStream = '';
+ }
+
+ if (args.requestType === "grouping") {
+ setExpandCollapseValue("grouping");
+ } if (args.requestType === "ungrouping") {
+ setExpandCollapseValue("ungrouping");
+ }
+ },
+
+ excelPdfQueryCellInfo: (args: ExcelQueryCellInfoEventArgs) => {
+ (args.data as Orders).Verified = true
+ if (args.column.headerText === "Customer Image") {
+ args.image = {
+ base64: (args.data as Orders).EmployeeImage,
+ height: 70,
+ width: 70,
+ };
+ }
+ },
+
+ toolbarClick: (args: ContextMenuClickEventArgs): void => {
+ if (args.item.id === 'clearsorting_icon') {
+ gridInstance.clearSorting();
+ } else if (args.item.id === 'clear_row_selection') {
+ gridInstance.clearRowSelection();
+ }
+ else if (args.item.id === 'clear_column_selection') {
+ gridInstance.selectionModule.clearColumnSelection();
+ }
+ else if (args.item.id === 'clear_cell_selection') {
+ gridInstance.clearCellSelection();
+ }
+ else if (args.item.id === 'clearfilter_icon') {
+ gridInstance.clearFiltering();
+ }
+ else if (args.item.id === 'expand_icon') {
+ if (expandCollapseValue === 'grouping' && isExpand) {
+ isExpand = false;
+ gridInstance.groupModule.collapseAll();
+ } else {
+ gridInstance.groupModule.expandAll();
+ isExpand = true;
+ }
+ }
+ else if (args.item.id === 'clear_selection') {
+ gridInstance.clearSelection();
+ } else if (args.item.id === 'export_pdf') {
+ gridInstance?.pdfExport();
+ } else if (args.item.id === 'export_excel') {
+ gridInstance?.excelExport();
+ } else if (args.item.id === 'add_icon') {
+ gridInstance?.addRecord();
+ } else if (args.item.id === 'export_csv') {
+ gridInstance?.csvExport();
+ } else if (args.item.id === "grid_properties") {
+ customComponentTemplates.toolbarDialog("Header Settings");
+ }
+ },
+
+ queryCellInfo: (args: QueryCellInfoEventArgs): void => {
+ if ((args.column as ColumnModel).field === 'Freight' && args.data && (args.data as Orders).Freight !== undefined) {
+ const FreightData = (args.data as Orders).Freight;
+ (args.cell as HTMLElement).style.backgroundColor = FreightData < 50 ? '#F9DEDC' : FreightData > 50 && FreightData < 100 ? 'transparent' : '#F9DEDC';
+ (args.cell as HTMLElement).style.color = FreightData < 50 ? '#B3261E'
+ : FreightData > 50 && FreightData < 100 ? '#205107' : '#B3261E';
+ (args.cell as HTMLElement).style.fontSize = '14px';
+ (args.cell as HTMLElement).style.fontWeight = '700';
+ }
+ },
+
+ beforePaste: (args: BeforePasteEventArgs): void => {
+ if ((args.column as ColumnModel).field === 'Freight') {
+ let numberParser = intl.getNumberParser({ format: 'c1' });
+ (args as { value: number }).value = numberParser((args as { value: number }).value);
+ }
+ },
+
+ cellSave: (args: CellSaveArgs): void => {
+ if ((window.event?.target as HTMLElement).closest('.e-upload')) {
+ args.cancel = true;
+ }
+ if (batchFlag && (args.column as ColumnModel).headerText === "Customer Image") {
+ const existingIndex: number = batchEdit.findIndex((item) => item.orderID === (args.rowData as Orders).OrderID);
+ if (existingIndex !== -1) {
+ batchEdit[existingIndex].employeeImage = imageStream;
+ } else {
+ let newBatchEdit = {
+ orderID: (args.rowData as Orders).OrderID,
+ employeeImage: imageStream,
+ };
+ batchEdit.push(newBatchEdit);
+ }
+ }
+ },
+
+ cellSaved: (): void => {
+ batchFlag = false;
+ }
+ };
+
+ /* eslint-disable react-hooks/exhaustive-deps */
+ const initialGridRender: JSX.Element = useMemo(() => {
+ return (
+
+ {props.OrderStatus}
+
+
+
+ );
+}
+
+export default App;
+
+function loadLocalization() {
+ const localization = [arLocalization, deLocalization, frLocalization, zhLocalization];
+ for (let i = 0; i < localization.length; i++) {
+ L10n.load(localization[i]);
+ }
+};
+
+interface BatchOrders {
+ orderID: number;
+ employeeImage: string
+}
+
+export interface Orders {
+ OrderID: number;
+ CustomerName: string;
+ ShipCountry: string;
+ EmployeeID: number;
+ EmployeeImage: string;
+ Quantity: number;
+ Rating: number;
+ Freight: number;
+ Verified: boolean;
+ TrackingStatus: boolean;
+ OrderStatus: string;
+}
+
+export interface KeyDataType { [key: string]: Object; }
+
+interface GridPropertiesConfig {
+ id: string;
+ label?: string;
+ defaultChecked?: boolean;
+ type?: string;
+ dataSource?: object;
+ placeholder?: string;
+ method?: Function;
+ value?: string;
+ marginLeft?: string;
+ marginRTL?: string;
+ valueTemplate?: Function;
+ itemTemplate?: Function;
+ disabled?: boolean;
+ dataFields?: FieldSettingsModel
+}
+
+interface GridPropertiesConfigurations {
+ 'Header Settings': GridPropertiesGroup[];
+ 'Grid Settings': GridPropertiesGroup[];
+ 'Group Settings': GridPropertiesGroup[];
+ 'Filter Settings': GridPropertiesGroup[];
+ 'Edit Settings': GridPropertiesGroup[];
+ 'Selection Settings': GridPropertiesGroup[];
+ 'Web Standards': GridPropertiesGroup[];
+}
+
+interface GridPropertiesGroup {
+ groupField: string;
+ items: GridPropertiesConfig[];
+}
+
+interface ChangeEventArgs {
+ checked: boolean;
+}
\ No newline at end of file
diff --git a/src/Bootstrap5/Showcase Bootstrap5.metrop b/src/Bootstrap5/Showcase Bootstrap5.metrop
new file mode 100644
index 0000000..b35d558
--- /dev/null
+++ b/src/Bootstrap5/Showcase Bootstrap5.metrop
@@ -0,0 +1,76 @@
+
+
+ {[
+ { label: "Loading Time", value: loadingTime, color: "#6750A4" },
+ { label: "Filtered", value: filteredCount, color: "#6750A4" },
+ { label: "Searched", value: searchedCount, color: "#6750A4" },
+ { label: "Selected", value: selectedCount, color: "#6750A4" },
+ { label: "New", value: addedCount, color: "#6750A4" },
+ { label: "Updated", value: updatedCount, color: "#6750A4" },
+ { label: "Deleted", value: deletedCount, color: "#B3261E" },
+ { label: "Row Index", value: rowIndexValue, color: "#6750A4" },
+ { label: "Cell Index", value: cellIndexValue, color: "#6750A4" },
+ ].map((item, index) => (
+
+
+
+ {item.label} {"-"}
+
+
+ {/* {item.value} */}
+ {item.label === 'Loading Time' ? (
+ <>
+ {item.value}
+ ms
+
+ ) : (
+ item.value
+ )
+ }
+
+
+ ))}
+
+ {initialGridRender}
+
+
+
+
+
+
+
+
Font Name : Showcase Bootstrap5
+
-
+
-
++++++++Name +desktop+++ PUA + e700
+
-
++++++++Name +mobile+++ PUA + e701
+
-
++++++++Name +tab+++ PUA + e702
+
-
++++++++Name +configuration+++ PUA + e703
+
-
++++++++Name +row-selected+++ PUA + e704
+
-
++++++++Name +cell-selected+++ PUA + e705
+
-
++++++++Name +row-clear+++ PUA + e706
+
-
++++++++Name +column-clear+++ PUA + e707
+
-
++++++++Name +clear-selection+++ PUA + e708
+
-
++++++++Name +order-details+++ PUA + e709
+
-
++++++++Name +freight+++ PUA + e70a
+
-
++++++++Name +shopping-cart+++ PUA + e70b
+
-
++++++++Name +clear-sorting+++ PUA + e70c
+
-
++++++++Name +expand-collapse+++ PUA + e70d
+
-
++++++++Name +row-height+++ PUA + e70e
+
-
++++++++Name +currency-dollar+++ PUA + e70f
+
-
++++++++Name +filter-settings+++ PUA + e710
+
-
++++++++Name +table-settings+++ PUA + e711
+
-
++++++++Name +header-settings+++ PUA + e712
+
-
++++++++Name +edit-settings+++ PUA + e713
+
-
++++++++Name +group+++ PUA + e714
+
-
++++++++Name +clear-cell+++ PUA + e715
+
-
++++++++Name +sorting+++ PUA + e716
+
-
++++++++Name +description+++ PUA + e717
+