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

4 posts, 0 answers
  1. Chris Rumsey
    Chris Rumsey avatar
    2 posts
    Member since:
    Aug 2016

    Posted 09 Sep Link to this post

    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();
     
    }

     

  2. Stefan
    Admin
    Stefan avatar
    265 posts

    Posted 13 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Chris Rumsey
    Chris Rumsey avatar
    2 posts
    Member since:
    Aug 2016

    Posted 13 Sep in reply to Stefan Link to this post

    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?

  5. Stefan
    Admin
    Stefan avatar
    265 posts

    Posted 15 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready