javascriptkendo-uikendo-dropdown

Kendo Dropdown list : set initial value that is not from Dropdown list


I'm implementing a dropdown list with Icon. It's similar to this https://demos.telerik.com/aspnet-mvc/dropdownlist/template

this.createDropdownList('iconField', this._services.getNames,
    {
        valueTemplate: function (dataItem) {
            return '<span style="background-image: url(\'' + "/Style/Images/" + fileName + '\');' + "vertical-align: middle;display: inline-block;width: 24px;height: 24px;background-size: 100%" + '"></span>' +
                '<span>' + dataItem.name+ '</span>';

        },
        template: function (dataItem) {
            return '<span style="background-image: url(\'' + "/Style/Images/" + fileName + '\');' + "vertical-align: middle;display: inline-block;width: 32px;height: 32px;background-size: 100% " + '"></span>' +
                '<span>' + dataItem.name+ '</span>';
        }
    });

Then I have the fieldChangeHandler function that sets the retrieved id from database

.getDropDown().setValueIfValid(id)

Everything works fine except when saved record is set to inactive and I need to look up the name from different list to set the value but shouldn't show up the dropdown list. I'm not sure how to do this.


Solution

  • The value that you want to display has to be in the dataSource for the dropdown list. Try populating your dropdown list with names from both the active and inactive lists. Then in the template (but not the valueTemplate), only render a visible element for the active ones:

    template: function (dataItem) {
        if (dataItem.isActive) {
            return '<span style="background-image: url(\'' + "/Style/Images/" + fileName + '\');' + "vertical-align: middle;display: inline-block;width: 32px;height: 32px;background-size: 100% " + '"></span>' +
                '<span>' + dataItem.name+ '</span>';
        } else {
            return "<div style='display: none'></div>";
        }
    });
    

    You should then be able to set the value to an inactive item and have it display as the selected item whilst not being visible in the list when the dropdown is opened.