Feature request - add event to indicate when all remote requests done & data was bound

1 Answer 30 Views
Form
Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
Aleksandr asked on 04 Jan 2024, 05:26 PM
including cascade DDLs, it will help to manage submit buttons (enable/disable) & make sure that the data was loaded & set before the user can take any action  

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 09 Jan 2024, 09:36 AM

Hi Aleksandr,

When a request sent to the remote service is finished the requestend event of the datasource is fired:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/events/requestend

When the data is loaded in the DropDownList the dataBound event will be fired:

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/databound

In the Dojo example linked here, there will be alerts notifying when the requestEnd and the dataBound events are fired for the Categories and the Products cascading DropDownLists.

Please review the example and let me know in case you have additional questions.

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 09 Jan 2024, 02:13 PM

i did it the same way using deferred, but it works unstable, sometimes when you show the form, the form makes more events than we expect & some of the calls never resolve (reproducible, but chaotic )

 


if (elem.editor === "DropDownList") {
                            //debugger;
                            if (elem.editorOptions.dataSource && elem.editorOptions.dataSource.transport) {
                                elem.editorOptions.dataSource.requestStart = function () {
                                    console.log('start | ' + elem.field);
                                    that.remoteCalls.push({ field: elem.field, call: $.Deferred() });
                                };
                                elem.editorOptions.dataBound = function() {
                                    console.log('bound | ' + elem.field);
                                    //debugger;
                                    var item = that.remoteCalls.find((item) => item.field === elem.field);
                                    if (item !== -1) {
                                        var index = that.remoteCalls.indexOf(item);
                                        item.call.resolve();
                                        that.remoteCalls.splice(index, 1);
                                        console.log('resolved | ' + elem.field);
                                    }
                                }
                            }
                        }

 

 


kendo.ui.progress($("#" + this.id + "_editPopupWindow").data("kendoWindow").wrapper, true);
        var call = this.FormDataGet(this.itemId, this.isCopy);        
        var that = this;
        $.when(call).then(function () {
            var calls = that.remoteCalls.map((elem) => elem.call);
            $.when.apply(null, calls).then(function () {
                that.BindClickEvents();
                console.log('form | click | bind | complete');
                kendo.ui.progress($("#" + that.id + "_editPopupWindow").data("kendoWindow").wrapper, false);
            })            
        });    

Neli
Telerik team
commented on 12 Jan 2024, 09:02 AM

Hi Aleksandr,

From the provided information I am not sure what might be the cause of the issue experienced on your side. Could you please try to modify the Dojo example I have sent previously in order to reproduce the behavior the way it is on your side and send it back for a review? This way we could get a better idea of the possible cause of the observed issue.

Looking forward to your reply.

Regards,

Neli

Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 15 Jan 2024, 11:16 PM

i did not have time to create dojo, just returned to this task, but this is an example of double calls


kendoCustomGeneric.js:1307 start | Category
kendoCustomGeneric.js:1307 start | Type
kendoCustomGeneric.js:1307 start | Status
kendoCustomGeneric.js:1307 start | Disposition
kendoCustomGeneric.js:1333 form | ShowCreateOrEditWindow
kendoCustomGeneric.js:1370 form | data | start
kendoCustomGeneric.js:1312 bound | Category
kendoCustomGeneric.js:1319 resolved | Category
kendoCustomGeneric.js:1307 start | Category
kendoCustomGeneric.js:1307 start | Type
kendoCustomGeneric.js:1307 start | Status
kendoCustomGeneric.js:1307 start | Disposition
kendoCustomGeneric.js:1393 form | data | resolved
kendoCustomGeneric.js:1307 start | Agency
kendoCustomGeneric.js:1312 bound | Category
kendoCustomGeneric.js:1319 resolved | Category
kendoCustomGeneric.js:1312 bound | Agency
kendoCustomGeneric.js:1319 resolved | Agency
kendoCustomGeneric.js:1312 bound | Disposition
kendoCustomGeneric.js:1319 resolved | Disposition
kendoCustomGeneric.js:1312 bound | Status
kendoCustomGeneric.js:1319 resolved | Status
kendoCustomGeneric.js:1312 bound | Type
kendoCustomGeneric.js:1319 resolved | Type



this.ShowCreateOrEdit = function (itemId, isCopy) {
    if (!this.editController) {
        this.editController = new EditController("<%= KendoGridEditForm.ClientID%>",siteRoot, "api/EntityLicense/", "License", this.editFormItems(itemId), 2, 'Please enter the following information for any gaming and non-gaming licenses held by the entity.');
    }
    this.editController.ShowCreateOrEditWindow(itemId, function () {
        this.grid.dataSource.read();
    }.bind(this), isCopy);
};

 

this is what is executed once


this.BuildMainForm = function () {

    var form = $("#" + this.id + "_editForm").kendoForm({
        layout: "grid",
        grid: {
            cols: this.calls,
            gutter: 20
        },
        buttonsTemplate: "<button id='" + this.id + "_editFormSubmit' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-button-solid-primary' disabled>Save</button><button id='" + this.id + "_editFormCancel' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Cancel</button>",
        items: this.items,
    }).data("kendoForm");

    return form;
};

 

 

 

  
Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 15 Jan 2024, 11:30 PM

the core of the problem 

2 stat

1 bound

----------------

2 possible solutions

1 - init form every time we show it

2 - somehow tell the form not to request glossaries when we show popup

 

 

 

Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 15 Jan 2024, 11:50 PM

not sure 100% yet, but seems the solution is 

 

elem.editorOptions.autoBind = false;

Neli
Telerik team
commented on 18 Jan 2024, 12:29 PM

Hi Aleksandr, 

As far as I udnerstand you managed to reolve the issue by yourself. Thank you for sharing the solution that resolved the problem in your scenario. In case you have follow up questions, please let us know.

Regards,

NEli

Tags
Form
Asked by
Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
Answers by
Neli
Telerik team
Share this question
or