getItem returning old form value - bug?

Webix JS
1

Hi, when using getItem it’s returning the original value of a text field not the current value. It only does this if I don’t click out of the field first before clicking a save button. The odd thing is that the object returned has the new value but if I reference it by the field name then it still has the old value; and JSON.stringify returns the old value. Seems like it’s a reference to the old data row.

webix UI v.3.1.2

code example:

snippet from form:

{id: “notes”, header: “Notes”, editor: “text”, width: 220},

zones.on_click.savebtn = function (e, id) {

        var record = zones.getItem(id.row);
        console.log(record.notes); // has old value
        console.log(record); // has new value

};

2

If you are talking about the inline editor in a grid or other data component, it will change the value in the data object only after closing the editor.

There is a separate API ( getEditorValue ) to access the value from a not closed editor.

As for different output in a console, it is caused by the way how console works ( it doesn’t lock properties of object on moment of logging, so when you are inspecting record object, it shows its current state, not the state on moment of console.log execution )

3

This is a datatable and I am editing the values, title in this case. If you don’t click out of a field and just click on the save button then the object (row) doesn’t pick up the value that you just typed into the data form. Here is my code.

webix.ready(function () {

    cust = webix.ui({
        container: "customers",
        responsive: true,
        id: "custdata",
        view: "datatable",
        columns: [
            {
                id: "", template: "<input class='viewbtn' type='button' value='View'>",
                css: "padding_less",
                width: 60
            },
            {id: "id", header: "ID", width: 70},
            {id: "display_name", header: ["Name", {content: "textFilter"}], width: 150},
            {id: "title", header: "Title", editor: "text", width: 150},
            {id: "company", header: ["Company", {content: "textFilter"}], editor: "text", width: 200},
            {id: "email", header: "Email", width: 250},
            {
                id: "sales_contact", header: ["Sales Contact", {content: "textFilter"}],
                editor: "richselect", options: ["none", "mike"], width: 150
            },
            {id: "contact_date", header: "Contact date", editor: "text", width: 120},
            {
                id: "", template: "<input class='savebtn' type='button' value='Save'>",
                css: "padding_less",
                width: 100
            },
        ],
        editable: true,
        resizeColumn: true,
        autoheight: true,
        autowidth: true,
        pager: {
            container: "paging_here",
            size: 10,
            group: 5
        },
        on: {
            "onItemClick": function (id) {
            }
        },

        url: "data/getcustomers"
    });

// save record
cust.on_click.savebtn = function (e, id, trg) {

        webix.message("Save row: " + id.row);
        var record = cust.getItem(id.row);
        console.log(record, record.title);
        saveCust(record);
        return false;
    };
4

You can force editor closing before running the save routine

cust.editStop(); //close editor
var record = cust.getItem(id.row);

If you don’t have access or don’t know the object that can be edited. You can run

webix.UIManager.applyChanges();

It will close active editor and apply changes

5

Using cust.editStop() inside my cust.on_click.savebtn function resolved the issue for me.

It seems like this function should be a part of the getItem() function to ensure that you are grabbing all of the current data. I’m sure that other people are seeing the same issues.

Thanks for the help and the great product!

6

We will consider such update.

There are some scenarios, when you may want to use getItem and do not close the currently active editor, though.