How to preppend kendo ui dropdownlist remote data with static item(s)

drop-down-menu, jquery, kendo-ui

Solution

The datasource has an inserts function which inserts a new model instance to the datasource.

// insert a new model item at the very front of the collection
$("#groupCombo").data('kendoDropDownList').dataSource.insert(0, { GROUP_ID: -1, NAME: "all contacts" });

Problem

May be the title is not as clear as i would like it to be. i've been using kendo ui for a contact management system and i need to prepend the loaded(via ajax) groups for a particular user by say "all Contacts" with value = `-1`. this is an option to delete all contacts which is actually a group but not stated so in the database. so at the point the dropdownlist finishes loading we should have options like (group 1, group 2 ,group 3 loaded from ajax call, all contacts added manually): ``` all contacts group 1 group 2 group 3 ``` below is my code which works fine, loading the groups for a user. ``` $("#groupCombo").kendoDropDownList({ placeholder: "all contacts", dataTextField: "NAME", dataValueField: "GROUP_ID", dataSource : { transport:{ read: { url: crudServiceBaseUrl+"subscribers/readgroups", dataType: "json", data: { userId: dataItem.USER_ACCOUNT_ID } } } } }); ``` How can i achieve that? thanks for reading this.

Original source