From 4ee776b6a5328c9c6a1264067649815ccfa7ccb1 Mon Sep 17 00:00:00 2001
From: Alexander Elguezabal <luis1944alex@gmail.com>
Date: Thu, 1 Aug 2024 14:58:14 -0700
Subject: [PATCH 1/2] Implemented DateTime edit control  type.

---
 src/libs/editablegrid/addrowpanel.tsx        |  116 +-
 src/libs/editablegrid/columnupdatedialog.tsx |  129 +-
 src/libs/editablegrid/editablegrid.tsx       | 1432 ++++++++++--------
 src/libs/editablegrid/editpanel.tsx          |  107 +-
 4 files changed, 1027 insertions(+), 757 deletions(-)

diff --git a/src/libs/editablegrid/addrowpanel.tsx b/src/libs/editablegrid/addrowpanel.tsx
index 6a7955c3..ce5ba98e 100644
--- a/src/libs/editablegrid/addrowpanel.tsx
+++ b/src/libs/editablegrid/addrowpanel.tsx
@@ -1,4 +1,4 @@
-import { ConstrainMode, DatePicker, Dropdown, IDropdownOption, IStackStyles, IStackTokens, ITag, ITextFieldStyles, mergeStyleSets, Position, PrimaryButton, SpinButton, Stack, TextField } from "office-ui-fabric-react";
+import { ConstrainMode, DatePicker, Dropdown, IComboBox, IDropdownOption, IStackStyles, IStackTokens, ITag, ITextFieldStyles, mergeStyleSets, Position, PrimaryButton, SpinButton, Stack, TextField } from "office-ui-fabric-react";
 import React, { useEffect, useState } from "react";
 import { IColumnConfig } from "../types/columnconfigtype";
 import { EditControlType } from "../types/editcontroltype";
@@ -6,6 +6,7 @@ import { DayPickerStrings } from "./datepickerconfig";
 import { controlClass, horizontalGapStackTokens, stackStyles, textFieldStyles, verticalGapStackTokens } from "./editablegridstyles";
 import { GetDefault, IsValidDataType, ParseType } from "./helper";
 import PickerControl from "./pickercontrol/picker";
+import { TimePicker } from "@fluentui/react";
 
 interface Props {
     onChange: any;
@@ -16,38 +17,38 @@ interface Props {
 const AddRowPanel = (props: Props) => {
     let AddSpinRef: any = React.createRef();
 
-    const updateObj : any = {};
+    const updateObj: any = {};
     const [columnValuesObj, setColumnValuesObj] = useState<any>(null);
 
     useEffect(() => {
-        let tmpColumnValuesObj : any = {};
+        let tmpColumnValuesObj: any = {};
         props.columnConfigurationData.forEach((item, index) => {
-            tmpColumnValuesObj[item.key] = { 'value' : GetDefault(item.dataType), 'isChanged' : false, 'error': null };
+            tmpColumnValuesObj[item.key] = { 'value': GetDefault(item.dataType), 'isChanged': false, 'error': null };
         })
         setColumnValuesObj(tmpColumnValuesObj);
     }, [props.columnConfigurationData]);
 
-    const SetObjValues = (key: string, value: any, isChanged: boolean = true, errorMessage: string | null = null) : void => {
-        setColumnValuesObj({...columnValuesObj, [key]: { 'value' :  value, 'isChanged' : isChanged, 'error': errorMessage }})
+    const SetObjValues = (key: string, value: any, isChanged: boolean = true, errorMessage: string | null = null): void => {
+        setColumnValuesObj({ ...columnValuesObj, [key]: { 'value': value, 'isChanged': isChanged, 'error': errorMessage } })
     }
 
-    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, item : any): void => {
+    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, item: any): void => {
         SetObjValues(item.key, selectedDropdownItem?.text);
     }
 
-    const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column : IColumnConfig): void => {
-        if(!IsValidDataType(column.dataType, text)){
+    const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column: IColumnConfig): void => {
+        if (!IsValidDataType(column.dataType, text)) {
             SetObjValues((ev.target as Element).id, text, false, `Data should be of type '${column.dataType}'`);
             return;
         }
-        
+
         SetObjValues((ev.target as Element).id, ParseType(column.dataType, text));
     };
 
     const onPanelSubmit = (): void => {
         var objectKeys = Object.keys(columnValuesObj);
         objectKeys.forEach((objKey) => {
-            if(columnValuesObj[objKey]['isChanged']){
+            if (columnValuesObj[objKey]['isChanged']) {
                 updateObj[objKey] = columnValuesObj[objKey]['value']
             }
         });
@@ -55,21 +56,50 @@ const AddRowPanel = (props: Props) => {
         props.onChange(updateObj, props.enableRowsCounterField ? AddSpinRef.current.value : 1);
     };
 
-    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, item : any) : void => {
-        if(cellPickerTagList && cellPickerTagList[0] && cellPickerTagList[0].name)
+    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, item: any): void => {
+        if (cellPickerTagList && cellPickerTagList[0] && cellPickerTagList[0].name)
             SetObjValues(item.key, cellPickerTagList[0].name);
         else
             SetObjValues(item.key, '');
     }
 
-    const onCellDateChange = (date: Date | null | undefined, item : any): void => {
-        SetObjValues(item.key, date);
+    const onCellDateChange = (date: Date | null | undefined, item: IColumnConfig): void => {
+        let currentDate = getColumnValue(item);
+
+        if (currentDate === undefined || currentDate === null) {
+            currentDate = date;
+        } else if (date !== null && date !== undefined) {
+            currentDate.setFullYear(date.getFullYear());
+            currentDate.setMonth(date.getMonth());
+            currentDate.setDate(date.getDate());
+        }
+
+        SetObjValues(item.key, currentDate);
+    };
+
+    const onCellTimeChange = (dateTime: Date | null | undefined, item: IColumnConfig): void => {
+        let currentDate = getColumnValue(item);
+
+        if (currentDate === undefined || currentDate === null) {
+            currentDate = dateTime;
+        } else if (dateTime !== null && dateTime !== undefined) {
+            currentDate.setHours(dateTime.getHours());
+            currentDate.setMinutes(dateTime.getMinutes());
+            currentDate.setSeconds(dateTime.getSeconds());
+            currentDate.setMilliseconds(dateTime.getMilliseconds());
+        }
+
+        SetObjValues(item.key, currentDate);
     };
 
-    const createTextFields = () : any[] => {
-        let tmpRenderObj : any[] = [];
+    const getColumnValue = (item: IColumnConfig) => {
+        return columnValuesObj[item.key].value;
+    };
+
+    const createTextFields = (): any[] => {
+        let tmpRenderObj: any[] = [];
         props.columnConfigurationData.forEach((item, index) => {
-            switch(item.inputType){
+            switch (item.inputType) {
                 case EditControlType.Date:
                     tmpRenderObj.push(<DatePicker
                         label={item.text}
@@ -93,14 +123,14 @@ const AddRowPanel = (props: Props) => {
                 case EditControlType.Picker:
                     tmpRenderObj.push(<div>
                         <span className={controlClass.pickerLabel}>{item.text}</span>
-                        <PickerControl 
+                        <PickerControl
                             arialabel={item.text}
                             selectedItemsLimit={1}
                             pickerTags={item.pickerOptions?.pickerTags ?? []}
                             minCharLimitForSuggestions={2}
                             onTaglistChanged={(selectedItem: ITag[] | undefined) => onCellPickerTagListChanged(selectedItem, item)}
                             pickerDescriptionOptions={item.pickerOptions?.pickerDescriptionOptions}
-                    /></div>);
+                        /></div>);
                     break;
                 case EditControlType.MultilineTextField:
                     tmpRenderObj.push(<TextField
@@ -113,7 +143,7 @@ const AddRowPanel = (props: Props) => {
                         styles={textFieldStyles}
                         onChange={(ev, text) => onTextUpdate(ev, text!, item)}
                         value={columnValuesObj[item.key].value || ''}
-                        />);
+                    />);
                     break;
                 case EditControlType.Password:
                     tmpRenderObj.push(<TextField
@@ -126,7 +156,27 @@ const AddRowPanel = (props: Props) => {
                         value={columnValuesObj[item.key].value || ''}
                         type="password"
                         canRevealPassword
-                        />);
+                    />);
+                    break;
+                case EditControlType.DateTime:
+                    tmpRenderObj.push(
+                        <Stack key={item.key} tokens={{ childrenGap: 8 }}>
+                            <DatePicker
+                                strings={DayPickerStrings}
+                                ariaLabel='Select a date...'
+                                placeholder="Select a date..."
+                                label={item.text}
+                                onSelectDate={(date) => onCellDateChange(date, item)}
+                            />
+                            <TimePicker
+                                ariaLabel='Select a time...'
+                                placeholder="Select a time..."
+                                showSeconds={true}
+                                useHour12={false}
+                                onChange={(event, time: Date) => { onCellTimeChange(time, item) }}
+                            />
+                        </Stack>
+                    );
                     break;
                 default:
                     tmpRenderObj.push(<TextField
@@ -137,15 +187,15 @@ const AddRowPanel = (props: Props) => {
                         styles={textFieldStyles}
                         onChange={(ev, text) => onTextUpdate(ev, text!, item)}
                         value={columnValuesObj[item.key].value || ''}
-                        />);
+                    />);
                     break;
             }
         });
 
-        if(props.enableRowsCounterField){
+        if (props.enableRowsCounterField) {
             tmpRenderObj.push(
                 <SpinButton
-                    componentRef = {AddSpinRef}
+                    componentRef={AddSpinRef}
                     label="# of Rows to Add"
                     labelPosition={Position.top}
                     defaultValue="1"
@@ -158,7 +208,7 @@ const AddRowPanel = (props: Props) => {
                 />
             );
         }
-        
+
         return tmpRenderObj;
     }
 
@@ -168,13 +218,13 @@ const AddRowPanel = (props: Props) => {
                 {columnValuesObj && createTextFields()}
             </Stack>
             <Stack horizontal disableShrink styles={stackStyles} tokens={horizontalGapStackTokens}>
-            <PrimaryButton
-                text="Save To Grid"
-                className={controlClass.submitStylesEditpanel}
-                onClick={onPanelSubmit}
-                allowDisabledFocus
-                disabled={columnValuesObj && Object.keys(columnValuesObj).some(k => columnValuesObj[k] && columnValuesObj[k].error && columnValuesObj[k].error.length > 0) || false}
-            />
+                <PrimaryButton
+                    text="Save To Grid"
+                    className={controlClass.submitStylesEditpanel}
+                    onClick={onPanelSubmit}
+                    allowDisabledFocus
+                    disabled={columnValuesObj && Object.keys(columnValuesObj).some(k => columnValuesObj[k] && columnValuesObj[k].error && columnValuesObj[k].error.length > 0) || false}
+                />
             </Stack>
         </Stack>
     );
diff --git a/src/libs/editablegrid/columnupdatedialog.tsx b/src/libs/editablegrid/columnupdatedialog.tsx
index f5c76c57..b40d1261 100644
--- a/src/libs/editablegrid/columnupdatedialog.tsx
+++ b/src/libs/editablegrid/columnupdatedialog.tsx
@@ -8,6 +8,7 @@ import { EditControlType } from "../types/editcontroltype";
 import { DayPickerStrings } from "./datepickerconfig";
 import { GetDefault, IsValidDataType, ParseType } from "./helper";
 import PickerControl from "./pickercontrol/picker";
+import { TimePicker } from "@fluentui/react";
 
 interface Props {
     columnConfigurationData: IColumnConfig[];
@@ -15,9 +16,9 @@ interface Props {
     onDialogSave?: any;
 }
 
-const ColumnUpdateDialog = (props : Props) => {
+const ColumnUpdateDialog = (props: Props) => {
     const controlClass = mergeStyleSets({
-        inputClass:{
+        inputClass: {
             display: 'block',
             width: '100%'
         },
@@ -27,7 +28,7 @@ const ColumnUpdateDialog = (props : Props) => {
     });
 
     const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: {} };
-    
+
     const [gridColumn, setGridColumn] = useState('');
     const [inputValue, setInputValue] = useState<any>(null);
 
@@ -37,29 +38,29 @@ const ColumnUpdateDialog = (props : Props) => {
     };
 
     useEffect(() => {
-        let tmpColumnValuesObj : any = {};
+        let tmpColumnValuesObj: any = {};
         props.columnConfigurationData.filter(x => x.editable == true).forEach((item, index) => {
-            tmpColumnValuesObj[item.key] = { 'value' : GetDefault(item.dataType), 'isChanged' : false, 'error': null };
+            tmpColumnValuesObj[item.key] = { 'value': GetDefault(item.dataType), 'isChanged': false, 'error': null };
         })
         setInputValue(tmpColumnValuesObj);
     }, [props.columnConfigurationData]);
 
-    const SetObjValues = (key: string, value: any, isChanged: boolean = true, errorMessage: string | null = null) : void => {
-        var inputValueTmp : any = { ...inputValue };
+    const SetObjValues = (key: string, value: any, isChanged: boolean = true, errorMessage: string | null = null): void => {
+        var inputValueTmp: any = { ...inputValue };
         var objectKeys = Object.keys(inputValueTmp);
         objectKeys.forEach((objKey) => {
             inputValueTmp[objKey]['isChanged'] = false;
         });
-        inputValueTmp[key] = { 'value' :  value, 'isChanged' : isChanged, 'error': errorMessage };
+        inputValueTmp[key] = { 'value': value, 'isChanged': isChanged, 'error': errorMessage };
         setInputValue(inputValueTmp);
     }
 
-    const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column : IColumnConfig): void => {
-        if(!IsValidDataType(column?.dataType, text)){
+    const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column: IColumnConfig): void => {
+        if (!IsValidDataType(column?.dataType, text)) {
             SetObjValues((ev.target as Element).id, text, false, `Data should be of type '${column.dataType}'`)
             return;
         }
-        
+
         SetObjValues((ev.target as Element).id, ParseType(column.dataType, text));
     };
 
@@ -67,18 +68,53 @@ const ColumnUpdateDialog = (props : Props) => {
         <></>
     );
 
-    const onSelectDate = (date: Date | null | undefined, item : any): void => {
+    const onSelectDate = (date: Date | null | undefined, item: any): void => {
         SetObjValues(item.key, date);
     };
 
-    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, item : any) : void => {
-        if(cellPickerTagList && cellPickerTagList[0] && cellPickerTagList[0].name)
+    const onCellDateChange = (date: Date | null | undefined, item: IColumnConfig): void => {
+        let currentDate = getColumnValue(item);
+
+        if (currentDate === undefined || currentDate === null) {
+            currentDate = date;
+        } else if (date !== null && date !== undefined) {
+            currentDate.setFullYear(date.getFullYear());
+            currentDate.setMonth(date.getMonth());
+            currentDate.setDate(date.getDate());
+        }
+
+        SetObjValues(item.key, currentDate);
+    };
+
+    const onCellTimeChange = (dateTime: Date | null | undefined, item: IColumnConfig): void => {
+        let currentDate = getColumnValue(item);
+
+        if (currentDate === undefined || currentDate === null) {
+            currentDate = dateTime;
+        } else if (dateTime !== null && dateTime !== undefined) {
+            currentDate.setHours(dateTime.getHours());
+            currentDate.setMinutes(dateTime.getMinutes());
+            currentDate.setSeconds(dateTime.getSeconds());
+            currentDate.setMilliseconds(dateTime.getMilliseconds());
+        }
+
+        SetObjValues(item.key, currentDate);
+    };
+
+
+    const getColumnValue = (item: IColumnConfig) => {
+        return inputValue[item.key].value;
+    };
+
+
+    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, item: any): void => {
+        if (cellPickerTagList && cellPickerTagList[0] && cellPickerTagList[0].name)
             SetObjValues(item.key, cellPickerTagList[0].name);
         else
             SetObjValues(item.key, '');
     }
 
-    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, item : any): void => {
+    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, item: any): void => {
         SetObjValues(item.key, selectedDropdownItem?.text);
     }
 
@@ -87,21 +123,21 @@ const ColumnUpdateDialog = (props : Props) => {
     };
 
     const closeDialog = React.useCallback((): void => {
-        if(props.onDialogCancel){
+        if (props.onDialogCancel) {
             props.onDialogCancel();
         }
-        
+
         setInputFieldContent(undefined)
     }, []);
 
     const saveDialog = (): void => {
-        if(props.onDialogSave){
-            var inputValueTmp : any = {};
+        if (props.onDialogSave) {
+            var inputValueTmp: any = {};
             var objectKeys = Object.keys(inputValue);
             var BreakException = {};
-            try{
+            try {
                 objectKeys.forEach((objKey) => {
-                    if(inputValue[objKey]['isChanged']){
+                    if (inputValue[objKey]['isChanged']) {
                         inputValueTmp[objKey] = inputValue[objKey]['value'];
                         throw BreakException;
                     }
@@ -116,11 +152,11 @@ const ColumnUpdateDialog = (props : Props) => {
         setInputFieldContent(undefined);
     };
 
-    const createDropDownOptions = () : IDropdownOption[] => {
+    const createDropDownOptions = (): IDropdownOption[] => {
         let dropdownOptions: IDropdownOption[] = [];
         props.columnConfigurationData.forEach((item, index) => {
-            if(item.editable == true){
-                dropdownOptions.push({ key: item.key, text: item.text});
+            if (item.editable == true) {
+                dropdownOptions.push({ key: item.key, text: item.text });
             }
         });
 
@@ -129,10 +165,10 @@ const ColumnUpdateDialog = (props : Props) => {
 
     const options = createDropDownOptions();
 
-    const GetInputFieldContent = () : JSX.Element => {
+    const GetInputFieldContent = (): JSX.Element => {
         var column = props.columnConfigurationData.filter(x => x.key == gridColumn);
-        if(column.length > 0){
-            switch(column[0].inputType){
+        if (column.length > 0) {
+            switch (column[0].inputType) {
                 case EditControlType.Date:
                     return (<DatePicker
                         strings={DayPickerStrings}
@@ -140,18 +176,35 @@ const ColumnUpdateDialog = (props : Props) => {
                         ariaLabel="Select a date"
                         className={controlClass.inputClass}
                         onSelectDate={(date) => onSelectDate(date, column[0])}
-                        //value={new Date()}
+                    //value={new Date()}
                     />);
+                case EditControlType.DateTime:
+                    return (
+                        <Stack tokens={{ childrenGap: 8 }}>
+                            <DatePicker
+                                strings={DayPickerStrings}
+                                ariaLabel='Select a date...'
+                                placeholder="Select a date..."
+                                onSelectDate={(date) => onCellDateChange(date, column[0])}
+                            />
+                            <TimePicker
+                                ariaLabel='Select a time...'
+                                placeholder="Select a time..."
+                                showSeconds={true}
+                                useHour12={false}
+                                onChange={(event, time: Date) => { onCellTimeChange(time, column[0]) }}
+                            />
+                        </Stack>)
                 case EditControlType.Picker:
                     return (<div>
-                        <PickerControl 
+                        <PickerControl
                             arialabel={column[0].text}
                             selectedItemsLimit={1}
                             pickerTags={column[0].pickerOptions?.pickerTags ?? []}
                             minCharLimitForSuggestions={2}
                             onTaglistChanged={(selectedItem: ITag[] | undefined) => onCellPickerTagListChanged(selectedItem, column[0])}
                             pickerDescriptionOptions={column[0].pickerOptions?.pickerDescriptionOptions}
-                    /></div>);
+                        /></div>);
                 case EditControlType.DropDown:
                     return (
                         <Dropdown
@@ -171,14 +224,14 @@ const ColumnUpdateDialog = (props : Props) => {
                         styles={textFieldStyles}
                         onChange={(ev, text) => onTextUpdate(ev, text!, column[0])}
                         value={inputValue[column[0].key].value || ''}
-                        />);
+                    />);
                 default:
                     return (
                         <TextField
                             errorMessage={inputValue[column[0].key].error}
                             className={controlClass.inputClass}
                             placeholder={`Enter '${column[0].text}'...`}
-                            onChange={(ev, text) => onTextUpdate(ev, text!,column[0])}
+                            onChange={(ev, text) => onTextUpdate(ev, text!, column[0])}
                             styles={textFieldStyles}
                             id={column[0].key}
                             value={inputValue[column[0].key].value || ''}
@@ -189,8 +242,8 @@ const ColumnUpdateDialog = (props : Props) => {
 
         return (<></>);
     }
-    
-    return(
+
+    return (
         <Dialog hidden={!inputFieldContent} onDismiss={closeDialog} closeButtonAriaLabel="Close">
             <Stack grow verticalAlign="space-between" tokens={stackTokens}>
                 <Stack.Item grow={1}>
@@ -207,10 +260,10 @@ const ColumnUpdateDialog = (props : Props) => {
                 <Stack.Item>
                     <DialogFooter className={controlClass.inputClass}>
                         <PrimaryButton
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onClick={saveDialog}
-                        text="Save"
-                        disabled={(gridColumn) ? (inputValue[gridColumn].error != null && inputValue[gridColumn].error.length > 0) : false}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onClick={saveDialog}
+                            text="Save"
+                            disabled={(gridColumn) ? (inputValue[gridColumn].error != null && inputValue[gridColumn].error.length > 0) : false}
                         />
                         <DefaultButton onClick={closeDialog} text="Cancel" />
                     </DialogFooter>
diff --git a/src/libs/editablegrid/editablegrid.tsx b/src/libs/editablegrid/editablegrid.tsx
index f49554a4..d76a76eb 100644
--- a/src/libs/editablegrid/editablegrid.tsx
+++ b/src/libs/editablegrid/editablegrid.tsx
@@ -3,17 +3,19 @@
 
 import * as React from 'react';
 import { ColumnActionsMode, ConstrainMode, IColumn, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsList.types';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, FormEvent } from 'react';
 import { DetailsList, IDetailsListProps } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsList';
 import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
-import { DetailsListLayoutMode,
+import {
+    DetailsListLayoutMode,
     Selection,
     SelectionMode,
     IObjectWithKey,
-    IDetailsColumnRenderTooltipProps, } from 'office-ui-fabric-react/lib/DetailsList';
+    IDetailsColumnRenderTooltipProps,
+} from 'office-ui-fabric-react/lib/DetailsList';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { IconButton } from 'office-ui-fabric-react/lib/components/Button/IconButton/IconButton';
-import { PrimaryButton, Panel, PanelType, IStackTokens, Stack, mergeStyleSets, Fabric, Dropdown, IDropdownStyles, IDropdownOption, IButtonStyles, DialogFooter, Announced, Dialog, SpinButton, DefaultButton, DatePicker, IDatePickerStrings, on, ScrollablePane, ScrollbarVisibility, Sticky, StickyPositionType, IRenderFunction, TooltipHost, mergeStyles, Spinner, SpinnerSize, TagPicker, ITag, IBasePickerSuggestionsProps, IInputProps, HoverCard, HoverCardType, Link } from 'office-ui-fabric-react';
+import { PrimaryButton, Panel, PanelType, IStackTokens, Stack, mergeStyleSets, Fabric, Dropdown, IDropdownStyles, IDropdownOption, IButtonStyles, DialogFooter, Announced, Dialog, SpinButton, DefaultButton, DatePicker, IDatePickerStrings, on, ScrollablePane, ScrollbarVisibility, Sticky, StickyPositionType, IRenderFunction, TooltipHost, mergeStyles, Spinner, SpinnerSize, TagPicker, ITag, IBasePickerSuggestionsProps, IInputProps, HoverCard, HoverCardType, Link, IComboBox } from 'office-ui-fabric-react';
 import { TextField, ITextFieldStyles, ITextField } from 'office-ui-fabric-react/lib/TextField';
 import { ContextualMenu, DirectionalHint, IContextualMenu, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { useBoolean } from '@uifabric/react-hooks';
@@ -42,6 +44,7 @@ import AddRowPanel from './addrowpanel';
 import { Props } from '../types/editabledetailslistprops';
 import SearchableDropdown from './searchabledropdown/searchabledropdown';
 import PickerControl from './pickercontrol/picker';
+import { TimePicker } from '@fluentui/react';
 
 interface SortOptions {
     key: string;
@@ -76,12 +79,12 @@ const EditableGrid = (props: Props) => {
     const [defaultTag, setDefaultTag] = useState<ITag[]>([]);
     const [filteredColumns, setFilteredColumns] = useState<IColumnConfig[]>([]);
     const [filterStore, setFilterStore] = useState<IFilter[]>([]);
-    const gridColumnFilterArrRef : any = React.useRef<IGridColumnFilter[]>([]);
+    const gridColumnFilterArrRef: any = React.useRef<IGridColumnFilter[]>([]);
     const [filterCalloutComponent, setFilterCalloutComponent] = React.useState<JSX.Element | undefined>(undefined);
     const [showFilterCallout, setShowFilterCallout] = React.useState(false);
     const [messageDialogProps, setMessageDialogProps] = React.useState({
-        visible : false,
-        message : '',
+        visible: false,
+        message: '',
         subMessage: ''
     });
     const [sortColObj, setSortColObj] = React.useState<SortOptions>({ key: '', isAscending: false, isEnabled: false });
@@ -94,22 +97,22 @@ const EditableGrid = (props: Props) => {
 
     const onSearchHandler = (event: any) => {
         if (event && event.target) {
-            
+
             let queryText = event.target.value;
             if (queryText) {
-                let searchableColumns = props.columns.filter(x=> x.includeColumnInSearch == true).map(x => x.key);
-                
-                let searchResult : any[] = [...defaultGridData];
+                let searchableColumns = props.columns.filter(x => x.includeColumnInSearch == true).map(x => x.key);
+
+                let searchResult: any[] = [...defaultGridData];
                 searchResult.filter(
                     (_gridData, index) => {
                         var BreakException = {};
-                        try{
+                        try {
                             searchableColumns.forEach((item2, index2) => {
-                                if(_gridData[item2] && _gridData[item2].toString().toLowerCase() && _gridData[item2].toString().toLowerCase().includes(queryText.trim().toLowerCase())){
+                                if (_gridData[item2] && _gridData[item2].toString().toLowerCase() && _gridData[item2].toString().toLowerCase().includes(queryText.trim().toLowerCase())) {
                                     _gridData._is_filtered_in_grid_search_ = true;
                                     throw BreakException;
                                 }
-                                else{
+                                else {
                                     _gridData._is_filtered_in_grid_search_ = false;
                                 }
                             });
@@ -118,17 +121,17 @@ const EditableGrid = (props: Props) => {
                         }
                     }
                 );
-                
+
                 setDefaultGridData(searchResult);
             } else {
-                var gridDataTmp : any[] = [...defaultGridData];
+                var gridDataTmp: any[] = [...defaultGridData];
                 gridDataTmp.map((item) => item._is_filtered_in_grid_search_ = true);
                 setDefaultGridData(gridDataTmp);
             }
         } else {
-            var gridDataTmp : any[] = [...defaultGridData];
-                gridDataTmp.map((item) => item._is_filtered_in_grid_search_ = true);
-                setDefaultGridData(gridDataTmp);
+            var gridDataTmp: any[] = [...defaultGridData];
+            gridDataTmp.map((item) => item._is_filtered_in_grid_search_ = true);
+            setDefaultGridData(gridDataTmp);
         }
     };
 
@@ -140,10 +143,10 @@ const EditableGrid = (props: Props) => {
     });
 
     useEffect(() => {
-        if(props && props.items){
-            var data : any[] = InitializeInternalGrid(props.items);
+        if (props && props.items) {
+            var data: any[] = InitializeInternalGrid(props.items);
             setGridData(data);
-            setBackupDefaultGridData(data.map(obj => ({...obj})));
+            setBackupDefaultGridData(data.map(obj => ({ ...obj })));
             setGridEditState(false);
             SetGridItems(data);
         }
@@ -159,7 +162,7 @@ const EditableGrid = (props: Props) => {
 
     useEffect(() => {
         const CheckOnUpdate = async () => {
-            if(defaultGridData.filter(x => x._grid_row_operation_ != Operation.None).length > 0){
+            if (defaultGridData.filter(x => x._grid_row_operation_ != Operation.None).length > 0) {
                 await onGridUpdate();
             }
         };
@@ -171,7 +174,7 @@ const EditableGrid = (props: Props) => {
         UpdateGridEditStatus();
         //console.log('activate cell edit');
         //console.log(activateCellEdit);
-        if(props.enableDefaultEditMode){
+        if (props.enableDefaultEditMode) {
             setDefaultGridData(ShallowCopyEditGridToDefaultGrid(defaultGridData, activateCellEdit));
         }
     }, [activateCellEdit]);
@@ -185,38 +188,38 @@ const EditableGrid = (props: Props) => {
     }, [filteredColumns]);
 
     useEffect(() => {
-        if(filterCalloutComponent){
+        if (filterCalloutComponent) {
             setShowFilterCallout(true);
         }
     }, [filterCalloutComponent]);
 
-    const onGridSave = () : void => {
-        if(props.onGridSave){
+    const onGridSave = (): void => {
+        if (props.onGridSave) {
             props.onGridSave(defaultGridData);
         }
     };
 
-    const onGridUpdate = async() : Promise<void> => {
-        if(props.onGridUpdate){
+    const onGridUpdate = async (): Promise<void> => {
+        if (props.onGridUpdate) {
             await props.onGridUpdate(defaultGridData);
         }
     };
-    
-    const UpdateGridEditStatus = () : void => {
-        var gridEditStatus : boolean = false;
+
+    const UpdateGridEditStatus = (): void => {
+        var gridEditStatus: boolean = false;
         var BreakException = {};
 
-        try{
+        try {
             activateCellEdit.forEach((item, index) => {
                 gridEditStatus = gridEditStatus || item.isActivated;
-                if(gridEditStatus){
+                if (gridEditStatus) {
                     throw BreakException;
                 }
-                
+
                 var objectKeys = Object.keys(item.properties);
                 objectKeys.filter(key => key != '_grid_row_id_' && key != '_grid_row_operation_').forEach((objKey) => {
                     gridEditStatus = gridEditStatus || item['properties'][objKey]['activated'];
-                    if(gridEditStatus){
+                    if (gridEditStatus) {
                         throw BreakException;
                     }
                 });
@@ -225,24 +228,24 @@ const EditableGrid = (props: Props) => {
             // if (e !== BreakException) throw e;
         }
 
-        if((!isGridInEdit && gridEditStatus) || (isGridInEdit && !gridEditStatus)){
+        if ((!isGridInEdit && gridEditStatus) || (isGridInEdit && !gridEditStatus)) {
             setIsGridInEdit(gridEditStatus);
         }
     }
 
-    const SetGridItems = (data : any[]) : void => {
+    const SetGridItems = (data: any[]): void => {
         data = ResetGridRowID(data);
         setDefaultGridData(data);
         setActivateCellEdit(InitializeInternalGridEditStructure(data));
     }
 
-    const setGridEditState = (editState : boolean) : void => {
-        if(isGridStateEdited != editState){
+    const setGridEditState = (editState: boolean): void => {
+        if (isGridStateEdited != editState) {
             setIsGridStateEdited(editState);
         }
     }
 
-    const SetFilteredGridData = (filters : IFilter[]) : void => {
+    const SetFilteredGridData = (filters: IFilter[]): void => {
         var filteredData = filterGridData(defaultGridData, filters);
         var activateCellEditTmp = ShallowCopyDefaultGridToEditGrid(defaultGridData, activateCellEdit);
         setDefaultGridData(filteredData);
@@ -262,7 +265,7 @@ const EditableGrid = (props: Props) => {
     /* #endregion */
 
     /* #region [Grid Column Update Functions] */
-    const UpdateBulkData = (data : any, defaultGridDataArr : any[]) : any[] => {
+    const UpdateBulkData = (data: any, defaultGridDataArr: any[]): any[] => {
         let newDefaultGridData = [...defaultGridDataArr];
 
         selectedItems!.forEach((item, index) => {
@@ -270,7 +273,7 @@ const EditableGrid = (props: Props) => {
                 var objectKeys = Object.keys(data);
                 objectKeys.forEach((objKey) => {
                     row[objKey] = data[objKey];
-                    if(row._grid_row_operation_ != Operation.Add){
+                    if (row._grid_row_operation_ != Operation.Add) {
                         row._grid_row_operation_ = Operation.Update;
                     }
                 });
@@ -283,11 +286,11 @@ const EditableGrid = (props: Props) => {
         return newDefaultGridData;
     };
 
-    const CheckBulkUpdateOnChangeCallBack = (data : any, defaultGridDataTmp : any[]) : any[] => {
-        var columns : IColumnConfig[] = [];
-        for(var key in data){
+    const CheckBulkUpdateOnChangeCallBack = (data: any, defaultGridDataTmp: any[]): any[] => {
+        var columns: IColumnConfig[] = [];
+        for (var key in data) {
             var column = props.columns.filter((item) => item.key == key)[0];
-            if(column.onChange){
+            if (column.onChange) {
                 columns.push(column);
             }
         }
@@ -298,11 +301,11 @@ const EditableGrid = (props: Props) => {
 
         return defaultGridDataTmp;
     };
-    
-    const UpdateGridColumnData = (data : any) : void => {
-        
+
+    const UpdateGridColumnData = (data: any): void => {
+
         var defaultGridDataTmp = UpdateBulkData(data, defaultGridData);
-        
+
         CloseColumnUpdateDialog();
 
         defaultGridDataTmp = CheckBulkUpdateOnChangeCallBack(data, defaultGridDataTmp);
@@ -310,7 +313,7 @@ const EditableGrid = (props: Props) => {
     }
 
     const CloseColumnUpdateDialog = (): void => {
-        
+
         setIsUpdateColumnClicked(false);
     };
 
@@ -324,12 +327,12 @@ const EditableGrid = (props: Props) => {
         setDialogContent(undefined);
     }, []);
 
-    const GetDefaultRowObject = (rowCount : number) : any[] => {
-        let obj : any = {};
-        let addedRows : any[] = [];
-        let _new_grid_row_id_ = Math.max.apply(Math, defaultGridData.map(function(o) { return o._grid_row_id_; }));
+    const GetDefaultRowObject = (rowCount: number): any[] => {
+        let obj: any = {};
+        let addedRows: any[] = [];
+        let _new_grid_row_id_ = Math.max.apply(Math, defaultGridData.map(function (o) { return o._grid_row_id_; }));
 
-        for(var i = 1; i <= rowCount; i++){
+        for (var i = 1; i <= rowCount; i++) {
             obj = {};
             props.columns.forEach((item, index) => {
                 obj[item.key] = GetDefault(item.dataType);
@@ -342,61 +345,61 @@ const EditableGrid = (props: Props) => {
             obj._is_filtered_in_column_filter_ = true;
             addedRows.push(obj);
         }
-        
+
         return addedRows;
     };
 
-    const AddRowsToGrid = () : void => {
-        const updateItemName = () : void => {
+    const AddRowsToGrid = (): void => {
+        const updateItemName = (): void => {
             if (SpinRef && SpinRef.current.value) {
                 setDialogContent(undefined);
                 setAnnounced(<Announced message="Rows Added" aria-live="assertive" />);
-                
-                let rowCount = parseInt(SpinRef.current.value, 10) ;
+
+                let rowCount = parseInt(SpinRef.current.value, 10);
                 var addedRows = GetDefaultRowObject(rowCount);
                 var newGridData = [...defaultGridData, ...addedRows];
                 setGridEditState(true);
                 SetGridItems(newGridData);
             }
         };
-          
+
         setDialogContent(
             <>
-              <SpinButton
-                componentRef = {SpinRef}
-                defaultValue="0"
-                label={'Row Count:'}
-                min={0}
-                max={100}
-                step={1}
-                incrementButtonAriaLabel={'Increase value by 1'}
-                decrementButtonAriaLabel={'Decrease value by 1'}
-                />
-              <DialogFooter>
-                <PrimaryButton
-                  // eslint-disable-next-line react/jsx-no-bind
-                  onClick={updateItemName}
-                  text="Save"
+                <SpinButton
+                    componentRef={SpinRef}
+                    defaultValue="0"
+                    label={'Row Count:'}
+                    min={0}
+                    max={100}
+                    step={1}
+                    incrementButtonAriaLabel={'Increase value by 1'}
+                    decrementButtonAriaLabel={'Decrease value by 1'}
                 />
-              </DialogFooter>
+                <DialogFooter>
+                    <PrimaryButton
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick={updateItemName}
+                        text="Save"
+                    />
+                </DialogFooter>
             </>,
-          );
+        );
     }
 
     const onAddPanelChange = (item: any, noOfRows: number): void => {
         dismissPanelForAdd();
-        if(noOfRows < 1){
+        if (noOfRows < 1) {
             return;
         }
 
         var addedRows = GetDefaultRowObject(noOfRows);
-        if(Object.keys(item).length > 0){
+        if (Object.keys(item).length > 0) {
             addedRows.map((row) => {
                 var objectKeys = Object.keys(item);
                 objectKeys.forEach((key) => {
                     row[key] = item[key];
                 })
-    
+
                 return row;
             });
         }
@@ -405,28 +408,28 @@ const EditableGrid = (props: Props) => {
         addedRows.forEach((row, index) => newGridData.splice(index, 0, row));
         setGridEditState(true);
         SetGridItems(newGridData);
-    };    
+    };
     /* #endregion */
 
     /* #region [Grid Row Delete Functions] */
-    const ShowMessageDialog = (message : string, subMessage : string) : void => {
+    const ShowMessageDialog = (message: string, subMessage: string): void => {
         setMessageDialogProps({
             visible: true,
-            message:message,
-            subMessage:subMessage
+            message: message,
+            subMessage: subMessage
         });
     }
 
     const CloseMessageDialog = (): void => {
         setMessageDialogProps({
             visible: false,
-            message:'',
-            subMessage:''
+            message: '',
+            subMessage: ''
         });
     };
 
-    const DeleteSelectedRows = () : void => {
-        
+    const DeleteSelectedRows = (): void => {
+
         let defaultGridDataTmp = [...defaultGridData];
 
         selectedItems!.forEach((item, index) => {
@@ -439,13 +442,12 @@ const EditableGrid = (props: Props) => {
     /* #endregion */
 
     /* #region [Grid Export Functions] */
-    const getExportableData = () : any[] => 
-    {
-        let exportableColumns = props.columns.filter(x=> x.includeColumnInExport == true);
-        
-        let exportableData : any[] = [];
-        let exportableObj : any = {};
-        if(!selectedItems || selectedItems.length == 0){
+    const getExportableData = (): any[] => {
+        let exportableColumns = props.columns.filter(x => x.includeColumnInExport == true);
+
+        let exportableData: any[] = [];
+        let exportableObj: any = {};
+        if (!selectedItems || selectedItems.length == 0) {
             defaultGridData.filter(item => item._grid_row_operation_ != Operation.Delete && item._is_filtered_in_ && item._is_filtered_in_column_filter_ && item._is_filtered_in_grid_search_).forEach((item1, index1) => {
                 exportableColumns.forEach((item2, index2) => {
                     exportableObj[item2.text] = item1[item2.key];
@@ -454,10 +456,10 @@ const EditableGrid = (props: Props) => {
                 exportableObj = {};
             });
         }
-        else{
+        else {
             selectedItems!.forEach((sel, index) => {
                 defaultGridData.filter(item => item._grid_row_operation_ != Operation.Delete && item._is_filtered_in_ && item._is_filtered_in_column_filter_ && item._is_filtered_in_grid_search_).forEach((item1, index1) => {
-                    if(sel._grid_row_id_ == item1._grid_row_id_){
+                    if (sel._grid_row_id_ == item1._grid_row_id_) {
                         exportableColumns.forEach((item2, index2) => {
                             exportableObj[item2.text] = item1[item2.key];
                         });
@@ -471,27 +473,27 @@ const EditableGrid = (props: Props) => {
         return exportableData;
     }
 
-    const ExportToCSV = (dataRows : any[], fileName : string) : void => {
-        if(!props.onExcelExport){
+    const ExportToCSV = (dataRows: any[], fileName: string): void => {
+        if (!props.onExcelExport) {
             ExportToCSVUtil(dataRows, fileName);
         }
-        else{
+        else {
             props.onExcelExport(ExportType.CSV);
         }
     };
 
-    const ExportToExcel = (dataRows : any[], fileName : string) : void => {
-        if(!props.onExcelExport){
+    const ExportToExcel = (dataRows: any[], fileName: string): void => {
+        if (!props.onExcelExport) {
             ExportToExcelUtil(dataRows, fileName);
         }
-        else{
+        else {
             props.onExcelExport(ExportType.XLSX);
         }
     };
 
-    const onExportClick = (type : ExportType): void => {
+    const onExportClick = (type: ExportType): void => {
         let fileName = props.exportFileName != null && props.exportFileName.length > 0 ? props.exportFileName : 'ExcelExport';
-        switch (type){
+        switch (type) {
             case ExportType.XLSX:
                 ExportToExcel(getExportableData(), fileName + '.xlsx');
                 break;
@@ -503,21 +505,21 @@ const EditableGrid = (props: Props) => {
     /* #endregion */
 
     /* #region [Grid Cell Edit Functions] */
-    const SaveSingleCellValue = (key : string, rowNum : number, defaultGridDataArr : any[]) : any[] => {
-        let defaultGridDataTmp : any[] = [];
+    const SaveSingleCellValue = (key: string, rowNum: number, defaultGridDataArr: any[]): any[] => {
+        let defaultGridDataTmp: any[] = [];
         defaultGridDataTmp = [...defaultGridDataArr];
         var internalRowNumDefaultGrid = defaultGridDataTmp.findIndex((row) => row._grid_row_id_ == rowNum);
         var internalRowNumActivateGrid = activateCellEdit.findIndex((row) => row['properties']['_grid_row_id_']['value'] == rowNum);
         defaultGridDataTmp[internalRowNumDefaultGrid][key] = activateCellEdit[internalRowNumActivateGrid]['properties'][key]['value'];
-        if(defaultGridDataTmp[internalRowNumDefaultGrid]['_grid_row_operation_'] != Operation.Add){
+        if (defaultGridDataTmp[internalRowNumDefaultGrid]['_grid_row_operation_'] != Operation.Add) {
             defaultGridDataTmp[internalRowNumDefaultGrid]['_grid_row_operation_'] = Operation.Update;
         }
         return defaultGridDataTmp;
     };
 
-    const onCellValueChange = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, item : {}, row : number, key : string, column : IColumnConfig): void => {
-        if(!IsValidDataType(column.dataType, text)){
-            let activateCellEditTmp : any[] = [];
+    const onCellValueChange = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, item: {}, row: number, key: string, column: IColumnConfig): void => {
+        if (!IsValidDataType(column.dataType, text)) {
+            let activateCellEditTmp: any[] = [];
             activateCellEditTmp = [...activateCellEdit];
             activateCellEditTmp[row]['properties'][key]['error'] = `Value not '${column.dataType}'`;
             setActivateCellEdit(activateCellEditTmp);
@@ -526,147 +528,208 @@ const EditableGrid = (props: Props) => {
 
         setGridEditState(true);
 
-        let activateCellEditTmp : any[] = [];
+        let activateCellEditTmp: any[] = [];
         activateCellEdit.forEach((item, index) => {
-            if(row == index){
+            if (row == index) {
                 item.properties[key].value = ParseType(column.dataType, text);
                 item.properties[key].error = null;
             }
 
             activateCellEditTmp.push(item);
         });
-        
-        if(column.onChange){
+
+        if (column.onChange) {
             HandleColumnOnChange(activateCellEditTmp, row, column);
         }
-        
+
         //ShallowCopyEditGridToDefaultGrid(defaultGridData, activateCellEditTmp);
         setActivateCellEdit(activateCellEditTmp);
     };
 
-    const CheckCellOnChangeCallBack = (defaultGridDataTmp : any[], row : Number[], column : IColumnConfig) : any[] => {
-        var callbackRequestparams : ICallBackParams = { 
-            data : defaultGridDataTmp, 
-            rowindex : row, 
-            triggerkey : column.key, 
-            activatetriggercell : false
+    const CheckCellOnChangeCallBack = (defaultGridDataTmp: any[], row: Number[], column: IColumnConfig): any[] => {
+        var callbackRequestparams: ICallBackParams = {
+            data: defaultGridDataTmp,
+            rowindex: row,
+            triggerkey: column.key,
+            activatetriggercell: false
         };
 
-        var defaultGridBck : any[] = [...defaultGridDataTmp];
+        var defaultGridBck: any[] = [...defaultGridDataTmp];
         defaultGridDataTmp = column.onChange(callbackRequestparams);
-        if(!defaultGridDataTmp)
+        if (!defaultGridDataTmp)
             defaultGridDataTmp = defaultGridBck;
         return defaultGridDataTmp;
     };
 
-    const onDoubleClickEvent = (key : string, rowNum : number, activateCurrentCell : boolean) : void => {
+    const onDoubleClickEvent = (key: string, rowNum: number, activateCurrentCell: boolean): void => {
         EditCellValue(key, rowNum, activateCurrentCell);
     }
 
-    const onCellPickerDoubleClickEvent = (key : string, rowNum : number, activateCurrentCell : boolean) : void => {
+    const onCellPickerDoubleClickEvent = (key: string, rowNum: number, activateCurrentCell: boolean): void => {
         EditCellValue(key, rowNum, activateCurrentCell);
     }
 
-    const onDropdownDoubleClickEvent = (key : string, rowNum : number, activateCurrentCell : boolean) : void => {
+    const onDropdownDoubleClickEvent = (key: string, rowNum: number, activateCurrentCell: boolean): void => {
         EditCellValue(key, rowNum, activateCurrentCell);
     }
 
-    const onKeyDownEvent = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>, column : IColumnConfig, rowNum : number, activateCurrentCell : boolean) : void => {
-        if(event.key == "Enter"){
-            if(!activateCellEdit[rowNum].isActivated){
+    const onKeyDownEvent = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>, column: IColumnConfig, rowNum: number, activateCurrentCell: boolean): void => {
+        if (event.key == "Enter") {
+            if (!activateCellEdit[rowNum].isActivated) {
                 EditCellValue(column.key, rowNum, activateCurrentCell);
                 event.preventDefault();
             }
         }
     }
 
-    const onCellDateChange = (date: Date | null | undefined, item1 : {}, row : number, column : IColumnConfig): void => {
+    const onCellDateChange = (date: Date | null | undefined, item1: {}, row: number, column: IColumnConfig): void => {
         setGridEditState(true);
-        
-        let activateCellEditTmp : any[] = [];
+
+        let activateCellEditTmp: any[] = [];
         activateCellEdit.forEach((item, index) => {
-            if(row == index){
+            if (row == index) {
                 item.properties[column.key].value = dateToISOLikeButLocal(date);
             }
 
             activateCellEditTmp.push(item);
         });
 
-        if(column.onChange){
+        if (column.onChange) {
+            HandleColumnOnChange(activateCellEditTmp, row, column);
+        }
+
+        setActivateCellEdit(activateCellEditTmp);
+    };
+
+    const onCell_DT_TimeChange = (dateTime: Date | null | undefined, item1: {}, row: number, column: IColumnConfig): void => {
+        setGridEditState(true);
+
+        let activateCellEditTmp: any[] = [];
+        activateCellEdit.forEach((item, index) => {
+            if (row == index) {
+                let currentDate = item.properties[column.key].value;
+
+                if (currentDate === undefined || currentDate === null) {
+                    currentDate = dateTime;
+                } else if (dateTime !== null && dateTime !== undefined) {
+                    currentDate = new Date(currentDate);
+                    currentDate.setHours(dateTime.getHours());
+                    currentDate.setMinutes(dateTime.getMinutes());
+                    currentDate.setSeconds(dateTime.getSeconds());
+                    currentDate.setMilliseconds(dateTime.getMilliseconds());
+                }
+
+                item.properties[column.key].value = currentDate.toISOString();
+            }
+
+            activateCellEditTmp.push(item);
+        });
+
+        if (column.onChange) {
+            HandleColumnOnChange(activateCellEditTmp, row, column);
+        }
+
+        setActivateCellEdit(activateCellEditTmp);
+    }
+
+    const onCell_DT_DateChange = (date: Date | null | undefined, item1: {}, row: number, column: IColumnConfig): void => {
+        setGridEditState(true);
+
+        let activateCellEditTmp: any[] = [];
+        activateCellEdit.forEach((item, index) => {
+            if (row == index) {
+                let currentDate = item.properties[column.key].value;
+
+                if (currentDate === undefined || currentDate === null) {
+                    currentDate = date;
+                } else if (date !== null && date !== undefined) {
+                    currentDate = new Date(currentDate);
+                    currentDate.setFullYear(date.getFullYear());
+                    currentDate.setMonth(date.getMonth());
+                    currentDate.setDate(date.getDate());
+                }
+
+                item.properties[column.key].value = currentDate.toISOString();
+            }
+
+            activateCellEditTmp.push(item);
+        });
+
+        if (column.onChange) {
             HandleColumnOnChange(activateCellEditTmp, row, column);
         }
 
         setActivateCellEdit(activateCellEditTmp);
     };
 
-    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, row : number, column : IColumnConfig) : void => {
+    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, row: number, column: IColumnConfig): void => {
         setGridEditState(true);
 
-        let activateCellEditTmp : any[] = [];
+        let activateCellEditTmp: any[] = [];
         activateCellEdit.forEach((item, index) => {
-            if(row == index){
+            if (row == index) {
                 item.properties[column.key].value = '';
-                if(cellPickerTagList && cellPickerTagList.length > 0){
+                if (cellPickerTagList && cellPickerTagList.length > 0) {
                     cellPickerTagList!.forEach((tag) => {
                         item.properties[column.key].value += tag.name + ';';
                     });
                 }
 
-                let str : string = item.properties[column.key].value;
+                let str: string = item.properties[column.key].value;
                 item.properties[column.key].value = str.length > 0 ? str.substring(0, str.length - 1) : str;
             }
 
             activateCellEditTmp.push(item);
         });
 
-        if(column.onChange){
+        if (column.onChange) {
             HandleColumnOnChange(activateCellEditTmp, row, column);
         }
 
         setActivateCellEdit(activateCellEditTmp);
     }
 
-    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, row : number, column : IColumnConfig): void => {
+    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, row: number, column: IColumnConfig): void => {
         setGridEditState(true);
-        
-        let activateCellEditTmp : any[] = [];
+
+        let activateCellEditTmp: any[] = [];
         activateCellEdit.forEach((item, index) => {
-            if(row == index){
+            if (row == index) {
                 item.properties[column.key].value = selectedDropdownItem?.text;
             }
 
             activateCellEditTmp.push(item);
         });
 
-        if(column.onChange){
+        if (column.onChange) {
             HandleColumnOnChange(activateCellEditTmp, row, column);
         }
 
         setActivateCellEdit(activateCellEditTmp);
     };
 
-    const ChangeCellState = (key : string, rowNum : number, activateCurrentCell : boolean, activateCellEditArr : any[]) : any[] => {
-        let activateCellEditTmp : any[] = [];
+    const ChangeCellState = (key: string, rowNum: number, activateCurrentCell: boolean, activateCellEditArr: any[]): any[] => {
+        let activateCellEditTmp: any[] = [];
         activateCellEditTmp = [...activateCellEditArr];
         activateCellEditTmp[rowNum]['properties'][key]['activated'] = activateCurrentCell;
         activateCellEditTmp[rowNum]['properties'][key]['error'] = !activateCurrentCell ? null : activateCellEditTmp[rowNum]['properties'][key]['error'];
         return activateCellEditTmp;
     };
 
-    const EditCellValue = (key : string, rowNum : number, activateCurrentCell : boolean) : void => {
-        let activateCellEditTmp : any[] = ChangeCellState(key, rowNum, activateCurrentCell, activateCellEdit);
+    const EditCellValue = (key: string, rowNum: number, activateCurrentCell: boolean): void => {
+        let activateCellEditTmp: any[] = ChangeCellState(key, rowNum, activateCurrentCell, activateCellEdit);
         setActivateCellEdit(activateCellEditTmp);
 
-        if(!activateCurrentCell){
-            let defaultGridDataTmp : any[] = SaveSingleCellValue(key, rowNum, defaultGridData);
+        if (!activateCurrentCell) {
+            let defaultGridDataTmp: any[] = SaveSingleCellValue(key, rowNum, defaultGridData);
             setDefaultGridData(defaultGridDataTmp);
         }
     }
 
-    const HandleColumnOnChange = (activateCellEditTmp : any[], row : number, column : IColumnConfig) : void => {
-        var arr : any[] = [];
+    const HandleColumnOnChange = (activateCellEditTmp: any[], row: number, column: IColumnConfig): void => {
+        var arr: any[] = [];
         activateCellEditTmp.forEach((item, index) => {
-            var rowObj : any = {};
+            var rowObj: any = {};
             var objectKeys = Object.keys(item.properties);
             objectKeys.forEach((objKey) => {
                 rowObj[objKey] = item.properties[objKey].value;
@@ -681,8 +744,8 @@ const EditableGrid = (props: Props) => {
     /* #endregion */
 
     /* #region [Grid Row Edit Functions] */
-    const ChangeRowState = (item : any, rowNum : number, enableTextField : boolean) : any[] => {
-        let activateCellEditTmp : any[] = [...activateCellEdit];
+    const ChangeRowState = (item: any, rowNum: number, enableTextField: boolean): any[] => {
+        let activateCellEditTmp: any[] = [...activateCellEdit];
         var objectKeys = Object.keys(item);
         objectKeys.filter(key => key != '_grid_row_id_' && key != '_grid_row_operation_').forEach((objKey) => {
             activateCellEditTmp = ChangeCellState(objKey, rowNum, enableTextField, activateCellEditTmp);
@@ -693,8 +756,8 @@ const EditableGrid = (props: Props) => {
         return activateCellEditTmp;
     };
 
-    const SaveRowValue = (item : any, rowNum : number, defaultGridDataArr : any[]) : any[] => {
-        let defaultGridDataTmp : any[] = [];
+    const SaveRowValue = (item: any, rowNum: number, defaultGridDataArr: any[]): any[] => {
+        let defaultGridDataTmp: any[] = [];
         defaultGridDataTmp = [...defaultGridDataArr];
 
         var objectKeys = Object.keys(item);
@@ -706,20 +769,20 @@ const EditableGrid = (props: Props) => {
         return defaultGridDataTmp;
     };
 
-    const ShowRowEditMode = (item : any, rowNum : number, enableTextField : boolean) : void => {
-        if(enableTextField){
+    const ShowRowEditMode = (item: any, rowNum: number, enableTextField: boolean): void => {
+        if (enableTextField) {
             setCancellableRows(cancellableRows => [...cancellableRows, item]);
         }
-        else{
+        else {
             setCancellableRows(cancellableRows.filter(row => row._grid_row_id_ != item._grid_row_id_));
         }
-        
-        let activateCellEditTmp : any[] = ChangeRowState(item, rowNum, enableTextField);
-        
+
+        let activateCellEditTmp: any[] = ChangeRowState(item, rowNum, enableTextField);
+
         setActivateCellEdit(activateCellEditTmp);
 
-        if(!enableTextField){
-            let defaultGridDataTmp : any[] = SaveRowValue(item, rowNum, defaultGridData);
+        if (!enableTextField) {
+            let defaultGridDataTmp: any[] = SaveRowValue(item, rowNum, defaultGridData);
             setDefaultGridData(defaultGridDataTmp);
         }
     }
@@ -729,29 +792,29 @@ const EditableGrid = (props: Props) => {
     //     // SetGridItems(defaultGridData);
     //     let activateCellEditTmp : any[] = ChangeRowState(item, rowNum, false);
     //     activateCellEditTmp = RevertRowEditValues(rowNum, activateCellEditTmp);
-        
+
     //     setActivateCellEdit(activateCellEditTmp);
     //     setDefaultGridData(defaultGridData);
     // }
 
-    const CancelRowEditMode = (item : any, rowNum : number) : void => {
+    const CancelRowEditMode = (item: any, rowNum: number): void => {
         // SetGridItems(defaultGridData);
-        let activateCellEditTmp : any[] = ChangeRowState(item, rowNum, false);
+        let activateCellEditTmp: any[] = ChangeRowState(item, rowNum, false);
         activateCellEditTmp = RevertRowEditValues(rowNum, activateCellEditTmp);
-        
+
         setActivateCellEdit(activateCellEditTmp);
         //setDefaultGridData(defaultGridData);
         setDefaultGridData(ShallowCopyEditGridToDefaultGrid(defaultGridData, activateCellEditTmp));
     }
 
-    const RevertRowEditValues = (rowNum : number, activateCellEditArr : any) : any[] => {
+    const RevertRowEditValues = (rowNum: number, activateCellEditArr: any): any[] => {
         var activateCellEditTmp = [...activateCellEditArr];
         //var baseRow = defaultGridData.filter(x => x._grid_row_id_ == rowNum)[0];
         var baseRow = cancellableRows.filter(x => x._grid_row_id_ == rowNum)[0];
         var objectKeys = Object.keys(baseRow);
         var targetRow = activateCellEditTmp.filter(x => x.properties['_grid_row_id_'].value == rowNum)[0];
         objectKeys.forEach((objKey) => {
-            if([objKey != '_grid_row_id_']){
+            if (objKey != '_grid_row_id_') {
                 targetRow['properties'][objKey]['value'] = baseRow[objKey];
             }
         });
@@ -760,18 +823,18 @@ const EditableGrid = (props: Props) => {
         return activateCellEditTmp;
     }
     /* #endregion */
-    
+
     /* #region [Grid Edit Mode Functions] */
-    const ShowGridEditMode = () : void => {
+    const ShowGridEditMode = (): void => {
         var newEditModeValue = !editMode;
-        if(newEditModeValue){
+        if (newEditModeValue) {
             setCancellableRows(defaultGridData);
         }
-        else{
+        else {
             setCancellableRows([]);
         }
-        let activateCellEditTmp : any[] = [];
-        let defaultGridDataTmp : any[] = [];
+        let activateCellEditTmp: any[] = [];
+        let defaultGridDataTmp: any[] = [];
 
         defaultGridData.forEach((item, rowNum) => {
             activateCellEditTmp = ChangeRowState(item, item['_grid_row_id_'], newEditModeValue);
@@ -779,7 +842,7 @@ const EditableGrid = (props: Props) => {
 
         setActivateCellEdit(activateCellEditTmp);
 
-        if(!newEditModeValue){
+        if (!newEditModeValue) {
             defaultGridData.forEach((item, rowNum) => {
                 defaultGridDataTmp = SaveRowValue(item, item['_grid_row_id_'], defaultGridData);
             });
@@ -789,64 +852,64 @@ const EditableGrid = (props: Props) => {
         setEditMode(newEditModeValue);
     }
 
-    const CancelGridEditMode = () : void => {
-        SetGridItems(cancellableRows); 
+    const CancelGridEditMode = (): void => {
+        SetGridItems(cancellableRows);
         setCancellableRows([]);
         setEditMode(false);
     }
     /* #endregion */
 
     /* #region [Grid Copy Functions] */
-    
+
     const CopyGridRows = (): void => {
-        if(selectedIndices.length == 0){
-          ShowMessageDialog(
-            "No Rows Selected",
-            "Please select some rows to perform this operation"
-          );
-          return;
+        if (selectedIndices.length == 0) {
+            ShowMessageDialog(
+                "No Rows Selected",
+                "Please select some rows to perform this operation"
+            );
+            return;
         }
-    
-        var copyText : string = '';
+
+        var copyText: string = '';
         selectedItems!.forEach(i => {
-          copyText += ConvertObjectToText(defaultGridData.filter(x => x['_grid_row_id_'] == i['_grid_row_id_'])[0], props.columns) + '\r\n';
+            copyText += ConvertObjectToText(defaultGridData.filter(x => x['_grid_row_id_'] == i['_grid_row_id_'])[0], props.columns) + '\r\n';
         });
-    
-        navigator.clipboard.writeText(copyText).then(function() {
-            if(props.onGridStatusMessageCallback)
-                props.onGridStatusMessageCallback(selectedIndices.length + ` ${selectedIndices.length == 1 ? 'row' : 'rows' } copied to clipboard`);
-        }, function() {
-          /* clipboard write failed */
+
+        navigator.clipboard.writeText(copyText).then(function () {
+            if (props.onGridStatusMessageCallback)
+                props.onGridStatusMessageCallback(selectedIndices.length + ` ${selectedIndices.length == 1 ? 'row' : 'rows'} copied to clipboard`);
+        }, function () {
+            /* clipboard write failed */
         });
-      }
-    
-      const HandleRowCopy = (rowNum: number): void => {
-        navigator.clipboard.writeText(ConvertObjectToText(defaultGridData[rowNum], props.columns)).then(function() {
-            if(props.onGridStatusMessageCallback)
+    }
+
+    const HandleRowCopy = (rowNum: number): void => {
+        navigator.clipboard.writeText(ConvertObjectToText(defaultGridData[rowNum], props.columns)).then(function () {
+            if (props.onGridStatusMessageCallback)
                 props.onGridStatusMessageCallback('1 row copied to clipboard');
-        }, function() {
-          /* clipboard write failed */
+        }, function () {
+            /* clipboard write failed */
         });
-      }
+    }
 
     /* #endregion */
 
-    const RowSelectOperations = (type : EditType, item : {}): boolean => {
-        switch (type){
+    const RowSelectOperations = (type: EditType, item: {}): boolean => {
+        switch (type) {
             case EditType.BulkEdit:
-                if(selectedIndices.length > 0){
+                if (selectedIndices.length > 0) {
                     setIsOpenForEdit(true);
                 }
-                else{
+                else {
                     ShowMessageDialog('No Rows Selected', 'Please select some rows to perform this operation');
                 }
                 break;
             case EditType.ColumnEdit:
-                
-                if(selectedIndices.length > 0){
+
+                if (selectedIndices.length > 0) {
                     ShowColumnUpdate();
                 }
-                else{
+                else {
                     ShowMessageDialog('No Rows Selected', 'Please select some rows to perform this operation');
                     return false;
                 }
@@ -856,10 +919,10 @@ const EditableGrid = (props: Props) => {
                 //toggleHideDialog;
                 break;
             case EditType.DeleteRow:
-                if(selectedIndices.length > 0){
+                if (selectedIndices.length > 0) {
                     DeleteSelectedRows();
                 }
-                else{
+                else {
                     ShowMessageDialog('No Rows Selected', 'Please select some rows to perform this operation');
                 }
                 break;
@@ -874,30 +937,30 @@ const EditableGrid = (props: Props) => {
         return true;
     }
 
-    const ResetGridData = () : void => {
-        
+    const ResetGridData = (): void => {
+
         setGridEditState(false);
         ClearFilters();
-        SetGridItems(backupDefaultGridData.map(obj => ({...obj})));
+        SetGridItems(backupDefaultGridData.map(obj => ({ ...obj })));
     };
 
     /* #region [Column Click] */
-    const onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn, index : number) => {
+    const onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn, index: number) => {
         ev.preventDefault();
         ShowFilterForColumn(column, index);
     }
 
     const onColumnContextMenu = (column: IColumn | undefined, ev: React.MouseEvent<HTMLElement> | undefined) => {
         //ev!.preventDefault();
-        var newColumns : IColumn[] = GridColumns.slice();
+        var newColumns: IColumn[] = GridColumns.slice();
         const currColumn: IColumn = newColumns.filter(currCol => column!.key === currCol.key)[0];
         newColumns.forEach((newCol: IColumn) => {
             if (newCol === currColumn) {
-              currColumn.isSortedDescending = !currColumn.isSortedDescending;
-              currColumn.isSorted = true;
+                currColumn.isSortedDescending = !currColumn.isSortedDescending;
+                currColumn.isSorted = true;
             } else {
-              newCol.isSorted = false;
-              newCol.isSortedDescending = true;
+                newCol.isSorted = false;
+                newCol.isSortedDescending = true;
             }
         });
 
@@ -911,22 +974,22 @@ const EditableGrid = (props: Props) => {
         return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
     }
     /* #endregion */
-    
+
     /* #region [Column Filter] */
-    const getFilterStoreRef = () : IFilter[] => {
+    const getFilterStoreRef = (): IFilter[] => {
         return filterStoreRef.current;
     };
 
-    const setFilterStoreRef = (value : IFilter[]) : void => {
+    const setFilterStoreRef = (value: IFilter[]): void => {
         filterStoreRef.current = value;
     };
 
-    const clearFilterStoreRef = () : void => {
+    const clearFilterStoreRef = (): void => {
         filterStoreRef.current = [];
     }
-    
+
     const CloseColumnFilterDialog = (): void => {
-        
+
         setIsColumnFilterClicked(false);
     };
 
@@ -934,52 +997,53 @@ const EditableGrid = (props: Props) => {
         setIsColumnFilterClicked(s => !s);
     };
 
-    const onFilterApplied = (filter : IFilter) : void => {
-        
-        var tags : ITag[] = [...defaultTag];
-        tags.push({ name: '\'' + filter.column.key + '\' ' + filter.operator + ' ' + '\'' + filter.value + '\'', 
-                    key: filter.column.key 
-                })
-        
-        var filterStoreTmp : IFilter[] = getFilterStoreRef();;
+    const onFilterApplied = (filter: IFilter): void => {
+
+        var tags: ITag[] = [...defaultTag];
+        tags.push({
+            name: '\'' + filter.column.key + '\' ' + filter.operator + ' ' + '\'' + filter.value + '\'',
+            key: filter.column.key
+        })
+
+        var filterStoreTmp: IFilter[] = getFilterStoreRef();;
         filterStoreTmp.push(filter);
-        
+
         setFilterStoreRef(filterStoreTmp);
         setFilteredColumns(filteredColumns => [...filteredColumns, filter.column]);
         setDefaultTag(tags);
         CloseColumnFilterDialog();
     }
 
-    const ClearFilters = () : void => {
+    const ClearFilters = (): void => {
         setDefaultTag([]);
         clearFilterStoreRef();
         setFilteredColumns([]);
     }
 
     const onFilterTagListChanged = React.useCallback((tagList: ITag[] | undefined): void => {
-        
-        if(tagList != null && tagList.length == 0){
+
+        if (tagList != null && tagList.length == 0) {
             ClearFilters();
             return;
         }
 
-        var filterStoreTmp : IFilter[] = [];
+        var filterStoreTmp: IFilter[] = [];
         tagList!.forEach((item) => {
             var storeRow = getFilterStoreRef().filter((val) => val.column.key == item.key);
-            if(storeRow.length > 0){
+            if (storeRow.length > 0) {
                 filterStoreTmp.push(storeRow[0]);
             }
         });
 
         setFilterStoreRef(filterStoreTmp);
-        var filteredColumnsTmp : IColumnConfig[] = [];
+        var filteredColumnsTmp: IColumnConfig[] = [];
         filteredColumnsTmp = props.columns.filter((item) => tagList!.filter((val) => val.key == item.key).length > 0);
         setFilteredColumns(filteredColumnsTmp);
         setDefaultTag(tagList!);
     }, []);
-    
+
     const onFilterChanged = React.useCallback((filterText: string, tagList: ITag[] | undefined): ITag[] => {
-        var emptyITag : ITag[] = [];
+        var emptyITag: ITag[] = [];
         return emptyITag;
     }, []);
 
@@ -998,105 +1062,105 @@ const EditableGrid = (props: Props) => {
     /* #endregion [Column Filter] */
 
     /* #region [Grid Column Filter] */
-    const onFilterApply = (filter : IFilterListProps) : void => {
+    const onFilterApply = (filter: IFilterListProps): void => {
         UpdateColumnFilterValues(filter);
-        var GridColumnFilterArr : IGridColumnFilter[] = getColumnFiltersRef();
+        var GridColumnFilterArr: IGridColumnFilter[] = getColumnFiltersRef();
         var filteredData = applyGridColumnFilter(defaultGridData, GridColumnFilterArr);
         getColumnFiltersRefForColumnKey(filter.columnKey).isApplied = filter.filterList.filter(i => i.isChecked).length > 0 && filter.filterList.filter(i => i.isChecked).length < filter.filterList.length ? true : false;
         var activateCellEditTmp = ShallowCopyDefaultGridToEditGrid(defaultGridData, activateCellEdit);
         setDefaultGridData(filteredData);
         setActivateCellEdit(activateCellEditTmp);
         setGridData(filteredData);
-        setFilterCalloutComponent(undefined); 
+        setFilterCalloutComponent(undefined);
     }
 
-    const UpdateColumnFilterValues = (filter : IFilterListProps) : void => {
-        var gridColumnFilter : IGridColumnFilter = getColumnFiltersRefForColumnKey(filter.columnKey);
+    const UpdateColumnFilterValues = (filter: IFilterListProps): void => {
+        var gridColumnFilter: IGridColumnFilter = getColumnFiltersRefForColumnKey(filter.columnKey);
         gridColumnFilter.filterCalloutProps!.filterList = filter.filterList;
         gridColumnFilter.isHidden = true;
         gridColumnFilter.isApplied = true;
     }
-    
-    const ShowFilterForColumn = (column: IColumn, index : number) : void => {
-        var filter : IGridColumnFilter = getColumnFiltersRefAtIndex(index);
+
+    const ShowFilterForColumn = (column: IColumn, index: number): void => {
+        var filter: IGridColumnFilter = getColumnFiltersRefAtIndex(index);
         filter.isHidden = !filter.isHidden;
-        if(filter.isHidden){
-            setFilterCalloutComponent(undefined); 
+        if (filter.isHidden) {
+            setFilterCalloutComponent(undefined);
             return;
         }
-        
-        var filters : IGridColumnFilter[] = getColumnFiltersRef();
+
+        var filters: IGridColumnFilter[] = getColumnFiltersRef();
         filters.filter((item) => item.index != filter.index && item.column.key != filter.column.key)
-                .map((item) => item.isHidden = true);
-                
+            .map((item) => item.isHidden = true);
+
         filter.filterCalloutProps!.filterList = GetUniqueColumnValues(column, filter.filterCalloutProps!.filterList);
-        
-        setFilterCalloutComponent(<FilterCallout onCancel={() => {setFilterCalloutComponent(undefined)}} onApply={onFilterApply} columnKey={filter.filterCalloutProps!.columnKey} columnName={filter.filterCalloutProps!.columnName} filterList={filter.filterCalloutProps!.filterList} columnClass={filter.filterCalloutProps!.columnClass} />);
+
+        setFilterCalloutComponent(<FilterCallout onCancel={() => { setFilterCalloutComponent(undefined) }} onApply={onFilterApply} columnKey={filter.filterCalloutProps!.columnKey} columnName={filter.filterCalloutProps!.columnName} filterList={filter.filterCalloutProps!.filterList} columnClass={filter.filterCalloutProps!.columnClass} />);
     }
 
-    const GetUniqueColumnValues = (column: IColumn, prevFilters : IFilterItem[]) : IFilterItem[] => {
-        var uniqueVals : string[] = [...new Set(defaultGridData.filter((x) => (x._grid_row_operation_ != Operation.Delete) && (x._is_filtered_in_column_filter_ == true) && (x._is_filtered_in_grid_search_ == true))
-                                            .map(item => item[column.fieldName!]))];
-        var hiddenUniqueVals : string[] = [...new Set(defaultGridData.filter((x) => (x._grid_row_operation_ != Operation.Delete) && ((x._is_filtered_in_column_filter_ == false) || (x._is_filtered_in_grid_search_ == false)))
+    const GetUniqueColumnValues = (column: IColumn, prevFilters: IFilterItem[]): IFilterItem[] => {
+        var uniqueVals: string[] = [...new Set(defaultGridData.filter((x) => (x._grid_row_operation_ != Operation.Delete) && (x._is_filtered_in_column_filter_ == true) && (x._is_filtered_in_grid_search_ == true))
+            .map(item => item[column.fieldName!]))];
+        var hiddenUniqueVals: string[] = [...new Set(defaultGridData.filter((x) => (x._grid_row_operation_ != Operation.Delete) && ((x._is_filtered_in_column_filter_ == false) || (x._is_filtered_in_grid_search_ == false)))
             .map(item => item[column.fieldName!]))];
 
-        var filterItemArr : IFilterItem[] = [];
-        if(!prevFilters || prevFilters.length == 0){
+        var filterItemArr: IFilterItem[] = [];
+        if (!prevFilters || prevFilters.length == 0) {
             filterItemArr = uniqueVals.map((item) => {
-                return {text: item, isChecked: true}
+                return { text: item, isChecked: true }
             })
         }
-        else{
+        else {
             filterItemArr = uniqueVals.map((item) => {
-                var filters : IFilterItem[] = prevFilters.filter((i) => i.text == item);
-                return {text: item, isChecked: filters.length > 0 ? filters[0].isChecked : true}
+                var filters: IFilterItem[] = prevFilters.filter((i) => i.text == item);
+                return { text: item, isChecked: filters.length > 0 ? filters[0].isChecked : true }
             });
         }
-        
+
         return [...filterItemArr, ...hiddenUniqueVals.filter(i => !uniqueVals.includes(i)).map(i => {
-            return {text: i, isChecked: false}
+            return { text: i, isChecked: false }
         })];
     }
 
-    const getColumnFiltersRef = () : IGridColumnFilter[] => {
+    const getColumnFiltersRef = (): IGridColumnFilter[] => {
         return gridColumnFilterArrRef.current;
     };
 
-    const getColumnFiltersRefAtIndex = (index : number) : IGridColumnFilter => {
+    const getColumnFiltersRefAtIndex = (index: number): IGridColumnFilter => {
         return gridColumnFilterArrRef.current[index];
     };
 
-    const getColumnFiltersRefForColumnKey = (key : string) : IGridColumnFilter => {
-        var gridColumnFilterArr : IGridColumnFilter[] = [...gridColumnFilterArrRef.current];
+    const getColumnFiltersRefForColumnKey = (key: string): IGridColumnFilter => {
+        var gridColumnFilterArr: IGridColumnFilter[] = [...gridColumnFilterArrRef.current];
         return gridColumnFilterArr.filter((item) => item.column.key == key)[0];
     };
 
-    const setColumnFiltersRefAtIndex = (index : number, filter : IGridColumnFilter) : void => {
+    const setColumnFiltersRefAtIndex = (index: number, filter: IGridColumnFilter): void => {
         gridColumnFilterArrRef.current[index] = filter;
     };
 
-    const setColumnFiltersRef = (value : IGridColumnFilter[]) : void => {
+    const setColumnFiltersRef = (value: IGridColumnFilter[]): void => {
         gridColumnFilterArrRef.current = value;
     };
 
-    const clearColumnFiltersRef = () : void => {
+    const clearColumnFiltersRef = (): void => {
         gridColumnFilterArrRef.current = [];
     }
     /* #endregion [Grid Column Filter] */
-    
-    const CreateColumnConfigs = () : IColumn[] => {
-        
+
+    const CreateColumnConfigs = (): IColumn[] => {
+
         let columnConfigs: IColumn[] = [];
-        let columnFilterArrTmp : IGridColumnFilter[] = [];
-    
+        let columnFilterArrTmp: IGridColumnFilter[] = [];
+
         props.columns.forEach((column, index) => {
             var colHeaderClassName = 'id-' + props.id + '-col-' + index;
             var colKey = 'col' + index;
-            var isDataTypeSupportedForFilter : boolean = isColumnDataTypeSupportedForFilter(column.dataType);
+            var isDataTypeSupportedForFilter: boolean = isColumnDataTypeSupportedForFilter(column.dataType);
 
             columnConfigs.push({
-                key: colKey, 
-                name: column.text, 
+                key: colKey,
+                name: column.text,
                 headerClassName: colHeaderClassName,
                 ariaLabel: column.text,
                 fieldName: column.key,
@@ -1104,214 +1168,258 @@ const EditableGrid = (props: Props) => {
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
                 onColumnContextMenu: !column.disableSort && !(isGridInEdit || editMode) ? (col, ev) => onColumnContextMenu(col, ev) : undefined,
-                onColumnClick: !(isGridInEdit || editMode) && (isDataTypeSupportedForFilter && column.applyColumnFilter &&  props.enableColumnFilters) ? (ev, col) => onColumnClick(ev, col, index) : undefined,
+                onColumnClick: !(isGridInEdit || editMode) && (isDataTypeSupportedForFilter && column.applyColumnFilter && props.enableColumnFilters) ? (ev, col) => onColumnClick(ev, col, index) : undefined,
                 //data: item.dataType,
                 isSorted: sortColObj.isEnabled && sortColObj.key == colKey,
                 isSortedDescending: !(sortColObj.isEnabled && sortColObj.key == colKey) || !sortColObj.isAscending,
-                isFiltered: (isDataTypeSupportedForFilter && column.applyColumnFilter &&  props.enableColumnFilters && (getColumnFiltersRef() && getColumnFiltersRef().length > 0 && getColumnFiltersRef().filter(i => i.column.key == column.key).length > 0 && getColumnFiltersRef().filter(i => i.column.key == column.key)[0].isApplied)) ? true : false,
+                isFiltered: (isDataTypeSupportedForFilter && column.applyColumnFilter && props.enableColumnFilters && (getColumnFiltersRef() && getColumnFiltersRef().length > 0 && getColumnFiltersRef().filter(i => i.column.key == column.key).length > 0 && getColumnFiltersRef().filter(i => i.column.key == column.key)[0].isApplied)) ? true : false,
                 sortAscendingAriaLabel: 'Sorted A to Z',
                 sortDescendingAriaLabel: 'Sorted Z to A',
                 onRender: column.onRender ? column.onRender : (item, rowNum) => {
                     rowNum = Number(item['_grid_row_id_']);
-                    switch(column.inputType){
+                    switch (column.inputType) {
                         case EditControlType.MultilineTextField:
                             return <span>{
-                                (ShouldRenderSpan()) 
-                                ?
-                                (column?.hoverComponentOptions?.enable ? 
-                                    (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
-                                    >
-                                      {RenderMultilineTextFieldSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderMultilineTextFieldSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderMultilineTextFieldSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
+
                                     :
-                                    (RenderMultilineTextFieldSpan(props, index, rowNum, column, item, EditCellValue))
-                                ) 
-                                 
-                                : 
-                                (<TextField
-                                errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
-                                label={item.text}
-                                ariaLabel={column.key}
-                                multiline={true}
-                                rows={1}
-                                styles={textFieldStyles}
-                                onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
-                                autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated'])}
-                                value={activateCellEdit[rowNum!]['properties'][column.key].value}
-                                onDoubleClick = {() => !activateCellEdit[rowNum!].isActivated ? onDoubleClickEvent(column.key, rowNum!, false) : null}
-                                maxLength={column.maxLength != null ? column.maxLength : 10000}
-                                />)}</span>
+                                    (<TextField
+                                        errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
+                                        label={item.text}
+                                        ariaLabel={column.key}
+                                        multiline={true}
+                                        rows={1}
+                                        styles={textFieldStyles}
+                                        onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
+                                        autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated'])}
+                                        value={activateCellEdit[rowNum!]['properties'][column.key].value}
+                                        onDoubleClick={() => !activateCellEdit[rowNum!].isActivated ? onDoubleClickEvent(column.key, rowNum!, false) : null}
+                                        maxLength={column.maxLength != null ? column.maxLength : 10000}
+                                    />)}</span>
                             break;
                         case EditControlType.Date:
                             return <span>{
-                                (ShouldRenderSpan()) 
-                                ?
-                                (column?.hoverComponentOptions?.enable ? 
-                                    (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
-                                    >
-                                      {RenderDateSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderDateSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderDateSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
+                                    :
+                                    (<DatePicker
+                                        strings={DayPickerStrings}
+                                        placeholder="Select a date..."
+                                        ariaLabel={column.key}
+                                        value={new Date(activateCellEdit[rowNum!].properties[column.key].value)}
+                                        onSelectDate={(date) => onCellDateChange(date, item, rowNum!, column)}
+                                        onDoubleClick={() => !activateCellEdit[rowNum!].isActivated ? onDoubleClickEvent(column.key, rowNum!, false) : null}
+                                    />)
+                            }</span>
+                            break;
+                        case EditControlType.DateTime:
+                            return <span>{
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderDateTimeSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderDateTimeSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
                                     :
-                                    (RenderDateSpan(props, index, rowNum, column, item, EditCellValue))
-                                ) 
-                                : 
-                                (<DatePicker
-                                    strings={DayPickerStrings}
-                                    placeholder="Select a date..."
-                                    ariaLabel={column.key}
-                                    value={new Date(activateCellEdit[rowNum!].properties[column.key].value)}
-                                    onSelectDate={(date) => onCellDateChange(date, item, rowNum!, column)}
-                                    onDoubleClick = {() => !activateCellEdit[rowNum!].isActivated ? onDoubleClickEvent(column.key, rowNum!, false) : null}
-                                />)
-                                }</span>
+                                    (<>
+                                        <Stack tokens={{ childrenGap: 8 }} horizontal>
+                                            <div>
+                                                <DatePicker
+                                                    strings={DayPickerStrings}
+                                                    placeholder="Select a date..."
+                                                    ariaLabel={column.key}
+                                                    value={new Date(activateCellEdit[rowNum!].properties[column.key].value)}
+                                                    onSelectDate={(date) => onCell_DT_DateChange(date, item, rowNum!, column)}
+                                                />
+                                                <TimePicker
+                                                    placeholder="Select a time..."
+                                                    ariaLabel={column.key}
+                                                    showSeconds={true}
+                                                    useHour12={false}
+                                                    defaultValue={new Date(activateCellEdit[rowNum!].properties[column.key].value)}
+                                                    onChange={(event, time: Date) => { onCell_DT_TimeChange(time, item, rowNum!, column) }}
+                                                />
+                                            </div>
+                                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                <IconButton iconProps={{ iconName: 'CheckMark' }} title="CheckMark" ariaLabel="Emoji" disabled={false} onClick={() => { if (!activateCellEdit[rowNum!].isActivated) { onDoubleClickEvent(column.key, rowNum!, false) } }} />
+                                            </div>
+                                        </Stack>
+                                    </>)
+                            }</span>
                             break;
                         case EditControlType.DropDown:
                             return <span className={'row-' + rowNum! + '-col-' + index}>{
-                                (ShouldRenderSpan()) 
-                                ? 
-                                (column?.hoverComponentOptions?.enable ? 
-                                    (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
-                                    >
-                                      {RenderDropdownSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderDropdownSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderDropdownSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
+
                                     :
-                                    (RenderDropdownSpan(props, index, rowNum, column, item, EditCellValue))
-                                )
-                                 
-                                : 
-                                (<Dropdown
-                                    ariaLabel={column.key}
-                                    placeholder={column.dropdownValues?.filter(x => x.text == item[column.key])[0]?.text ?? 'Select an option'}
-                                    options={column.dropdownValues ?? []}
-                                    styles={dropdownStyles}
-                                    onChange={(ev,selectedItem) => onDropDownChange(ev, selectedItem, rowNum!, column)}
-                                    onDoubleClick={() => !activateCellEdit[rowNum!].isActivated ? onDropdownDoubleClickEvent(column.key, rowNum!, false) : null}
-                                />)
-                                }</span>
+                                    (<Dropdown
+                                        ariaLabel={column.key}
+                                        placeholder={column.dropdownValues?.filter(x => x.text == item[column.key])[0]?.text ?? 'Select an option'}
+                                        options={column.dropdownValues ?? []}
+                                        styles={dropdownStyles}
+                                        onChange={(ev, selectedItem) => onDropDownChange(ev, selectedItem, rowNum!, column)}
+                                        onDoubleClick={() => !activateCellEdit[rowNum!].isActivated ? onDropdownDoubleClickEvent(column.key, rowNum!, false) : null}
+                                    />)
+                            }</span>
                             break;
                         case EditControlType.Picker:
                             return <span>{
-                                (ShouldRenderSpan()) 
-                                ? 
-                                (column?.hoverComponentOptions?.enable ? 
-                                    (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
-                                    >
-                                      {RenderPickerSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderPickerSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderPickerSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
                                     :
-                                    (RenderPickerSpan(props, index, rowNum, column, item, EditCellValue))
-                                )
-                                : 
-                                (<span onDoubleClick = {() => !activateCellEdit[rowNum!].isActivated ? onCellPickerDoubleClickEvent(column.key, rowNum!, false) : null}>
-                                    <PickerControl
-                                        arialabel={column.key}
-                                        selectedItemsLimit={column.pickerOptions?.tagsLimit}
-                                        pickerTags={column.pickerOptions?.pickerTags ?? []}
-                                        defaultTags={item[column.key] ? item[column.key].split(";") : []}
-                                        minCharLimitForSuggestions={column.pickerOptions?.minCharLimitForSuggestions}
-                                        onTaglistChanged={(selectedItem: ITag[] | undefined) => onCellPickerTagListChanged(selectedItem, rowNum!, column)}
-                                        pickerDescriptionOptions={column.pickerOptions?.pickerDescriptionOptions}
-                                        suggestionRule={column.pickerOptions?.suggestionsRule}
-                                    />
-                                </span>)
-                                }</span>
+                                    (<span onDoubleClick={() => !activateCellEdit[rowNum!].isActivated ? onCellPickerDoubleClickEvent(column.key, rowNum!, false) : null}>
+                                        <PickerControl
+                                            arialabel={column.key}
+                                            selectedItemsLimit={column.pickerOptions?.tagsLimit}
+                                            pickerTags={column.pickerOptions?.pickerTags ?? []}
+                                            defaultTags={item[column.key] ? item[column.key].split(";") : []}
+                                            minCharLimitForSuggestions={column.pickerOptions?.minCharLimitForSuggestions}
+                                            onTaglistChanged={(selectedItem: ITag[] | undefined) => onCellPickerTagListChanged(selectedItem, rowNum!, column)}
+                                            pickerDescriptionOptions={column.pickerOptions?.pickerDescriptionOptions}
+                                            suggestionRule={column.pickerOptions?.suggestionsRule}
+                                        />
+                                    </span>)
+                            }</span>
                             break;
                         case EditControlType.Link:
                             return <span>{
-                                (column?.hoverComponentOptions?.enable ? 
+                                (column?.hoverComponentOptions?.enable ?
                                     (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
+                                        type={HoverCardType.plain}
+                                        plainCardProps={{
+                                            onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                        }}
+                                        instantOpenOnClick
                                     >
-                                      {RenderLinkSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                        {RenderLinkSpan(props, index, rowNum, column, item, EditCellValue)}
+                                    </HoverCard>)
                                     :
                                     (RenderLinkSpan(props, index, rowNum, column, item, EditCellValue))
                                 )
-                                }</span>
+                            }</span>
                         case EditControlType.Password:
                             return <span>{
-                                (ShouldRenderSpan()) 
-                                ? 
-                                (column?.hoverComponentOptions?.enable ? 
-                                    (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
-                                    >
-                                      {RenderPasswordFieldSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderPasswordFieldSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderPasswordFieldSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
                                     :
-                                    (RenderPasswordFieldSpan(props, index, rowNum, column, item, EditCellValue))
-                                )
-                                : 
-                                (<TextField
-                                    errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
-                                    label={item.text}
-                                    ariaLabel={column.key}
-                                    styles={textFieldStyles}
-                                    onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
-                                    autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit?.[Number(item['_grid_row_id_'])!]?.['isActivated'])}
-                                    value={activateCellEdit[rowNum!]['properties'][column.key].value}
-                                    onKeyDown={(event) => onKeyDownEvent(event, column, rowNum!, false)}
-                                    maxLength={column.maxLength != null ? column.maxLength : 1000}
-                                    type="password"
-                                    canRevealPassword
-                                />)}</span>
+                                    (<TextField
+                                        errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
+                                        label={item.text}
+                                        ariaLabel={column.key}
+                                        styles={textFieldStyles}
+                                        onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
+                                        autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit?.[Number(item['_grid_row_id_'])!]?.['isActivated'])}
+                                        value={activateCellEdit[rowNum!]['properties'][column.key].value}
+                                        onKeyDown={(event) => onKeyDownEvent(event, column, rowNum!, false)}
+                                        maxLength={column.maxLength != null ? column.maxLength : 1000}
+                                        type="password"
+                                        canRevealPassword
+                                    />)}</span>
                         default:
                             return <span>{
-                                (ShouldRenderSpan()) 
-                                ? 
-                                (column?.hoverComponentOptions?.enable ? 
-                                    (<HoverCard
-                                      type={HoverCardType.plain}
-                                      plainCardProps={{
-                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
-                                    }}
-                                      instantOpenOnClick
-                                    >
-                                      {RenderTextFieldSpan(props, index, rowNum, column, item, EditCellValue)}
-                                    </HoverCard>) 
+                                (ShouldRenderSpan())
+                                    ?
+                                    (column?.hoverComponentOptions?.enable ?
+                                        (<HoverCard
+                                            type={HoverCardType.plain}
+                                            plainCardProps={{
+                                                onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                            }}
+                                            instantOpenOnClick
+                                        >
+                                            {RenderTextFieldSpan(props, index, rowNum, column, item, EditCellValue)}
+                                        </HoverCard>)
+                                        :
+                                        (RenderTextFieldSpan(props, index, rowNum, column, item, EditCellValue))
+                                    )
                                     :
-                                    (RenderTextFieldSpan(props, index, rowNum, column, item, EditCellValue))
-                                )
-                                : 
-                                (<TextField
-                                    errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
-                                    label={item.text}
-                                    ariaLabel={column.key}
-                                    styles={textFieldStyles}
-                                    onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
-                                    autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit?.[Number(item['_grid_row_id_'])!]?.['isActivated'])}
-                                    value={activateCellEdit[rowNum!]['properties'][column.key].value}
-                                    onKeyDown={(event) => onKeyDownEvent(event, column, rowNum!, false)}
-                                    maxLength={column.maxLength != null ? column.maxLength : 1000}
-                                />)}</span>
+                                    (<TextField
+                                        errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
+                                        label={item.text}
+                                        ariaLabel={column.key}
+                                        styles={textFieldStyles}
+                                        onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
+                                        autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit?.[Number(item['_grid_row_id_'])!]?.['isActivated'])}
+                                        value={activateCellEdit[rowNum!]['properties'][column.key].value}
+                                        onKeyDown={(event) => onKeyDownEvent(event, column, rowNum!, false)}
+                                        maxLength={column.maxLength != null ? column.maxLength : 1000}
+                                    />)}</span>
                     }
 
                     function ShouldRenderSpan() {
@@ -1320,7 +1428,7 @@ const EditableGrid = (props: Props) => {
                 }
             });
 
-            if(getColumnFiltersRef().length == 0){
+            if (getColumnFiltersRef().length == 0) {
                 columnFilterArrTmp.push({
                     index: index,
                     column: column,
@@ -1336,11 +1444,11 @@ const EditableGrid = (props: Props) => {
             }
         });
 
-        if(getColumnFiltersRef().length == 0){
+        if (getColumnFiltersRef().length == 0) {
             setColumnFiltersRef(columnFilterArrTmp);
         }
 
-        if(props.enableRowEdit){
+        if (props.enableRowEdit) {
             columnConfigs.push({
                 key: 'action',
                 name: 'Actions',
@@ -1351,102 +1459,102 @@ const EditableGrid = (props: Props) => {
                 maxWidth: 50,
                 onRender: (item, index) => (
                     <div>
-                        {(activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated']) 
-                        ?
-                        <div>
-                            <IconButton disabled={editMode} onClick={() => ShowRowEditMode(item, Number(item['_grid_row_id_'])!, false)} iconProps={{ iconName: 'Save' }} title={'Save'}></IconButton>
-                            {props.enableRowEditCancel 
-                                ? 
-                                <IconButton disabled={editMode} onClick={() => CancelRowEditMode(item, Number(item['_grid_row_id_'])!)} iconProps={{ iconName: 'RemoveFilter' }} title={'Cancel'}></IconButton>
-                                : 
-                                null
-                            }
-                        </div>
-                        :
-                        <div>
-                            {   !props.enableDefaultEditMode &&
-                                <IconButton onClick={() => ShowRowEditMode(item, Number(item['_grid_row_id_'])!, true)} iconProps={{ iconName: 'Edit' }} title={'Edit'}></IconButton>
-                            }{ 
-                                props.gridCopyOptions && props.gridCopyOptions.enableRowCopy && 
-                                <IconButton
-                                    onClick={() => HandleRowCopy(Number(item['_grid_row_id_'])!)}
-                                    iconProps={{ iconName: "Copy" }}
-                                    title={"Copy"}
-                                ></IconButton>
-                            }
-                        </div>
+                        {(activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated'])
+                            ?
+                            <div>
+                                <IconButton disabled={editMode} onClick={() => ShowRowEditMode(item, Number(item['_grid_row_id_'])!, false)} iconProps={{ iconName: 'Save' }} title={'Save'}></IconButton>
+                                {props.enableRowEditCancel
+                                    ?
+                                    <IconButton disabled={editMode} onClick={() => CancelRowEditMode(item, Number(item['_grid_row_id_'])!)} iconProps={{ iconName: 'RemoveFilter' }} title={'Cancel'}></IconButton>
+                                    :
+                                    null
+                                }
+                            </div>
+                            :
+                            <div>
+                                {!props.enableDefaultEditMode &&
+                                    <IconButton onClick={() => ShowRowEditMode(item, Number(item['_grid_row_id_'])!, true)} iconProps={{ iconName: 'Edit' }} title={'Edit'}></IconButton>
+                                }{
+                                    props.gridCopyOptions && props.gridCopyOptions.enableRowCopy &&
+                                    <IconButton
+                                        onClick={() => HandleRowCopy(Number(item['_grid_row_id_'])!)}
+                                        iconProps={{ iconName: "Copy" }}
+                                        title={"Copy"}
+                                    ></IconButton>
+                                }
+                            </div>
                         }
                     </div>
                 ),
             });
         }
-        
+
         return columnConfigs;
     };
 
-    const CreateCommandBarItemProps = () : ICommandBarItemProps[] => {
+    const CreateCommandBarItemProps = (): ICommandBarItemProps[] => {
         let commandBarItems: ICommandBarItemProps[] = [];
-        
-        
-        if(props.enableExport){
-            commandBarItems.push({ 
+
+
+        if (props.enableExport) {
+            commandBarItems.push({
                 id: 'export',
-                key: 'exportGrid', 
-                text: 'Export', 
+                key: 'exportGrid',
+                text: 'Export',
                 ariaLabel: 'Export',
                 disabled: isGridInEdit || editMode,
-                cacheKey: 'myCacheKey', 
+                cacheKey: 'myCacheKey',
                 iconProps: { iconName: 'Download' },
                 subMenuProps: {
                     items: [
                         {
-                        key: 'exportToExcel',
-                        text: 'Excel Export',
-                        iconProps: { iconName: 'ExcelDocument' },
-                        onClick: () => onExportClick(ExportType.XLSX)
+                            key: 'exportToExcel',
+                            text: 'Excel Export',
+                            iconProps: { iconName: 'ExcelDocument' },
+                            onClick: () => onExportClick(ExportType.XLSX)
                         },
                         {
-                        key: 'exportToCSV',
-                        text: 'CSV Export',
-                        iconProps: { iconName: 'LandscapeOrientation' },
-                        onClick: () => onExportClick(ExportType.CSV)
+                            key: 'exportToCSV',
+                            text: 'CSV Export',
+                            iconProps: { iconName: 'LandscapeOrientation' },
+                            onClick: () => onExportClick(ExportType.CSV)
                         }
                     ],
-                } 
+                }
             });
         }
 
-        if(props.enableColumnFilterRules){
-            commandBarItems.push({ 
-                id:'columnfilter',
-                key: 'columnFilters', 
-                text: 'Filter', 
+        if (props.enableColumnFilterRules) {
+            commandBarItems.push({
+                id: 'columnfilter',
+                key: 'columnFilters',
+                text: 'Filter',
                 ariaLabel: 'Filter',
                 disabled: isGridInEdit || editMode,
-                cacheKey: 'myColumnFilterCacheKey', 
+                cacheKey: 'myColumnFilterCacheKey',
                 iconProps: { iconName: 'Filter' },
                 subMenuProps: {
                     items: [
                         {
-                        key: 'columnFilter',
-                        text: 'Column Filter',
-                        iconProps: { iconName: 'Filter' },
-                        onClick: () => RowSelectOperations(EditType.ColumnFilter, {})
+                            key: 'columnFilter',
+                            text: 'Column Filter',
+                            iconProps: { iconName: 'Filter' },
+                            onClick: () => RowSelectOperations(EditType.ColumnFilter, {})
                         },
                         {
-                        key: 'clearFilters',
-                        text: 'Clear Filters',
-                        iconProps: { iconName: 'ClearFilter' },
-                        onClick: () => ClearFilters()
+                            key: 'clearFilters',
+                            text: 'Clear Filters',
+                            iconProps: { iconName: 'ClearFilter' },
+                            onClick: () => ClearFilters()
                         }
                     ],
-                } 
+                }
             });
         }
 
-        if(!props.enableDefaultEditMode && props.enableTextFieldEditMode){
+        if (!props.enableDefaultEditMode && props.enableTextFieldEditMode) {
             commandBarItems.push({
-                id:'editmode',
+                id: 'editmode',
                 key: 'editmode',
                 disabled: isGridInEdit && !editMode,
                 text: !editMode ? "Edit Mode" : "Save Edits",
@@ -1455,20 +1563,20 @@ const EditableGrid = (props: Props) => {
             });
         }
 
-        if(!props.enableDefaultEditMode && props.enableTextFieldEditModeCancel && editMode){
+        if (!props.enableDefaultEditMode && props.enableTextFieldEditModeCancel && editMode) {
             commandBarItems.push({
                 key: 'editmodecancel',
                 disabled: isGridInEdit && !editMode,
                 text: "Cancel",
                 iconProps: { iconName: "Cancel" },
                 //onClick: () => {SetGridItems(defaultGridData); setEditMode(false)}
-                onClick: () => {CancelGridEditMode()}
+                onClick: () => { CancelGridEditMode() }
             });
         }
-    
-        if(props.enableSave == true){
+
+        if (props.enableSave == true) {
             commandBarItems.push({
-                id:'submit',
+                id: 'submit',
                 key: 'submit',
                 text: 'Submit',
                 ariaLabel: 'Submit',
@@ -1478,18 +1586,18 @@ const EditableGrid = (props: Props) => {
             });
         }
 
-        if(props.enableBulkEdit){
+        if (props.enableBulkEdit) {
             commandBarItems.push({
                 id: 'bulkedit',
                 key: 'bulkedit',
                 text: "Bulk Edit",
                 disabled: isGridInEdit || editMode || selectionCount == 0,
-                iconProps: { iconName: "TripleColumnEdit"},
+                iconProps: { iconName: "TripleColumnEdit" },
                 onClick: () => RowSelectOperations(EditType.BulkEdit, {})
             });
         }
 
-        if(props.gridCopyOptions && props.gridCopyOptions.enableGridCopy){
+        if (props.gridCopyOptions && props.gridCopyOptions.enableGridCopy) {
             commandBarItems.push({
                 key: "copy",
                 text: "Copy",
@@ -1498,8 +1606,8 @@ const EditableGrid = (props: Props) => {
                 onClick: () => CopyGridRows(),
             });
         }
-    
-        if(props.enableGridRowsAdd){
+
+        if (props.enableGridRowsAdd) {
             commandBarItems.push({
                 id: 'addrows',
                 key: 'addrows',
@@ -1510,7 +1618,7 @@ const EditableGrid = (props: Props) => {
             });
         }
 
-        if(props.enableRowAddWithValues && props.enableRowAddWithValues.enable){
+        if (props.enableRowAddWithValues && props.enableRowAddWithValues.enable) {
             commandBarItems.push({
                 id: 'addrowswithdata',
                 key: 'addrowswithdata',
@@ -1520,8 +1628,8 @@ const EditableGrid = (props: Props) => {
                 onClick: () => RowSelectOperations(EditType.AddRowWithData, {})
             });
         }
-    
-        if(props.enableGridRowsDelete){
+
+        if (props.enableGridRowsDelete) {
             commandBarItems.push({
                 id: 'deleterows',
                 key: 'deleterows',
@@ -1531,8 +1639,8 @@ const EditableGrid = (props: Props) => {
                 onClick: () => RowSelectOperations(EditType.DeleteRow, {})
             });
         }
-    
-        if(props.enableColumnEdit){
+
+        if (props.enableColumnEdit) {
             commandBarItems.push({
                 id: 'updatecolumn',
                 key: 'updatecolumn',
@@ -1543,7 +1651,7 @@ const EditableGrid = (props: Props) => {
             });
         }
 
-        if(props.enableGridReset){
+        if (props.enableGridReset) {
             commandBarItems.push({
                 id: 'resetgrid',
                 key: 'resetGrid',
@@ -1554,30 +1662,29 @@ const EditableGrid = (props: Props) => {
             });
         }
 
-        if(props.customCommandBarItems && props.customCommandBarItems.length > 0){
+        if (props.customCommandBarItems && props.customCommandBarItems.length > 0) {
             return [...commandBarItems, ...props.customCommandBarItems];
         }
-    
+
         return commandBarItems;
     };
 
-    const CreateCommandBarFarItemProps = () : ICommandBarItemProps[] => {
-        
+    const CreateCommandBarFarItemProps = (): ICommandBarItemProps[] => {
+
         let commandBarItems: ICommandBarItemProps[] = [];
-        if(props.enableUnsavedEditIndicator && (props.enableRowEdit || props.enableCellEdit || props.enableBulkEdit || props.enableColumnEdit
-            || props.enableTextFieldEditMode))
-            {
-                commandBarItems.push({
-                    id: 'info',
-                    key: 'info',
-                    text: isGridStateEdited ? 'Grid has unsaved data. Click on \'Submit\' to save' : '',
-                    // This needs an ariaLabel since it's icon-only
-                    ariaLabel: 'Info',
-                    disabled: !isGridStateEdited,
-                    iconOnly: true,
-                    iconProps: { iconName: 'InfoSolid' },
-                  });    
-            }
+        if (props.enableUnsavedEditIndicator && (props.enableRowEdit || props.enableCellEdit || props.enableBulkEdit || props.enableColumnEdit
+            || props.enableTextFieldEditMode)) {
+            commandBarItems.push({
+                id: 'info',
+                key: 'info',
+                text: isGridStateEdited ? 'Grid has unsaved data. Click on \'Submit\' to save' : '',
+                // This needs an ariaLabel since it's icon-only
+                ariaLabel: 'Info',
+                disabled: !isGridStateEdited,
+                iconOnly: true,
+                iconProps: { iconName: 'InfoSolid' },
+            });
+        }
 
         commandBarItems.push({
             key: "filteredrecs",
@@ -1587,7 +1694,7 @@ const EditableGrid = (props: Props) => {
                     x._is_filtered_in_ == true &&
                     x._is_filtered_in_grid_search_ == true &&
                     x._is_filtered_in_column_filter_ == true
-                ).length}/${defaultGridData.length}`,
+            ).length}/${defaultGridData.length}`,
             // This needs an ariaLabel since it's icon-only
             ariaLabel: "Filtered Records",
             iconOnly: false,
@@ -1597,8 +1704,8 @@ const EditableGrid = (props: Props) => {
         return commandBarItems;
     };
 
-    const CreateCommandBarOverflowItemsProps = () : ICommandBarItemProps[] => {
-        if(props.customCommandBarOverflowItems && props.customCommandBarOverflowItems.length > 0){
+    const CreateCommandBarOverflowItemsProps = (): ICommandBarItemProps[] => {
+        if (props.customCommandBarOverflowItems && props.customCommandBarOverflowItems.length > 0) {
             return [...props.customCommandBarOverflowItems];
         };
 
@@ -1607,49 +1714,49 @@ const EditableGrid = (props: Props) => {
 
     const GridColumns = CreateColumnConfigs();
     const CommandBarItemProps = CreateCommandBarItemProps();
-    const CommandBarFarItemProps = CreateCommandBarFarItemProps(); 
+    const CommandBarFarItemProps = CreateCommandBarFarItemProps();
     const CommandBarOverflowItemsProps = CreateCommandBarOverflowItemsProps();
-    function _getSelectionDetails() : string {
+    function _getSelectionDetails(): string {
         const count = _selection.getSelectedCount();
         setSelectionCount(count);
         setSelectedItems(_selection.getSelection())
         setSelectedIndices(_selection.getSelectedIndices());
-        if(props.onGridSelectionChange){
+        if (props.onGridSelectionChange) {
             props.onGridSelectionChange(_selection.getSelection());
         }
-        
+
         switch (count) {
-          case 0:
-            return 'No items selected';
-          case 1:
-            return '1 item selected: ';
-          default:
-            return `${count} items selected`;
+            case 0:
+                return 'No items selected';
+            case 1:
+                return '1 item selected: ';
+            default:
+                return `${count} items selected`;
         }
     }
 
     const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
         if (!props) {
-          return null;
+            return null;
         }
         const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = tooltipHostProps => (
-          <TooltipHost {...tooltipHostProps} />
+            <TooltipHost {...tooltipHostProps} />
         );
         return (
-          <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
-            {defaultRender!({
-              ...props,
-              onRenderColumnHeaderTooltip,
-            })}
-          </Sticky>
+            <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
+                {defaultRender!({
+                    ...props,
+                    onRenderColumnHeaderTooltip,
+                })}
+            </Sticky>
         );
     };
 
-    const onRenderPlainCard = (column : IColumnConfig, rowNum : number, rowData: any): JSX.Element => {
+    const onRenderPlainCard = (column: IColumnConfig, rowNum: number, rowData: any): JSX.Element => {
         return (
-          <div className={controlClass.plainCard}>
-            {React.cloneElement(column.hoverComponentOptions!.hoverChildComponent!, { column: column, rowNum: rowNum, rowData: rowData })}
-          </div>
+            <div className={controlClass.plainCard}>
+                {React.cloneElement(column.hoverComponentOptions!.hoverChildComponent!, { column: column, rowNum: rowNum, rowData: rowData })}
+            </div>
         );
     };
 
@@ -1662,14 +1769,14 @@ const EditableGrid = (props: Props) => {
             onDoubleClick={HandleCellOnDoubleClick(props, column, EditCellValue, rowNum)}
         >
             {
-                column.linkOptions?.onClick 
-                ? 
-                <Link target="_blank" disabled={column.linkOptions?.disabled} underline onClick={() => {
-                    let params : ICallBackParams = { rowindex: [rowNum], data: defaultGridData, triggerkey: column.key, activatetriggercell: false };
-                    column.linkOptions!.onClick(params); 
-                }}>{item[column.key]}</Link>
-                :
-                <Link target="_blank" disabled={column.linkOptions?.disabled} underline href={column.linkOptions?.href}>{item[column.key]}</Link>
+                column.linkOptions?.onClick
+                    ?
+                    <Link target="_blank" disabled={column.linkOptions?.disabled} underline onClick={() => {
+                        let params: ICallBackParams = { rowindex: [rowNum], data: defaultGridData, triggerkey: column.key, activatetriggercell: false };
+                        column.linkOptions!.onClick(params);
+                    }}>{item[column.key]}</Link>
+                    :
+                    <Link target="_blank" disabled={column.linkOptions?.disabled} underline href={column.linkOptions?.href}>{item[column.key]}</Link>
             }
         </span>;
     }
@@ -1684,19 +1791,30 @@ const EditableGrid = (props: Props) => {
             className={GetDynamicSpanStyles(column, item[column.key])}
             onClick={HandleCellOnClick(props, column, EditCellValue, rowNum)}
             onDoubleClick={HandleCellOnDoubleClick(props, column, EditCellValue, rowNum)}
-            >
-                {item[column.key]?.replace(/./g, '*')}
-            </span>;
+        >
+            {item[column.key]?.replace(/./g, '*')}
+        </span>;
     }
-    
+
     const RenderPickerSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
         return RenderSpan(props, index, rowNum, column, item, HandleCellOnClick, EditCellValue, HandleCellOnDoubleClick);
     }
-    
+
     const RenderDropdownSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
         return RenderSpan(props, index, rowNum, column, item, HandleCellOnClick, EditCellValue, HandleCellOnDoubleClick);
     }
-    
+
+    const RenderDateTimeSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
+        return <span
+            id={`id-${props.id}-col-${index}-row-${rowNum}`}
+            className={GetDynamicSpanStyles(column, item[column.key])}
+            onClick={HandleCellOnClick(props, column, EditCellValue, rowNum)}
+            onDoubleClick={HandleCellOnDoubleClick(props, column, EditCellValue, rowNum)}
+        >
+            {item && item[column.key] ? (new Date(item[column.key])).toUTCString() : null}
+        </span>;
+    }
+
     const RenderDateSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
         return <span
             id={`id-${props.id}-col-${index}-row-${rowNum}`}
@@ -1707,7 +1825,7 @@ const EditableGrid = (props: Props) => {
             {item && item[column.key] ? (new Date(item[column.key])).toDateString() : null}
         </span>;
     }
-    
+
     const RenderMultilineTextFieldSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
         return RenderSpan(props, index, rowNum, column, item, HandleCellOnClick, EditCellValue, HandleCellOnDoubleClick);
     }
@@ -1718,9 +1836,9 @@ const EditableGrid = (props: Props) => {
             className={GetDynamicSpanStyles(column, item[column.key])}
             onClick={HandleCellOnClick(props, column, EditCellValue, rowNum)}
             onDoubleClick={HandleCellOnDoubleClick(props, column, EditCellValue, rowNum)}
-            >
-                {item[column.key]}
-            </span>;
+        >
+            {item[column.key]}
+        </span>;
     }
     /* #endregion */
 
@@ -1732,7 +1850,7 @@ const EditableGrid = (props: Props) => {
             :
             null;
     }
-    
+
     function HandleCellOnClick(props: Props, column: IColumnConfig, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void, rowNum: number): React.MouseEventHandler<HTMLSpanElement> | undefined {
         return () => (props.enableCellEdit == true && column.editable == true && props.enableSingleClickCellEdit)
             ? EditCellValue(column.key, rowNum!, true)
@@ -1750,55 +1868,55 @@ const EditableGrid = (props: Props) => {
                 closeButtonAriaLabel="Close"
                 type={PanelType.smallFixedFar}
             >
-                <EditPanel 
-                    onChange={onEditPanelChange} 
+                <EditPanel
+                    onChange={onEditPanelChange}
                     columnConfigurationData={props.columns}
-                    />
+                />
             </Panel>
 
-            {props.enableRowAddWithValues && props.enableRowAddWithValues.enable 
+            {props.enableRowAddWithValues && props.enableRowAddWithValues.enable
                 ?
                 <Panel
-                isOpen={isOpenForAdd}
-                onDismiss={dismissPanelForAdd}
-                isLightDismiss={true}
-                headerText="Add Rows"
-                closeButtonAriaLabel="Close"
-                type={PanelType.smallFixedFar}
+                    isOpen={isOpenForAdd}
+                    onDismiss={dismissPanelForAdd}
+                    isLightDismiss={true}
+                    headerText="Add Rows"
+                    closeButtonAriaLabel="Close"
+                    type={PanelType.smallFixedFar}
                 >
-                    <AddRowPanel 
-                        onChange={onAddPanelChange} 
+                    <AddRowPanel
+                        onChange={onAddPanelChange}
                         columnConfigurationData={props.columns}
                         enableRowsCounterField={props.enableRowAddWithValues.enableRowsCounterInPanel}
-                        />
+                    />
                 </Panel>
-                : 
+                :
                 null
             }
-            
 
-            {defaultTag.length > 0 ? 
+
+            {defaultTag.length > 0 ?
                 <TagPicker
-                onResolveSuggestions={onFilterChanged}
-                getTextFromItem={getTextFromItem}
-                pickerSuggestionsProps={pickerSuggestionsProps}
-                inputProps={inputProps}
-                selectedItems={defaultTag}
-                onChange={onFilterTagListChanged}
-            /> : null}
-            
+                    onResolveSuggestions={onFilterChanged}
+                    getTextFromItem={getTextFromItem}
+                    pickerSuggestionsProps={pickerSuggestionsProps}
+                    inputProps={inputProps}
+                    selectedItems={defaultTag}
+                    onChange={onFilterTagListChanged}
+                /> : null}
+
             {props.enableCommandBar === undefined || props.enableCommandBar === true ? <CommandBar
                 items={CommandBarItemProps}
                 ariaLabel="Command Bar"
                 overflowItems={CommandBarOverflowItemsProps}
                 farItems={CommandBarFarItemProps}
-                /> : null}
-            {showSpinner ? 
-                <Spinner label="Updating..." ariaLive="assertive" labelPosition="right" size={SpinnerSize.large}/>
+            /> : null}
+            {showSpinner ?
+                <Spinner label="Updating..." ariaLive="assertive" labelPosition="right" size={SpinnerSize.large} />
                 :
                 null
             }
-            
+
             {showFilterCallout && filterCalloutComponent}
             <div className={mergeStyles({ height: props.height != null ? props.height : '70vh', width: props.width != null ? props.width : '130vh', position: 'relative', backgroundColor: 'white', })}>
                 <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
@@ -1876,38 +1994,38 @@ const EditableGrid = (props: Props) => {
             <Dialog hidden={!dialogContent} onDismiss={CloseRenameDialog} closeButtonAriaLabel="Close">
                 {dialogContent}
             </Dialog>
-            {messageDialogProps.visible 
-            ?
-            <MessageDialog 
-                message={messageDialogProps.message} 
-                subMessage={messageDialogProps.subMessage} 
-                onDialogClose={CloseMessageDialog}
+            {messageDialogProps.visible
+                ?
+                <MessageDialog
+                    message={messageDialogProps.message}
+                    subMessage={messageDialogProps.subMessage}
+                    onDialogClose={CloseMessageDialog}
                 />
-            :
-            null}
+                :
+                null}
 
-            {props.enableColumnEdit && isUpdateColumnClicked ? 
-            <ColumnUpdateDialog 
-                columnConfigurationData={props.columns} 
-                onDialogCancel={CloseColumnUpdateDialog} 
-                onDialogSave={UpdateGridColumnData}
+            {props.enableColumnEdit && isUpdateColumnClicked ?
+                <ColumnUpdateDialog
+                    columnConfigurationData={props.columns}
+                    onDialogCancel={CloseColumnUpdateDialog}
+                    onDialogSave={UpdateGridColumnData}
                 />
-            :
-            null
+                :
+                null
             }
 
-            {props.enableColumnFilterRules && isColumnFilterClicked ? 
-            <ColumnFilterDialog 
-                columnConfigurationData={props.columns.filter((item) => filteredColumns.indexOf(item) < 0 && isColumnDataTypeSupportedForFilter(item.dataType))} 
-                onDialogCancel={CloseColumnFilterDialog} 
-                onDialogSave={onFilterApplied}
-                gridData={defaultGridData}
+            {props.enableColumnFilterRules && isColumnFilterClicked ?
+                <ColumnFilterDialog
+                    columnConfigurationData={props.columns.filter((item) => filteredColumns.indexOf(item) < 0 && isColumnDataTypeSupportedForFilter(item.dataType))}
+                    onDialogCancel={CloseColumnFilterDialog}
+                    onDialogSave={onFilterApplied}
+                    gridData={defaultGridData}
                 />
-            :
-            null
+                :
+                null
             }
         </Fabric>
     );
 };
 
-export default EditableGrid;
+export default EditableGrid;
\ No newline at end of file
diff --git a/src/libs/editablegrid/editpanel.tsx b/src/libs/editablegrid/editpanel.tsx
index 13c8cbf6..0b3b1cc4 100644
--- a/src/libs/editablegrid/editpanel.tsx
+++ b/src/libs/editablegrid/editpanel.tsx
@@ -10,6 +10,7 @@ import { controlClass, horizontalGapStackTokens, stackStyles, textFieldStyles, v
 import { GetDefault, IsValidDataType, ParseType } from "./helper";
 import PickerControl from "./pickercontrol/picker";
 import SearchableDropdown from "./searchabledropdown/searchabledropdown";
+import { TimePicker } from "@fluentui/react";
 
 interface Props {
     onChange: any;
@@ -17,60 +18,90 @@ interface Props {
 }
 
 const EditPanel = (props: Props) => {
-    const updateObj : any = {};
+    const updateObj: any = {};
     const [columnValuesObj, setColumnValuesObj] = useState<any>(null);
 
     useEffect(() => {
-        let tmpColumnValuesObj : any = {};
+        let tmpColumnValuesObj: any = {};
         props.columnConfigurationData.filter(x => x.editable == true).forEach((item, index) => {
-            tmpColumnValuesObj[item.key] = { 'value' : GetDefault(item.dataType), 'isChanged' : false, 'error': null };
+            tmpColumnValuesObj[item.key] = { 'value': GetDefault(item.dataType), 'isChanged': false, 'error': null };
         })
         setColumnValuesObj(tmpColumnValuesObj);
     }, [props.columnConfigurationData]);
 
-    const SetObjValues = (key: string, value: any, isChanged: boolean = true, errorMessage: string | null = null) : void => {
-        setColumnValuesObj({...columnValuesObj, [key]: { 'value' :  value, 'isChanged' : isChanged, 'error': errorMessage }})
+    const SetObjValues = (key: string, value: any, isChanged: boolean = true, errorMessage: string | null = null): void => {
+        setColumnValuesObj({ ...columnValuesObj, [key]: { 'value': value, 'isChanged': isChanged, 'error': errorMessage } })
     }
 
-    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, item : any): void => {
+    const onDropDownChange = (event: React.FormEvent<HTMLDivElement>, selectedDropdownItem: IDropdownOption | undefined, item: any): void => {
         SetObjValues(item.key, selectedDropdownItem?.text);
     }
 
-    const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column : IColumnConfig): void => {
-        if(!IsValidDataType(column.dataType, text)){
+    const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column: IColumnConfig): void => {
+        if (!IsValidDataType(column.dataType, text)) {
             SetObjValues((ev.target as Element).id, text, false, `Data should be of type '${column.dataType}'`);
             return;
         }
-        
+
         SetObjValues((ev.target as Element).id, ParseType(column.dataType, text));
     };
 
     const onPanelSubmit = (): void => {
         var objectKeys = Object.keys(columnValuesObj);
         objectKeys.forEach((objKey) => {
-            if(columnValuesObj[objKey]['isChanged']){
+            if (columnValuesObj[objKey]['isChanged']) {
                 updateObj[objKey] = columnValuesObj[objKey]['value']
             }
         });
-        
+
         props.onChange(updateObj);
     };
 
-    const onCellDateChange = (date: Date | null | undefined, item : any): void => {
-        SetObjValues(item.key, date);
+    const onCellDateChange = (date: Date | null | undefined, item: IColumnConfig): void => {
+        let currentDate = getColumnValue(item);
+
+        if (currentDate === undefined || currentDate === null) {
+            currentDate = date;
+        } else if (date !== null && date !== undefined) {
+            currentDate.setFullYear(date.getFullYear());
+            currentDate.setMonth(date.getMonth());
+            currentDate.setDate(date.getDate());
+        }
+
+        SetObjValues(item.key, currentDate);
     };
 
-    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, item : any) : void => {
-        if(cellPickerTagList && cellPickerTagList[0] && cellPickerTagList[0].name)
+    const onCellTimeChange = (dateTime: Date | null | undefined, item: IColumnConfig): void => {
+        let currentDate = getColumnValue(item);
+
+        if (currentDate === undefined || currentDate === null) {
+            currentDate = dateTime;
+        } else if (dateTime !== null && dateTime !== undefined) {
+            currentDate.setHours(dateTime.getHours());
+            currentDate.setMinutes(dateTime.getMinutes());
+            currentDate.setSeconds(dateTime.getSeconds());
+            currentDate.setMilliseconds(dateTime.getMilliseconds());
+        }
+
+        SetObjValues(item.key, currentDate);
+    };
+
+    const getColumnValue = (item: IColumnConfig) => {
+        return columnValuesObj[item.key].value;
+    };
+
+
+    const onCellPickerTagListChanged = (cellPickerTagList: ITag[] | undefined, item: any): void => {
+        if (cellPickerTagList && cellPickerTagList[0] && cellPickerTagList[0].name)
             SetObjValues(item.key, cellPickerTagList[0].name);
         else
             SetObjValues(item.key, '');
     }
 
-    const createTextFields = () : any[] => {
-        let tmpRenderObj : any[] = [];
+    const createTextFields = (): any[] => {
+        let tmpRenderObj: any[] = [];
         props.columnConfigurationData.filter(x => x.editable == true).forEach((item) => {
-            switch(item.inputType){
+            switch (item.inputType) {
                 case EditControlType.Date:
                     tmpRenderObj.push(<DatePicker
                         label={item.text}
@@ -82,17 +113,35 @@ const EditPanel = (props: Props) => {
                         value={new Date()}
                     />);
                     break;
+                case EditControlType.DateTime:
+                    tmpRenderObj.push(
+                        <Stack tokens={{ childrenGap: 8 }}>
+                            <DatePicker
+                                strings={DayPickerStrings}
+                                ariaLabel='Select a date...'
+                                placeholder="Select a date..."
+                                onSelectDate={(date) => onCellDateChange(date, item)}
+                            />
+                            <TimePicker
+                                ariaLabel='Select a time...'
+                                placeholder="Select a time..."
+                                showSeconds={true}
+                                useHour12={false}
+                                onChange={(event, time: Date) => { onCellTimeChange(time, item) }}
+                            />
+                        </Stack>);
+                    break;
                 case EditControlType.Picker:
                     tmpRenderObj.push(<div>
                         <span className={controlClass.pickerLabel}>{item.text}</span>
-                        <PickerControl 
+                        <PickerControl
                             arialabel={item.text}
                             selectedItemsLimit={1}
                             pickerTags={item.pickerOptions?.pickerTags ?? []}
                             minCharLimitForSuggestions={2}
                             onTaglistChanged={(selectedItem: ITag[] | undefined) => onCellPickerTagListChanged(selectedItem, item)}
                             pickerDescriptionOptions={item.pickerOptions?.pickerDescriptionOptions}
-                    /></div>);
+                        /></div>);
                     break;
                 case EditControlType.DropDown:
                     tmpRenderObj.push(
@@ -114,7 +163,7 @@ const EditPanel = (props: Props) => {
                         styles={textFieldStyles}
                         onChange={(ev, text) => onTextUpdate(ev, text!, item)}
                         value={columnValuesObj[item.key].value || ''}
-                        />);
+                    />);
                     break;
                 default:
                     tmpRenderObj.push(<TextField
@@ -125,7 +174,7 @@ const EditPanel = (props: Props) => {
                         styles={textFieldStyles}
                         onChange={(ev, text) => onTextUpdate(ev, text!, item)}
                         value={columnValuesObj[item.key].value || ''}
-                        />);
+                    />);
                     break;
             }
         });
@@ -138,13 +187,13 @@ const EditPanel = (props: Props) => {
                 {columnValuesObj && createTextFields()}
             </Stack>
             <Stack horizontal disableShrink styles={stackStyles} tokens={horizontalGapStackTokens}>
-            <PrimaryButton
-                text="Save To Grid"
-                className={controlClass.submitStylesEditpanel}
-                onClick={onPanelSubmit}
-                allowDisabledFocus
-                disabled={columnValuesObj && Object.keys(columnValuesObj).some(k => columnValuesObj[k] && columnValuesObj[k].error && columnValuesObj[k].error.length > 0) || false}
-            />
+                <PrimaryButton
+                    text="Save To Grid"
+                    className={controlClass.submitStylesEditpanel}
+                    onClick={onPanelSubmit}
+                    allowDisabledFocus
+                    disabled={columnValuesObj && Object.keys(columnValuesObj).some(k => columnValuesObj[k] && columnValuesObj[k].error && columnValuesObj[k].error.length > 0) || false}
+                />
             </Stack>
         </Stack>
     );

From e9bccc39b0762969b3d305b4b410c73848042fa1 Mon Sep 17 00:00:00 2001
From: Alexander Elguezabal <luis1944alex@gmail.com>
Date: Thu, 1 Aug 2024 15:14:03 -0700
Subject: [PATCH 2/2] Added EditControlType.DateTime Example to the project.

Added EditControlType.DateTime Example to the project.
---
 src/Examples/gridconsumer/gridconfig.tsx     | 403 ++++++++++---------
 src/Examples/gridconsumer/gridconsumer.tsx   |  97 ++---
 src/Examples/gridconsumer/hoverComponent.tsx |  22 +-
 src/libs/editablegrid/addrowpanel.tsx        |   3 +-
 4 files changed, 271 insertions(+), 254 deletions(-)

diff --git a/src/Examples/gridconsumer/gridconfig.tsx b/src/Examples/gridconsumer/gridconfig.tsx
index 98ef5e1a..1def2ec3 100644
--- a/src/Examples/gridconsumer/gridconfig.tsx
+++ b/src/Examples/gridconsumer/gridconfig.tsx
@@ -7,201 +7,215 @@ import { IColumnConfig } from "../../libs/types/columnconfigtype";
 import { EditControlType } from "../../libs/types/editcontroltype";
 import { CellHover } from "./hoverComponent";
 
-export const GridColumnConfig : IColumnConfig[] = 
-[
-    {
-        key: 'id',
-        name: 'ID',
-        text: 'ID',
-        editable: false,
-        dataType: 'number',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        applyColumnFilter: true,
-        disableSort: true
-    },
-    {
-        key: 'customerhovercol',
-        name: 'Custom Hover Column',
-        text: 'Custom Hover Column',
-        editable: false,
-        dataType: 'string',
-        minWidth: 150,
-        maxWidth: 150,
-        isResizable: true,
-        includeColumnInExport: false,
-        includeColumnInSearch: false,
-        applyColumnFilter: false,
-        disableSort: true,
-        hoverComponentOptions: { enable:true, hoverChildComponent: <CellHover customProps={{ someProp: '' }} /> }
-    },
-    {
-        key: 'name',
-        name: 'Name',
-        text: 'Name',
-        editable: true,
-        dataType: 'string',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        applyColumnFilter: true
-    },
-    {
-        key: 'password',
-        name: 'Password',
-        text: 'Password',
-        editable: true,
-        dataType: 'string',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        applyColumnFilter: true,
-        inputType: EditControlType.Password
-    },
-    {
-        key: 'age',
-        name: 'Age',
-        text: 'Age',
-        editable: true,
-        dataType: 'number',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        applyColumnFilter: true
-    },
-    {
-        key: 'designation',
-        name: 'Designation',
-        text: 'Designation',
-        editable: true,
-        dataType: 'string',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        inputType: EditControlType.MultilineTextField,
-        applyColumnFilter: true
-    },
-    {
-        key: 'salary',
-        name: 'Salary',
-        text: 'Salary',
-        editable: true,
-        dataType: 'number',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        includeColumnInExport: false,
-        includeColumnInSearch: true,
-        maxLength:5,
-        applyColumnFilter: true,
-        cellStyleRule: { 
-            enable: true, 
-            rule: { 
-                operator : NumberAndDateOperators.LESSTHAN, 
-                value: 50000 
-            }, 
-            whenTrue: { textColor: '#EF5350', fontWeight: 'bold' },
-            whenFalse: { textColor: '#9CCC65' }
+export const GridColumnConfig: IColumnConfig[] =
+    [
+        {
+            key: 'id',
+            name: 'ID',
+            text: 'ID',
+            editable: false,
+            dataType: 'number',
+            minWidth: 100,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            applyColumnFilter: true,
+            disableSort: true
+        },
+        {
+            key: 'customerhovercol',
+            name: 'Custom Hover Column',
+            text: 'Custom Hover Column',
+            editable: false,
+            dataType: 'string',
+            minWidth: 150,
+            maxWidth: 150,
+            isResizable: true,
+            includeColumnInExport: false,
+            includeColumnInSearch: false,
+            applyColumnFilter: false,
+            disableSort: true,
+            hoverComponentOptions: { enable: true, hoverChildComponent: <CellHover customProps={{ someProp: '' }} /> }
+        },
+        {
+            key: 'name',
+            name: 'Name',
+            text: 'Name',
+            editable: true,
+            dataType: 'string',
+            minWidth: 100,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            applyColumnFilter: true
+        },
+        {
+            key: 'password',
+            name: 'Password',
+            text: 'Password',
+            editable: true,
+            dataType: 'string',
+            minWidth: 100,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            applyColumnFilter: true,
+            inputType: EditControlType.Password
+        },
+        {
+            key: 'age',
+            name: 'Age',
+            text: 'Age',
+            editable: true,
+            dataType: 'number',
+            minWidth: 100,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            applyColumnFilter: true
+        },
+        {
+            key: 'designation',
+            name: 'Designation',
+            text: 'Designation',
+            editable: true,
+            dataType: 'string',
+            minWidth: 100,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            inputType: EditControlType.MultilineTextField,
+            applyColumnFilter: true
+        },
+        {
+            key: 'salary',
+            name: 'Salary',
+            text: 'Salary',
+            editable: true,
+            dataType: 'number',
+            minWidth: 100,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: false,
+            includeColumnInSearch: true,
+            maxLength: 5,
+            applyColumnFilter: true,
+            cellStyleRule: {
+                enable: true,
+                rule: {
+                    operator: NumberAndDateOperators.LESSTHAN,
+                    value: 50000
+                },
+                whenTrue: { textColor: '#EF5350', fontWeight: 'bold' },
+                whenFalse: { textColor: '#9CCC65' }
+            }
+        },
+        {
+            key: 'dateofjoining',
+            name: 'Date of Joining',
+            text: 'Date of Joining',
+            editable: true,
+            dataType: 'date',
+            minWidth: 200,
+            maxWidth: 200,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            inputType: EditControlType.Date
+        },
+        {
+            key: 'lasteupdatetime',
+            name: 'Update Date & Time',
+            text: 'Update Date & Time',
+            editable: true,
+            dataType: 'date',
+            minWidth: 150,
+            maxWidth: 150,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            inputType: EditControlType.DateTime
+        },
+        {
+            key: 'payrolltype',
+            name: 'Payroll Type',
+            text: 'Payroll Type',
+            editable: true,
+            dataType: 'string',
+            minWidth: 150,
+            maxWidth: 150,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            inputType: EditControlType.DropDown,
+            dropdownValues: [
+                { key: 'weekly', text: 'Weekly' },
+                { key: 'biweekly', text: 'Bi-Weekly' },
+                { key: 'monthly', text: 'Monthly' }
+            ]
+        },
+        {
+            key: 'employmenttype',
+            name: 'Employment Type',
+            text: 'Employment Type',
+            editable: true,
+            dataType: 'string',
+            minWidth: 200,
+            maxWidth: 200,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            inputType: EditControlType.Picker,
+            pickerOptions: {
+                pickerTags: ['Employment Type1', 'Employment Type2', 'Employment Type3', 'Employment Type4', 'Employment Type5', 'Employment Type6', 'Employment Type7', 'Employment Type8', 'Employment Type9', 'Employment Type10', 'Employment Type11', 'Employment Type12'],
+                minCharLimitForSuggestions: 2,
+                tagsLimit: 1,
+                pickerDescriptionOptions: {
+                    enabled: true,
+                    values: [
+                        { key: 'Employment Type1', description: 'Employment Type1 Description' },
+                        { key: 'Employment Type2', description: 'Employment Type2 Description' },
+                        { key: 'Employment Type3', description: 'Employment Type3 Description' },
+                        { key: 'Employment Type4', description: 'Employment Type4 Description' },
+                        { key: 'Employment Type5', description: 'Employment Type5 Description' },
+                        { key: 'Employment Type6', description: 'Employment Type6 Description' },
+                        { key: 'Employment Type7', description: 'Employment Type7 Description' },
+                        { key: 'Employment Type8', description: 'Employment Type8 Description' },
+                        { key: 'Employment Type9', description: 'Employment Type9 Description' },
+                        { key: 'Employment Type10', description: 'Employment Type10 Description' },
+                        { key: 'Employment Type11', description: 'Employment Type11 Description' },
+                        { key: 'Employment Type12', description: 'Employment Type12 Description' },
+                    ]
+                },
+                suggestionsRule: StringOperators.STARTSWITH
+            }
+        },
+        {
+            key: 'employeelink',
+            name: 'Employee Profile Link',
+            text: 'Employee Profile Link',
+            editable: false,
+            dataType: 'string',
+            minWidth: 150,
+            maxWidth: 150,
+            isResizable: true,
+            includeColumnInExport: false,
+            includeColumnInSearch: false,
+            inputType: EditControlType.Link,
+            linkOptions: {
+                onClick: () => {     // onClick takes higher precedence over href. If both are enabled, the grid will trigger onClick
+                    alert('clicked')
+                },
+                //href: 'https://www.bing.com/', 
+                disabled: false
+            }
         }
-    },
-    {
-        key: 'dateofjoining',
-        name: 'Date of Joining',
-        text: 'Date of Joining',
-        editable: true,
-        dataType: 'date',
-        minWidth: 150,
-        maxWidth: 150,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        inputType: EditControlType.Date
-    },
-    {
-        key: 'payrolltype',
-        name: 'Payroll Type',
-        text: 'Payroll Type',
-        editable: true,
-        dataType: 'string',
-        minWidth: 150,
-        maxWidth: 150,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        inputType: EditControlType.DropDown,
-        dropdownValues: [
-            { key: 'weekly', text: 'Weekly' },
-            { key: 'biweekly', text: 'Bi-Weekly' },
-            { key: 'monthly', text: 'Monthly' }
-        ]
-    },
-    {
-        key: 'employmenttype',
-        name: 'Employment Type',
-        text: 'Employment Type',
-        editable: true,
-        dataType: 'string',
-        minWidth: 200,
-        maxWidth: 200,
-        isResizable: true,
-        includeColumnInExport: true,
-        includeColumnInSearch: true,
-        inputType: EditControlType.Picker,
-        pickerOptions: {
-            pickerTags: ['Employment Type1', 'Employment Type2', 'Employment Type3', 'Employment Type4', 'Employment Type5', 'Employment Type6', 'Employment Type7', 'Employment Type8', 'Employment Type9', 'Employment Type10', 'Employment Type11', 'Employment Type12'],
-            minCharLimitForSuggestions: 2,
-            tagsLimit: 1,
-            pickerDescriptionOptions: { 
-                enabled: true, 
-                values: [
-                    { key: 'Employment Type1', description: 'Employment Type1 Description'},
-                    { key: 'Employment Type2', description: 'Employment Type2 Description'},
-                    { key: 'Employment Type3', description: 'Employment Type3 Description'},
-                    { key: 'Employment Type4', description: 'Employment Type4 Description'},
-                    { key: 'Employment Type5', description: 'Employment Type5 Description'},
-                    { key: 'Employment Type6', description: 'Employment Type6 Description'},
-                    { key: 'Employment Type7', description: 'Employment Type7 Description'},
-                    { key: 'Employment Type8', description: 'Employment Type8 Description'},
-                    { key: 'Employment Type9', description: 'Employment Type9 Description'},
-                    { key: 'Employment Type10', description: 'Employment Type10 Description'},
-                    { key: 'Employment Type11', description: 'Employment Type11 Description'},
-                    { key: 'Employment Type12', description: 'Employment Type12 Description'},
-            ] },
-            suggestionsRule: StringOperators.STARTSWITH
-        }
-    },
-    {
-        key: 'employeelink',
-        name: 'Employee Profile Link',
-        text: 'Employee Profile Link',
-        editable: false,
-        dataType: 'string',
-        minWidth: 150,
-        maxWidth: 150,
-        isResizable: true,
-        includeColumnInExport: false,
-        includeColumnInSearch: false,
-        inputType: EditControlType.Link,
-        linkOptions: { 
-            onClick: () => {     // onClick takes higher precedence over href. If both are enabled, the grid will trigger onClick
-                alert('clicked') 
-            },
-            //href: 'https://www.bing.com/', 
-            disabled: false 
-        }
-    }
-];
+    ];
 
 export interface GridItemsType {
     id: number;
@@ -212,6 +226,7 @@ export interface GridItemsType {
     designation: string;
     salary: number;
     dateofjoining: string;
+    lasteupdatetime: string;
     payrolltype: string;
     employmenttype: string;
     employeelink: string;
diff --git a/src/Examples/gridconsumer/gridconsumer.tsx b/src/Examples/gridconsumer/gridconsumer.tsx
index f784aacb..0f26d097 100644
--- a/src/Examples/gridconsumer/gridconsumer.tsx
+++ b/src/Examples/gridconsumer/gridconsumer.tsx
@@ -41,7 +41,7 @@ const Consumer = () => {
 
     const [items, setItems] = useState<GridItemsType[]>([]);
     const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(true);
-    const [teachingBubblePropsConfig, setTeachingBubblePropsConfig] = useState<ITeachingBubbleConfig>({ id: 0, config: {...teachingBubbleConfig[0], footerContent: `1 of ${teachingBubbleConfig.length}`}});
+    const [teachingBubblePropsConfig, setTeachingBubblePropsConfig] = useState<ITeachingBubbleConfig>({ id: 0, config: { ...teachingBubbleConfig[0], footerContent: `1 of ${teachingBubbleConfig.length}` } });
     const [gridConfigOptions, setGridConfigOptions] = useState<GridConfigOptions>({
         enableCellEdit: true,
         enableRowEdit: true,
@@ -68,18 +68,18 @@ const Consumer = () => {
 
     const classNames = mergeStyleSets({
         controlWrapper: {
-          display: 'flex',
-          flexWrap: 'wrap',
+            display: 'flex',
+            flexWrap: 'wrap',
         },
         detailsDiv: {
             border: '3px solid black',
             margin: '5px'
         },
-        detailsValues:{
-            color:'#0078d4'
+        detailsValues: {
+            color: '#0078d4'
         },
-        checkbox:{
-            width:'250px'
+        checkbox: {
+            width: '250px'
         }
     });
 
@@ -93,8 +93,8 @@ const Consumer = () => {
         margin: "0px 0px 0px 30px"
     });
 
-    const onTeachingBubbleNavigation = (direction : string)  => {
-        switch(direction) {
+    const onTeachingBubbleNavigation = (direction: string) => {
+        switch (direction) {
             case 'previous':
                 var TeachingProps = teachingBubbleConfig[teachingBubblePropsConfig.id - 1];
                 var currentId = teachingBubblePropsConfig.id - 1;
@@ -113,9 +113,9 @@ const Consumer = () => {
                 setTeachingBubblePropsConfig({ id: 0, config: TeachingProps });
                 toggleTeachingBubbleVisible();
                 break;
-        } 
+        }
     }
-    
+
     const nextBubbleProps: IButtonProps = {
         children: 'Next',
         onClick: () => onTeachingBubbleNavigation('next'),
@@ -130,34 +130,35 @@ const Consumer = () => {
         onClick: () => onTeachingBubbleNavigation('close'),
     };
 
-    const GetRandomDate = (start : Date, end : Date) : Date => {
-        var diff =  end.getTime() - start.getTime();
+    const GetRandomDate = (start: Date, end: Date): Date => {
+        var diff = end.getTime() - start.getTime();
         var new_diff = diff * Math.random();
         var date = new Date(start.getTime() + new_diff);
         return date;
     }
 
-    const GetRandomInt = (min : number, max : number) : number => {
+    const GetRandomInt = (min: number, max: number): number => {
         min = Math.ceil(min);
         max = Math.floor(max);
         return Math.floor(Math.random() * (max - min + 1)) + min;
     };
 
-    const SetDummyData = () : void => {
-        var dummyData : GridItemsType[] = []
-        for(var i = 1; i <= 100; i++){
-            var randomInt = GetRandomInt(1,3);
+    const SetDummyData = (): void => {
+        var dummyData: GridItemsType[] = []
+        for (var i = 1; i <= 100; i++) {
+            var randomInt = GetRandomInt(1, 3);
             dummyData.push({
                 id: i,
                 customerhovercol: 'Hover Me',
-                name: 'Name'+ GetRandomInt(1, 10),
+                name: 'Name' + GetRandomInt(1, 10),
                 password: "somepassword",
-                age: GetRandomInt(20,40),
+                age: GetRandomInt(20, 40),
                 designation: 'Designation' + GetRandomInt(1, 15),
                 salary: GetRandomInt(35000, 75000),
                 dateofjoining: '2010-10-10T14:57:10',
+                lasteupdatetime: '2010-10-10T14:57:11',
                 payrolltype: randomInt % 3 == 0 ? 'Weekly' : randomInt % 3 == 1 ? 'Bi-Weekly' : 'Monthly',
-                employmenttype: 'Employment Type' + GetRandomInt(1,12),
+                employmenttype: 'Employment Type' + GetRandomInt(1, 12),
                 employeelink: 'Link'
             });
         }
@@ -173,7 +174,7 @@ const Consumer = () => {
         alert('Grid Data Saved');
         LogRows(data);
         setItems([...data.filter(y => y._grid_row_operation_ != Operation.Delete).map(x => {
-            return {...x, '_grid_row_operation_': Operation.None}
+            return { ...x, '_grid_row_operation_': Operation.None }
         })]);
     };
 
@@ -182,7 +183,7 @@ const Consumer = () => {
         LogRows(data);
     };
 
-    const LogRows = (data: any[]) : void => {
+    const LogRows = (data: any[]): void => {
         console.log('Updated Rows');
         console.log(data.filter(item => item._grid_row_operation_ == Operation.Update));
         console.log('Added Rows');
@@ -193,22 +194,22 @@ const Consumer = () => {
         console.log(data.filter(item => item._grid_row_operation_ == Operation.None));
     }
 
-    const onPayrollChanged = (callbackRequestParamObj : ICallBackParams): any[] => {
+    const onPayrollChanged = (callbackRequestParamObj: ICallBackParams): any[] => {
         alert('Payroll Changed');
         return callbackRequestParamObj.data;
     }
 
-    const onDateChanged = (callbackRequestParamObj : ICallBackParams): any[] => {
+    const onDateChanged = (callbackRequestParamObj: ICallBackParams): any[] => {
         alert('Date Changed');
         return callbackRequestParamObj.data;
     }
 
-    const onEmploymentTypeChanged = (callbackRequestParamObj : ICallBackParams): any[] => {
+    const onEmploymentTypeChanged = (callbackRequestParamObj: ICallBackParams): any[] => {
         alert('Employment Type Changed');
         return callbackRequestParamObj.data;
     }
 
-    const onDesignationChanged = (callbackRequestParamObj : ICallBackParams): any[] => {
+    const onDesignationChanged = (callbackRequestParamObj: ICallBackParams): any[] => {
         callbackRequestParamObj.rowindex.forEach((index) => {
             callbackRequestParamObj.data.filter((item) => item._grid_row_id_ == index).map((item) => item.salary = 30000);
         });
@@ -216,7 +217,7 @@ const Consumer = () => {
         return callbackRequestParamObj.data;
     }
 
-    const attachGridValueChangeCallbacks = (columnConfig : IColumnConfig[]) : IColumnConfig[] => {
+    const attachGridValueChangeCallbacks = (columnConfig: IColumnConfig[]): IColumnConfig[] => {
         //columnConfig.filter((item) => item.key == 'designation').map((item) => item.onChange = onDesignationChanged);
         //columnConfig.filter((item) => item.key == 'employmenttype').map((item) => item.onChange = onEmploymentTypeChanged);
         //columnConfig.filter((item) => item.key == 'payrolltype').map((item) => item.onChange = onPayrollChanged);
@@ -225,7 +226,7 @@ const Consumer = () => {
     };
 
     const onCheckboxChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void => {
-        setGridConfigOptions({...gridConfigOptions, [(ev!.target as Element).id]: !gridConfigOptions[(ev!.target as Element).id] })
+        setGridConfigOptions({ ...gridConfigOptions, [(ev!.target as Element).id]: !gridConfigOptions[(ev!.target as Element).id] })
     };
 
     return (
@@ -300,10 +301,10 @@ const Consumer = () => {
                 </Stack>
             </fieldset>
             <div className={classNames.controlWrapper}>
-                <TextField id="searchField" placeholder='Search Grid' className={mergeStyles({ width: '60vh', paddingBottom:'10px' })} onChange={(event) => EventEmitter.dispatch(EventType.onSearch, event)}/>
+                <TextField id="searchField" placeholder='Search Grid' className={mergeStyles({ width: '60vh', paddingBottom: '10px' })} onChange={(event) => EventEmitter.dispatch(EventType.onSearch, event)} />
                 <Link>
-                    <FontIcon 
-                        aria-label="View" 
+                    <FontIcon
+                        aria-label="View"
                         iconName="View"
                         className={iconClass}
                         onClick={toggleTeachingBubbleVisible}
@@ -336,11 +337,11 @@ const Consumer = () => {
                 enableGridReset={gridConfigOptions.enableGridReset}
                 enableColumnFilters={gridConfigOptions.enableColumnFilters}
                 enableColumnFilterRules={gridConfigOptions.enableColumnFilterRules}
-                enableRowAddWithValues={{enable : gridConfigOptions.enableRowAddWithValues, enableRowsCounterInPanel : true}}
-                gridCopyOptions={{enableGridCopy: gridConfigOptions.enableGridCopy, enableRowCopy: gridConfigOptions.enableRowCopy}}
+                enableRowAddWithValues={{ enable: gridConfigOptions.enableRowAddWithValues, enableRowsCounterInPanel: true }}
+                gridCopyOptions={{ enableGridCopy: gridConfigOptions.enableGridCopy, enableRowCopy: gridConfigOptions.enableRowCopy }}
                 onGridStatusMessageCallback={(str) => {
                     toast.info(str, {
-                      position: toast.POSITION.TOP_CENTER
+                        position: toast.POSITION.TOP_CENTER
                     })
                 }}
                 onGridUpdate={onGridUpdate}
@@ -351,7 +352,7 @@ const Consumer = () => {
                         name: "Custom Command Bar Item1",
                         iconProps: { iconName: "Download" },
                         onClick: () => {
-                          alert('Clicked');
+                            alert('Clicked');
                         },
                     }
                 ]}
@@ -359,19 +360,19 @@ const Consumer = () => {
 
             {teachingBubbleVisible && (
                 <TeachingBubble
-                target={teachingBubblePropsConfig?.config.target}
-                primaryButtonProps={teachingBubblePropsConfig?.id < teachingBubbleConfig.length - 1 ? nextBubbleProps : closeButtonProps}
-                secondaryButtonProps={teachingBubblePropsConfig?.id > 0 ? previousBubbleProps : undefined}
-                onDismiss={toggleTeachingBubbleVisible}
-                footerContent={teachingBubblePropsConfig?.config.footerContent} 
-                headline={teachingBubblePropsConfig?.config.headline}
-                hasCloseButton={true}
-                isWide={teachingBubblePropsConfig?.config.isWide == null ? true : teachingBubblePropsConfig?.config.isWide}
-                calloutProps={{
-                    directionalHint:DirectionalHint.bottomLeftEdge,
-                }}
+                    target={teachingBubblePropsConfig?.config.target}
+                    primaryButtonProps={teachingBubblePropsConfig?.id < teachingBubbleConfig.length - 1 ? nextBubbleProps : closeButtonProps}
+                    secondaryButtonProps={teachingBubblePropsConfig?.id > 0 ? previousBubbleProps : undefined}
+                    onDismiss={toggleTeachingBubbleVisible}
+                    footerContent={teachingBubblePropsConfig?.config.footerContent}
+                    headline={teachingBubblePropsConfig?.config.headline}
+                    hasCloseButton={true}
+                    isWide={teachingBubblePropsConfig?.config.isWide == null ? true : teachingBubblePropsConfig?.config.isWide}
+                    calloutProps={{
+                        directionalHint: DirectionalHint.bottomLeftEdge,
+                    }}
                 >
-                {teachingBubblePropsConfig?.config.innerText}
+                    {teachingBubblePropsConfig?.config.innerText}
                 </TeachingBubble>
             )}
         </Fabric>
diff --git a/src/Examples/gridconsumer/hoverComponent.tsx b/src/Examples/gridconsumer/hoverComponent.tsx
index 59d2a418..2236a62d 100644
--- a/src/Examples/gridconsumer/hoverComponent.tsx
+++ b/src/Examples/gridconsumer/hoverComponent.tsx
@@ -11,17 +11,17 @@ const CellHoverComponent: FC<ICellHoverProps> = (props) => {
     return (
         <div>
             <ScrollablePane style={{ margin: '10px' }} scrollbarVisibility={ScrollbarVisibility.auto} id="griddataid">
-                <h2 style={{color:'green'}}>Custom Hover Component</h2>
-                <h6>Row Number: <span style={{ color:'blue' }}>{props.rowNum}</span></h6>
-                <h6>Column: <span style={{ color:'blue' }}>{props.column.name}</span></h6>
-                <h6>ID: <span style={{ color:'blue' }}>{props.rowData['id']}</span></h6>
-                <h6>Name: <span style={{ color:'blue' }}>{props.rowData['name']}</span></h6>
-                <h6>Age: <span style={{ color:'blue' }}>{props.rowData['age']}</span></h6>
-                <h6>Designation: <span style={{ color:'blue' }}>{props.rowData['designation']}</span></h6>
-                <h6>Salary: <span style={{ color:'blue' }}>{props.rowData['salary']}</span></h6>
-                <h6>Date Of Joining: <span style={{ color:'blue' }}>{props.rowData['dateofjoining']}</span></h6>
-                <h6>Payroll Type: <span style={{ color:'blue' }}>{props.rowData['payrolltype']}</span></h6>
-                <h6>Employment Type: <span style={{ color:'blue' }}>{props.rowData['employmenttype']}</span></h6>
+                <h2 style={{ color: 'green' }}>Custom Hover Component</h2>
+                <h6>Row Number: <span style={{ color: 'blue' }}>{props.rowNum}</span></h6>
+                <h6>Column: <span style={{ color: 'blue' }}>{props.column?.name}</span></h6>
+                <h6>ID: <span style={{ color: 'blue' }}>{props.rowData['id']}</span></h6>
+                <h6>Name: <span style={{ color: 'blue' }}>{props.rowData['name']}</span></h6>
+                <h6>Age: <span style={{ color: 'blue' }}>{props.rowData['age']}</span></h6>
+                <h6>Designation: <span style={{ color: 'blue' }}>{props.rowData['designation']}</span></h6>
+                <h6>Salary: <span style={{ color: 'blue' }}>{props.rowData['salary']}</span></h6>
+                <h6>Date Of Joining: <span style={{ color: 'blue' }}>{props.rowData['dateofjoining']}</span></h6>
+                <h6>Payroll Type: <span style={{ color: 'blue' }}>{props.rowData['payrolltype']}</span></h6>
+                <h6>Employment Type: <span style={{ color: 'blue' }}>{props.rowData['employmenttype']}</span></h6>
             </ScrollablePane>
         </div>
     );
diff --git a/src/libs/editablegrid/addrowpanel.tsx b/src/libs/editablegrid/addrowpanel.tsx
index ce5ba98e..5fa2bd7e 100644
--- a/src/libs/editablegrid/addrowpanel.tsx
+++ b/src/libs/editablegrid/addrowpanel.tsx
@@ -159,7 +159,7 @@ const AddRowPanel = (props: Props) => {
                     />);
                     break;
                 case EditControlType.DateTime:
-                    tmpRenderObj.push(
+                    tmpRenderObj.push(<div>
                         <Stack key={item.key} tokens={{ childrenGap: 8 }}>
                             <DatePicker
                                 strings={DayPickerStrings}
@@ -176,6 +176,7 @@ const AddRowPanel = (props: Props) => {
                                 onChange={(event, time: Date) => { onCellTimeChange(time, item) }}
                             />
                         </Stack>
+                    </div>
                     );
                     break;
                 default: