CODEWITHSUNDEEP
jqueryw2ui
PhD
PhD

Reputation: 11334

How to refresh w2ui grid to render a record value that is changed programmatically?

I'm using w2ui v1.5 and have the following "design"

Html:

<body>
<div id="myGrid" style="width:100%; height: 100vh"></div>
</body>

Script:

w2ui.myGrid.on('change',(event)=>{

    if(event.value_new !== event.value_previous) {
        const previousNote = event.value_previous;
        const updatedNote = event.value_new;
        const customId = event.recid;

        $.ajax({
            url:`/stuff/${customId}`,
            type:'PUT',
            contentType:'application/json',
            data:JSON.stringify({
                previousNote,
                updatedNote,
            })
        }).done((data, textStatus, xhr) => {
            console.log('DONE--->',data,'status',textStatus,'xhr',xhr); //NOOP
        }).fail((xhr, textStatus, errorThrown)=>{
            conflictPopup(customId, xhr.responseJSON);
        });
    }
});

In the popup I try to revert to the old value after displaying details:

const conflictPopup = (customId, data) => {
  w2ui.myGrid.set(customId,{userNotes:data.previousNote}); //DOESN'T WORK

  w2popup.open({
    title: 'CONFLICT - STALE DATA',
    body: 'oops!',
    actions: {
        Ok(event) {
        //even this doesn't work
            w2popup.close();
            w2ui['myGrid'].set(customId,{userNotes: data.currentValue});
            w2ui['myGrid'].refresh();//(customId,'userNotes');
        }
    }
});
}

The grid continues to show the stale data. I even tried calling w2ui.myGrid.refresh() but to no avail. I even tried using w2ui.myGrid.refreshCell(customId,data.previousNote) and even that doesn't work.

No combination of calling refresh or manually triggering the event forces the UI to update. If I do w2ui.myGrid.records on the console, I see the data structure with the correct value of the userNotes but the grid doesn't seem to get refreshed even after calling that method on the console. What am I missing?

Upvotes: 1

Views: 1045

Answers (1)

PhD
PhD

Reputation: 11334

After struggling for quite a while, I decided to do event.preventDefault() and manually set the values in the ajax callbacks. That seems to have worked:

const updateUserNote = (recordId, note) => w2ui.myGrid.set(recordId,{userNotes:note});
 
w2ui.myGrid.on('change',(event)=>{

    if(event.value_new !== event.value_previous) {
        const previousNote = event.value_previous;
        const updatedNote = event.value_new;
        const customId = event.recid;

        $.ajax({
            url:`/stuff/${customId}`,
            type:'PUT',
            contentType:'application/json',
            data:JSON.stringify({
                previousNote,
                updatedNote,
            })
        }).done((data, textStatus, xhr) => {
            console.log('DONE--->',data,'status',textStatus,'xhr',xhr); 
            updateUserNote(customId,updatedNote); //manually set
        }).fail((xhr, textStatus, errorThrown)=>{
            conflictPopup(customId, xhr.responseJSON);
            updateUserNote(customId,xhr.responseJSON.newValue); //manually set
        });
    }
});

Upvotes: 0

Related Questions