Hi Infragistics Team,
While updating a row in grid, we have Start Date and End Date. I am stuck with validation of this column.
1.When I select Start Date, datepicker for End Date should show dates greater than Start date and previous dates should be disabled in the datepicker.
Columns -
Validation part –
Can you help for the above validation? Thanks!
Hello Tapas,
Thank you for posting in our community.
I have created and attached a sample illustrating the desired behavior. By handling the editCellStarting event, the rowID is retrieved and then used for getting the "BEGIN_DATE" cell value:
.... editCellStarting: function (evt, ui) { rowID = ui.rowID; } ....
When opening the date picker in the "END_DATE" column, the dropDownListOpening event of the control is handled to set the minDate option to the retrieved value.
.... columnKey: "END_DATE", editorType: "datepicker", editorOptions: { dropDownListOpening: function (evt, ui) { var BEGIN_DATE = $("#grid").igGrid("getCellText", rowID, "BEGIN_DATE"); if (date) BEGIN_DATE = date; $(ui.editorInput[0]).datepicker("option", "minDate", new Date(BEGIN_DATE)); date = null; } } ....
8713.Sample.zip
Hi Martin,
Above example works for the first time but it doesnt work for the second time .
Suppose, you have selected start date as 5/10/2020 and then prior to 5/10/2020 will not be visible for end date which is correct . but click again on end date and now it will not work ,it will show dates prior to start date .
We have removed date = null from the below code and its working for the second time click
{ columnKey: "END_DATE", editorType: "datepicker", editorOptions: { itemSelected: function (evt, ui) { endDate = $(this).igDatePicker("value"); }, dropDownListOpening: function (evt, ui) { var BEGIN_DATE = $("#datePeriod").igGrid("getCellText", rowID, "BEGIN_DATE"); debugger; if (date) BEGIN_DATE = date; $(ui.editorInput[0]).datepicker("option", "minDate", new Date(BEGIN_DATE)); // date = null; -- removed this line endDate = $(this).igDatePicker("value"); }, validatorOptions: { required: true, } } }
But, we need to make it null because its showing the same filtered criteria for start date (not greater than end date) after reopening the pop up like I closed the pop up for the first time and clicked again on Add new row so it shows the old filtered criteria and start date will not allow to select dates which were greater than end date in previous selection.
Where should we make it to null to work it for the second time ?