Add max date as current date and time

[Neo]

Hi all,

I want to add max date as current date & time for the grid column. I'm using column model for add column options dynamically. My code as below,

        {

field: 'recordDatetime', type: 'date', editType: 'datetimepickeredit',

format: { type: 'date', format: 'MM/dd/yyyy hh:mm:ss a' },

textAlign: 'Center', minWidth: '230', allowReordering: false

},

[Seeni Sakthi Kumar Seeni Raj]

Hi Isanka,  

Thanks for contacting Syncfusion Support.  

Using the `edit ` (edit params) property of the Grid columns, min and max properties to the DateTimePicker can be set. Refer to the following documentation. 

https://ej2.syncfusion.com/documentation/datetimepicker/date-time-range/?no-cache=1 

https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#cell-edit-type-and-its-params 

We have prepared a stackblitz sample for your reference.  

https://stackblitz.com/edit/angular-ubchd7?file=app.component.ts 

Regards,  

Seeni Sakthi Kumar S. 

[Neo]

Hi Sakthi,

I edited code like below,

{

field: 'recordDatetime', type: 'date', editType: 'datetimepickeredit',

edit: { params: { max: new Date() } },

format: { type: 'date', format: 'MM/dd/yyyy hh:mm:ss a' },

textAlign: 'Center', minWidth: '230', allowReordering: false

},

It is working for future date. But when I use the max date as current date it will get error. Please advice me on this.

TypeError: Cannot read property 'removeChild' of null

[Thavasianand Sankaranarayanan]

Hi Neo, 

Thanks for the update. 

We have tried your replication procedure in our end. But it was unsuccessful at our end. Please find the below code snippet and sample for your reference. 

App.component.ts 

   { 

                    field: 'OrderDate', headerText: 'Order Date',type:'date', editType: 'datetimepickeredit',  edit: { params: { max: new Date() }}, 

                    format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' }, 

                    width: 170 

                }, 

Sample: https://stackblitz.com/edit/angular-145808-min-max?file=app.component.ts 

If you still faced the issue, please get back to us with the following details that will help us to provide the better solution as soon as possible. 

1) Share the complete Grid code 

       2)  share Essential JS 2 package version 

3)  Please try to reproduce the scenario, in above sample, If possible. 

Regards, 

Thavasianand S. 

[Neo]

Hi Thavasianand,

It's not working for me.

Request 1 - Share the complete Grid code 

** TS **

-- ngOnInit() --

this.editSettings = { allowEditing: true, allowAdding: true, mode: 'Batch', showConfirmDialog: false };

-- AfterServiceCall --

this.columns = [

{

field: 'recordDatetime', headerText: 'Record Date Time', type: 'date', editType: 'datetimepickeredit', edit: { params: { max: new Date() } },

format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' },

width: 170

}];

** HTML **

<div class="mdl-cell mdl-cell--12-col padding-top-10" style="height: 234px; overflow: auto">

<ejs-grid #dataGrid [dataSource]='data' [columns]='columns'

height='132px' [editSettings]='editSettings'>

</ejs-grid>

</div>

Request 2 - Share Essential JS 2 package version 

"@syncfusion/ej2-angular-grids": "17.2.34",

Request 3 - Please try to reproduce the scenario, in above sample, If possible. 

It's working on the sample you provided. (Using Batch edit mode too)

NOTE: I'm creating this gird inside a dialog model component.

[Seeni Sakthi Kumar Seeni Raj]

Hi Neo,  

Thanks for the update.  

We are unable to reproduce the reported problem at our end with the provided information. If you could provide the following information, which would be grateful to proceed further on this. 

1. Complete component page of the Grid
2. In case of any event handled (like actionbegin, actioncomplete), please share the complete code of them
3. How the data has been bounded to the Grid? Either remote or local? Have you used the observable binding?
4. Video demo of the issue
5. actionFailure event of the Grid will capture all the exceptions. So we suggest to bind them to the Grid and capture the exception message returned in their arguments. Copy and share them as text file.

Regards,  

Seeni Sakthi Kumar S. 

[Neo]

Hi Neo,  

Thanks for the update.  

We are unable to reproduce the reported problem at our end with the provided information. If you could provide the following information, which would be grateful to proceed further on this. 

1. Complete component page of the Grid
2. In case of any event handled (like actionbegin, actioncomplete), please share the complete code of them
3. How the data has been bounded to the Grid? Either remote or local? Have you used the observable binding?
4. Video demo of the issue
5. actionFailure event of the Grid will capture all the exceptions. So we suggest to bind them to the Grid and capture the exception message returned in their arguments. Copy and share them as text file.

Regards,  

Seeni Sakthi Kumar S. 

Hi Sakthi,

1. Complete component page of the Grid

     It won't be able to provide.

2. In case of any event handled (like actionbegin, actioncomplete), please share the complete code of them

     No events like that. Just code I provided in the previous reply.

3. How the data has been bounded to the Grid? Either remote or local? Have you used the observable binding?

     Yes. I'm using observable binding to bound data. Code as below,

      private loadGridFields() {

this.dataService.getGridFields().subscribe(

(fieldsResponse) => {

this.columns = this.transformFieldsToGridColumnsData(fieldsResponse);

this.dataGrid.allowResizing = true;

this.dataGrid.rowHeight = 35;

this.dataGrid.gridLines = "Both";

this.dataGrid.dataBind();

},

errorResponse => {

console.log("error", errorResponse);

},

() => { });

}

private transformFieldsToGridColumnsData(fields): any[] {

var fieldsArry: any[] = [];

fields.forEach(field => {

if (field.isSelected == true) {

if (field.elementName == "recordId") {

fieldsArry.push({ field: 'recordId', isPrimaryKey: 'true' });

}

else {

let fieldSetting = this.fieldSettings.find(filteredField => filteredField['field'] === field.elementName)

fieldsArry.push(fieldSetting);

}

}

})

return Object.assign([], fieldsArry);

}

public fieldSettings: any[] = [

{

field: 'recordDatetime', type: 'date', editType: 'datetimepickeredit',

edit: { params: { max: new Date() } }, format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' },

textAlign: 'Center', minWidth: '230', allowReordering: false

}

// Adding Other fields

];

     

Note: 'loadGridFields()'  loading inside the 'ngOnInit()'

4. Video demo of the issue

     Error coming when we clicking on the date from the datetime picker

5. actionFailure event of the Grid will capture all the exceptions. So we suggest to bind them to the Grid and capture the exception message returned in their arguments. Copy and share them as text file.

     Didn't work

Complete error

core.js:1624 ERROR TypeError: Cannot read property 'removeChild' of null

    at detach (dom.js:152)

    at DateTimePicker.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.destroy (datepicker.js:1123)

    at DateTimePicker.push../node_modules/@syncfusion/ej2-calendars/src/datetimepicker/datetimepicker.js.DateTimePicker.destroy (datetimepicker.js:151)

    at DatePickerEditCell.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/datepicker-edit-cell.js.DatePickerEditCell.destroy (datepicker-edit-cell.js:36)

    at Edit.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/edit.js.Edit.destroyWidgets (edit.js:545)

    at BatchEdit.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/batch-edit.js.BatchEdit.saveCell (batch-edit.js:830)

    at BatchEdit.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/batch-edit.js.BatchEdit.clickHandler (batch-edit.js:71)

    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:99)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:193)

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.mouseClickHandler (grid.js:2709)

[Thavasianand Sankaranarayanan]

Hi Neo, 

Thanks for your update. 

We are able to reproduce the reported issue and From your shared stack trace we could see that you have used batch editing mode. We have validated your requirement. We suggest you to use the custom validation to achieve your requirement. 

Please find the below code snippet and sample for more information. 

App.component.ts 

export class AppComponent { 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:'Batch' }; 

        this.toolbar = ['Add', 'Delete', 'Update', 'Cancel']; 

      this.columns =  [ 

                { 

                    field: 'OrderDate', headerText: 'Order Date', type: 'date',validationRules : {required: true, minDate: [this.customcomPareDateValue.bind(this), 'Enter a valid date'] }, editType: 'datetimepickeredit', 

                  format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' }, 

                  textAlign: 'Center', minWidth: '230', 

                    width: 170 

                }, 

                { 

                    field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150, 

                    edit: { params: { popupHeight: '300px' } } 

                }]; 

          } 

          customcomPareDateValue (args) { 

            //Here you can perform your validation 

            //based on the result return the true or false value 

            return args.value < '07/18/2019 00:00:00 AM' 

          } 

} 

Sample: https://stackblitz.com/edit/angular-145808-min-max?file=app.component.ts 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S.