Search code examples
javascriptjquerykendo-uikendo-dropdown

optionLabel text not displaying initially / kendodropdownlist


I am using the below, which all works; except my optionLabel text does not display initially, initially it is just blank, only after the initial click it begins working as expected. How may I fix this with kendo dropdownlist?

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: urld,
                dataType: "json",
                type: 'GET'
            }
        }
    });

    var pointTemps = $("#templates").kendoDropDownList({
        optionLabel: "Choose Template", <----- only begins to work after initial click
        dataSource    : dataSource,
        dataTextField : "styleName",
        select: getSelectedText,
    });

    var ds = pointTemps.data('kendoDropDownList').dataSource;
        ds.filter({
        logic: 'or',
        filters: [
            { field: "kewl", operator: "neq", value: null}
        ]
    });
    dataSource.read();

Solution

  • dataSource inside dropDownList triggers read method, you don't have to change dataSource after that. If you do so you are overriding current dataSource and removing data from inside it, and that probably removes optionLabel.

    I would in your case do something like this:

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: urld,
                dataType: "json",
                type: 'GET'
            }
        },
        filter: { field: "kewl", operator: "neq", value: null}
    });
    
    var pointTemps = $("#templates").kendoDropDownList({
        optionLabel: "Choose Template",
        dataSource    : dataSource,
        dataTextField : "styleName",
        select: getSelectedText,
    });
    

    And that's it, no extra call's needed.