UI Progress Update

Webix JS
1

I have a for loop that I want to update the UI every X iterations. But I cannot get the UI to update properly. Something like this:

// the view
{
                    id: "viewProcessingRecords",
                    hidden: true,
                    cols: [
                        {
                            id: "viewProgressIcon",
                            width: 100,
                            height: 100
                        },
                        {
                            id: "viewProcessingRecordsCount",
                            template: function (obj) {
                                if (obj === undefined || obj === null) {
                                    return "Now processing...";
                                }
                                return obj.text;
                            },
                            borderless: true,
                            height: 100
                        }
                    ]
                }


// the button event handler
$$("btnValidate").attachEvent("onItemClick", function () {
            doProcessing();
});


// the validator

var list = [];
...
doProcessing: function() {

                
                for (var currentRow = startRow; currentRow < rows.length; currentRow++)
                {

                    var listItem = {
                        Name: "Row-" + currentRow,
                        Id: currentRow
                    };

                     list.push(listItem);

                    // update UI here
                     if (currentRow % 10 === 0) {
                          $$("viewProcessingRecordsCount").setValues({ text: currentRow + " records processed." });
                     }
                }

$$("viewProcessingRecordsCount").setValues({ text: "All records processed." });

}

The issue I have is that the UI label starts at “Undefined” and then just jumps to “All records processed”. I could have a LOT of records, and I’d like the user to see some kind of update to show that the browser has not locked up.

Thanks!

2

Sorry for my code formatting. I don’t know how to mark code sections in the text editor.

3

This is not specific to Webix, it is the normal way of js-html processing for all pages.

Browser will repaint view only after ending of js process, so if you want to show the progress of some long javascript method, you need to make it async

function step(){
   run_iteration();
   update_progress();
}
setTimeout(step, 1);