CODEWITHSUNDEEP
angularjskendo-uikendo-combobox
U.P
U.P

Reputation: 7442

Kendo UI: Combo box shows value instead of Text

I am using Kendo UI with AngularJS. I am having trouble fixing an issue.

If a model is set to an ID which is not present in the datasource the combobox is bound to, the value is shown in the dropdown as is. i.e. if I set the model to 4 and there is no data item in datasource with ID 4, the combobox shows 4 as is. I want to replace it with empty string. How can I change it to show empty textbox instead?

see the sample

PS. the problem is not limited to Angular. Kendo's own MVVM binding has the same issue.

Upvotes: 0

Views: 3485

Answers (2)

imBlue
imBlue

Reputation: 114

Might be late to the party but the accepted answer did not work for me.

If anyone is using SQL server to store their values with a parent table with the foreign key and then a child table where all the combobox values are stored. then what I did was return the ID and Text of the selected value (using left outer join).

EDIT: I just noticed this is angular, the below is for kendo-ui Jquery.

SQL

SELECT  col1,
        col2,
        col3,
        ChildID,                -- ID stored in parent table
        childTable.ChildDesc    -- Getting child text 
FROM    parentTable
LEFT OUTER JOIN childTable ON childTable.ChildID = parentTable.ChildID

JS

$("#id").kendoComboBox({
    dataTextField: "Description",
    dataValueField: "ID",
    filter: "contains",
    minLength: 1,
    filtering: onFilterCostCentre,
    value: item.ChildID,
    text: item.ChildDesc
})

Upvotes: 0

Alag
Alag

Reputation: 1408

Well, since it is not dropdown but combobox and so you can write every text inside it, I am afraid you will have to make your own check.

Value property just set a value and in case of combo box, if value not match with item in data source then it just set value to the input box.

To make a check I would use dataBound event which is started once after component is created. Because it is launched after component is created you can easily compare selected value with values in data source.

Small demo here. Hope it helps.

Upvotes: 1

Related Questions