Dynamic dropdownlist in custom popup grid editor

[Serghei]

I have a grid grouped by sections.
Sections are defined by org_id field which is a part of datasource.
One more field is Regional Code defined by regional_code_id field in datasource.
Grid edit is implemented as a popup editor based on template.
Regional Code is a dropdownlist in popup edit template.
The content of this dropdown in popup template SHOULD DEPEND on section.
So I do following in grid edit event:
edit: function(e) {
    console.log('edit event', e.model.ORG_ID);
    dsRegionalCode.read({org_id: e.model.ORG_ID});
}

I see in the console that it passes a correct ID of section when requesting data from server and gets a correct data.
First time it works fine in the template and shows a correct Regional Code value in dropdown.
But if I edit a grid record from another section, the Regional Code dropdown doesn't show a correct value.
It shows -- Select Value --
Then second edit click at the same grid record shows a correct value in dropdown.
Looks like it doesn't wait till dsRegionalCodeCode.read() finishes and uses what datasource contains right now, i.e. the content from previous read.
Kendo UI documentation describes one more grid event: beforeEdit.
So I tried following:
beforeEdit: function(e) {
    console.log('beforeEdit event', e.model.ORG_ID);
    dsRegionalCode.read({org_id: e.model.ORG_ID});
}

But I don't see this message in console log at all. I see 'edit event' only.
Looks like this event doesn't fire when you click edit to open popup editor.
Version of Kendo UI is v2016.2.714

Could you please explain what is a correct way of populating datasource for dropdown in grid popup editor if by design the content of this dropdown depends on a record in a grid and it could vary?

[Stefan]

Hello Serghei,

Thank you for the provided details.

The beforeEdit event is not fired in this scenario as it is a new event which is available only in the latest versions(introduced in v2017.2.504) of Kendo UI and I noticed that the used version is 2016.2.714.

In order to utilize the beforeEdit event, please update to the latest version of Kendo UI.

If the issue still occurs after the update, please provide a runnable example reproducing it as it seems to be a timing one, and we may need to inspect it in more details.

Regards,
Stefan
Progress Telerik

[Serghei]

Thanks for reply Stefan.

Unfortunately upgrade is not an option for me right now because usually it requires a lot of QA of a whole application and we did upgrade about a year ago.

But I found a solution:

-Don't use default edit button defined in grid command ( command: [{name: "edit"}])

-Instead, define a custom command button by command: [{text: "edit", click: prepareDataForDropdown}]

-then write a click handler. example:

function prepareDataForDropdown(e){
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    dsRegionalCode.read({org_id: dataItem.ORG_ID}).then(function(){
        $('#directoryGrid').data("kendoGrid").editRow(dataItem);
    });
}

Important! Main idea: first prepare data for all 'dynamic' elements in edit popup, then initiate edit programmatically. As you see, the code first reads data with a specific org_id to provide a correct set of Regional Code items for a dropdown in edit popup for a given grid record, and only then ('.then' is a promise that specifies a callback function, it will be executed when the read finishes) it executes editRow method. In case you have several 'dynamic' dropdowns, you have to combine promises from all of them and execute editRow method when all the data is prepared.

Important2! e.model is undefined in command click handler so you need to find a way of getting a correct dataItem from a grid. In my case it is

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

Again, this workaround is for a case when grid edit popup form contains dropdowns which content could vary from record to record.