Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
160
Change date input format for cell depending on other cell in grid
posted

Hello!

I have search but not found a working solution for what I want to do, so here is my questions:

In my grid, I have two columns; Status and UpdatedDate, where changing value in the first one should change the input type for the second one.

UpdatedDate use igDateEditor with input format "datetime" as default.

Status use an igCombo for selecting different statuses, saving the selected value as string. Depending on status, I want to change the UpdateDate input format to only "time" or only "date" for each affected row.

Depending on status, I also want to set input for one or more cells on the affected row to required.

The input format for UpdatedDate should be set both when rendering the grid and when changing the status while editing a row.

Ex.

If status is changed to "Done today", the user should only need to set the time for the current day in the UpdatedDate cell. If the status is changed to "Postponed", the user should only need to set the new date, without any time.

I am using the MVC helper to define the grid and want to use rowedit mode.

Here is the updating part of my grid code:

            .Features(feature =>
            {
                feature.Updating()
                .EnableDeleteRow(false)
                .EnableAddRow(false)
                .EditMode(GridEditMode.Row)
                .ColumnSettings(cs =>
                {
                    cs.ColumnSetting().ColumnKey("Status").Required(true).EditorType(ColumnEditorType.Combo).ComboEditorOptions(co => co.DataSource(statuses).Mode(ComboMode.DropDown).EnableClearButton(false));
                    cs.ColumnSetting().ColumnKey("UpdatedDate").EditorType(ColumnEditorType.Date).Required(false).DateEditorOptions(o =>
                    {
                        o.DateInputFormat("dateTime");
                        o.Regional("sv");
                    });
                })
                .RowEditDialogOptions(eo =>
                {
                    eo.ShowReadonlyEditors(true);
                });
                feature.Sorting().Type(OpType.Local);
                feature.Filtering().Type(OpType.Local)
            })

  • 485
    Offline posted

    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.

  • 485
    Offline posted

    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.

  • 0
    Offline posted

    thank you very much