First issue is a display issue. The two date selectors are just showing the drop down without an input and looks pretty awful, image below. Once you select a date you can't tell the selected date until you click done closing the editor.
Second, and far more critical to me, I can't figure out how to alter options of the editor in an event of the editor. I want the second date to have a minimum date of the first date selector. I am attempting to set that value. I am pasting the code for these columns below as well. I have tried using ui.owner and ui.editorInput instead of ui.editor with the same results. The error I receive is: Uncaught Error: cannot call methods on igDatePicker prior to initialization; attempted to call method 'option'
startDate is a valid date.
{ headerText: "Begin Date", width: "130px", key: "BeginDate", dataType: "date", columnSettings: { validation: true, editorType: "datepicker", editorOptions: { id: "actionStepStartDate", required: true, nullable: false, dataMode: "text", minValue: new Date(asYear, asMonth, asDate), valueChanged: function (evt, ui) { startDate = ui.newValue; } } } }, { headerText: "End Date/<br />Deadline", key: "EndDate", dataType: "date", columnSettings: { validation: true, editorType: "datepicker", editorOptions: { id: "actionStepEndDate", required: true, nullable: false, dataMode: "text", maxValue: asMaxDate, dropDownListOpening: function (evt, ui) { if (startDate != null) { console.log(ui); $(ui.editor).igDatePicker("option", "minValue", startDate); } } } } },
Thanks!
Forgot version. I am on 15.2
Hello Andrew,
Your first issue looks to be a styling problem. Make sure to include the Ignite UI CSS files in the following order:
<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /><link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />
About your second issue. The configuration code is not correct. The columnSettings option is a property of the feature and not the column. The correct code is:
features: [ { name: "Updating", columnSettings: [{ columnKey: "BeginDate", // code omitted ... }, { columnKey: "EndDate", // code omitted ... }] } ]
You should be able to achieve what you're looking for with the following code for valueChanged event handler:
valueChanged: function (evt, ui) { var $endDate = $("#grid1").igGridUpdating("editorForKey", "EndDate"); if ($endDate) { $($endDate.igEditorFilter("option", "provider").editor.element).data("igDatePicker").options.minValue = ui.newValue; } }
I'm attaching a complete sample for your reference.
Hope this helps,Martin PavlovInfragistics, Inc.