[Solved] Dropdown filtering not working for popup editing but works for in-line grid edit?

[Chris Rumsey]

Hi,

I have been switching some our grids to popup editing when adding a new grid while keeping to in-line grid editing for existing records. In the following example there are two dropdown lists. The trial site dropdown is filtered based on the country dropdown selection. This currently works fine in the in-line grid editing version: the two drop down editors populate their respective dropdowns initially. When the trial site dropdown is  selected it repopulates itself (I assume this is default behavior).

The popup editing behaves differently - there doesn't seem to be any default repopulation on the dropdown on selection.

My work round is to put an change event on the Country drop down editor definition but I am unsure how to refresh the dropdown sites editor from my OnChangeCountry function. Can you help?

regards,

Chris

 

function localcountryFilteredSiteLabelDropDownEditor(container, options) {

    //Used to filter the site  based on country selected in column
    var trail_countries = [];

    //trail_countries.push({ trial_site_id: '0', trial_site_label: 'None' });
    for (var idx = 0; idx < localCountryFromTrialId.length; idx++) {
        if (localCountryFromTrialId[idx].trial_country_id === options.model.trial_country_id) {
            trail_countries.push({ trial_site_id: localCountryFromTrialId[idx]["trial_site_id"], trial_site_label: localCountryFromTrialId[idx].trial_site_label });
        }
    }


    $('<input name="trial_site_id"  data-text-field="trial_site_label" data-value-field="trial_site_id" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            name: "trial_site_id",
            autoBind: true,
            dataSource: trail_countries,
            optionLabel: { trial_site_label: " ", trial_site_id: null }
        });


    CreateValidationMessage(container, "trial_site_id");
}



function localtrialCountryDropDownEditor(container, options) {
    $('<input name="trial_country_id"  data-text-field="country_name" data-value-field="trial_country_id" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            optionLabel: "Select country",
            dataSource: localCountry,
            change: onChangeCountry
        });


    CreateValidationMessage(container, "countryEditor");
}




function onChangeCountry (container, options) {


    // Can i just call the editor function as in the next line of commented out code?
    // One problem here is i don't seen to access to "options" reference
    localcountryFilteredSiteLabelDropDownEditor(container, options);

    // Alternatively can I call a refresh method of my trial site dropdown list but I am unsure how to I get a reference to it
    to do this. I think it should be something like this in the following :
    //var trial_site_id_object = $("#trial_site_id");
    //var dropdownlist = trial_site_id_object.data("kendoDropDownList");
    //if (dropdownlist) {
    //    dropdownlist.refresh();

}

 

[Stefan]

Hello Chris,

I can assume that the DropDown editors are connected. If my assumption is correct, please check the following example in our documentation with two cascading DropDownLists, which are working with 'inline' and 'popup' editing:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/cascading-dropdown-editors

If my assumption is not correct, please send a fully runnable example, so I can give a suggestion best suited for it.

Regards,
Stefan
Telerik by Progress

 

 

[Chris Rumsey]

Hi Stefan,

 

I was really hoping for a generic solution which will work for in-line and popup editing mode. In this example the grid is setup for popup when adding a new record and in-line edit for update. I have very little extra code when I switch editing mode from in-line to popup. I have not defined anything special for the popup version it uses the grid column definition etc for its setup and behavior.

 

My dropdown editor 'B' definition/populate function has code that filters based on the value of the other drop down 'A'. This works already for in-line edit but I want to alter it so that in the popup version the change event of 'A' will force the update/refresh of 'B' via the calling of its definition/populate function again. Is this possible?

[Stefan]

Hello Chris,

The provided code should work as expected still, adding a custom code to the implementation can cause unexpected behaviour.

The steps to achieve the desired result are- on the change event of the DropDown take the reference to the second DropDown using a jQuery selector and use the filter method to filter its dataSource:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-change 

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

In order to be able to determine what is causing the issue, please send a runnable example, as the issue can be caused by different factors.

Regards,
Stefan
Telerik by Progress

 

 

[Isaac]

Thanks for your post so far.

I have this serious issue with getting dropdownlist working on popup view from kendogrid. If I use Custom template inside Views/Shared/EditorTemplate, the template is poped up but I cant get my dropdownlist loading data.

If I use Kendo.Grid() auto popup, it gives me an input box instead of a dropdownlist.

I searched everywhere for a sample project where this was implemented but I found none.

I will appreciate if I can get a sample project to get this done.

 

Thanks.

[Stefan]

Hello, Isaac,

I can suggest checking the following forum thread containing a runnable example as well:

https://www.telerik.com/forums/how-to-use-dropdownlist-in-popup-editor-via-kendo-template

If there is still an issue, please provide an example reproducing it and I will gladly investigate further.

Regards,
Stefan
Progress Telerik