Hello Fredrik,

Thank you for posting in our forum.

Since switching the editors at runtime during row editing is not officially supported by the igGrid, I am currently investigating if I could provide you some workaround that would allow you to customize the Date column according to your requirements.

I will get back to you with more details soon.

Please do not hesitate to contact me if you have any additional questions or updates regarding this scenario in the meantime.

Hello Fredrik,

I am sorry for the delay. Upon some further research, here is a possible workaround that would allow you to achieve such conditional formatting when in edit mode:

The first thing that we would need is a formatter function, which would show only the date or time for the particular column we want to format. I have prepared an isolated code sample for you, which has an igGrid with four columns – the last one contains the dates and would be formatted by the formatter. Here is a code snippet: 

let dateTimeFormatter = (val, rec) => {
    let dateString = val.toLocaleString();
    let date = dateString.substr(0, dateString.indexOf(' ') - 1);
    let time = dateString.substr(dateString.indexOf(' ') + 1);
    return rec.OrderState === "Done Today" ? time : date
}

Then in the column array we need to notify the igGrid that the “dateTimeFormatter” would be used for the column:

$("#grid").igGrid({
    dataSource: gridDS,
    responseDataKey: "results",
    primaryKey: "ProductID",
    width: "1200px",
    autoCommit: true,
    columns: [   
        //.....some other columns
        { headerText: "UpdatedDate", key: "UpdatedDate",  dataType: "date", width: "25%", formatter: dateTimeFormatter }, 
    ],
})

With these changes the igGrid would show the rows in two different ways, depending on the value of the “OrderState” column. Additional event handling would be needed for the row editing, though - once the row enters edit mode, we want it to change the editor’s format. The ‘editRowStarted’ event is suitable for this purpose, as it gets raised after the row has been clicked and the igGrid has finished initializing all the corresponding editors. The event handler would look like this:

features: [
    {
        name: "Updating",
        //.....some Updating options......
        editRowStarted: (evt, ui) => {
            let comboText = $("#grid")
                .igGridUpdating("editorForKey", "OrderState")
                .igCombo("text")
            let dateTimeEditor = $("#grid").igGridUpdating("editorForKey", "UpdatedDate");
            dateTimeEditor.igDateEditor("option", "dateDisplayFormat", comboText === "Done Today" ? "time" : "date");
        }
    }
]

Notice I am using calls to several methods of the API – editorForKey returns the editor for the “UpdatedState” column, while “text” gives me the current value that has been selected from the combo dropdown. Then I use the igDateEditor setter to set the “dateDisplayFormat” option and change the editor to show either date or time.

One last thing – if the user selects another value from the combo dropdown, the editor would still show the initial formatting. In order to change that, we would need to handle one more event that gets raised by the igCombo editor: selectionChanged. It provides a reference to the newly selected value, by “ui.items[0].data.Value”. The handling logic is exactly the same as above, I am just taking the value through the ui parameter instead of calling ‘editorForKey’. I am using the ‘editorOptions’ to declare the handler, which would look like this:

features: [
    {
        name: "Updating",
        editMode: 'row',
        enableAddRow: false,
        enableDeleteRow: false,
        columnSettings: [
            {
                columnKey: "OrderState",
                editorType: "combo",
                editorOptions: {
                    dataSource: comboDS,
                    textKey: 'DropdownItem',
                    valueKey: 'Value',
                    selectionChanged: (evt, ui) => {
                        let comboText = ui.items[0].data.Value;
                        let dateTimeEditor = $("#grid").igGridUpdating("editorForKey", "UpdatedDate");
                        dateTimeEditor.igDateEditor("option", "dateDisplayFormat", comboText === "Done Today" ? "time" : "date");
                    }
                },
            },
        ],
    }
]

I have attached the whole sample as well, if you want to run it on your side. Please note that this is a custom solution and we cannot guarantee it would work for every possible scenario.

igGridDateTimeFormatter.zip

Feel free to contact me if you have some additional questions, or need some further assistance.

thank you very much