Add Item To kendoDropDownList

Question

I am trying to add a item to the kendoDropDownList, it seems to add the option but not set the value and text. Inspecting the select it just adds a new option

 <option></option>

Here is what I am using

 $("#nameList").data("kendoDropDownList")
     .dataSource.add({ "text": "Joe", "value": "Joe" });

UPDATE

Here is my datasource model and the requestEnd as suggested but the values seem to get messed up

datasource_people = new kendo.data.DataSource({
        type: "json",
        serverFiltering: true,
        transport: {
            read: {
                dataType: 'json',
                type: 'GET',
                url: '/restful/people/'
            }
        },
        filter: {
            field: "status",
            operator: "eq",
            value: 1
        },
        schema: {
            data: function(response) {
                return response.data.plaintiffs;
            },
            model: {
                id: "person_id",
                fields: {
                    person_id: {type: "number"},
                    name: { type: "string"}
                }
            },
            errors: "error",
            total: function(response) {
                return response.data.total;
            }
        }
    });

Then Later

$("#people_list").kendoDropDownList({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: {
                        datasource_people,
                        requestEnd: function (e) {
                            e.response.push({text: "John", value: "John"});
                        }
                    }
                });

score 13 · Accepted Answer · answered May 13 '15 at 19:57

13

After some searching it was quite simple but this worked for exactly what i needed.

$("#people_list").getKendoDropDownList().dataSource.insert({
    person_id: "John",
    name: "John"
})

answered May 13 '15 at 19:57

Hector

682
3
14
27

Rick S · Answer 2 · 2015-05-13T14:31:08.447

4

You can add a new item to the datasource after it has been loaded using requestEnd.

requestEnd: function (e) {
  e.response.push({text: "Joe", value: "Joe"});
}

I've updated the other user's fiddle to show you it works. jsFiddle example

edited May 13 '15 at 14:31

answered May 12 '15 at 20:31

Rick S

6,476
5
29
43

1

This seems to work and is more a long the lines of what i need, but for some reason all of the values and text display as 'undefined' only when selected. Strange. – Hector May 13 '15 at 15:14
An up vote or mark as answered would be great since it solves your problem. You can post another question with the 'undefined' problem. – Rick S May 13 '15 at 15:34
btw, your dataTextField and dataValueField fields are wrong. – Rick S May 13 '15 at 15:35

score 1 · Answer 3 · edited May 12 '15 at 22:27

1

Use this:

<input id="nameList" value="1" />
var data = [
    { text: "Joe", value: "Joe" },
    { text: "Joe", value: "Joe"  },
    { text: "Joe", value: "Joe"  }
];

// create DropDownList from input HTML element
$("#nameList").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,         
});

DEMO

edited May 12 '15 at 22:27

Nic

12,220
20
77
105

answered May 12 '15 at 20:32

Harutyun Abgaryan

2,013
1
12
15

Thanks, but I should have mentioned that I already have options loaded in the list. This method would clear all of my current options rather than append to the list. – Hector May 12 '15 at 21:05
How could I call my original datasource along with the new data? transport: { read: { dataType: 'json', type: 'GET', url: '/restful/companies' } } – Hector May 12 '15 at 21:09
You can push in data new data, And after run again thus script – Harutyun Abgaryan May 12 '15 at 21:10

Nic · Answer 4 · 2015-05-12T22:08:10.370

1

Not sure what exactly you want, but you can load options from a datasource, and then append more to the list after dataBound has fired.

$("#nameList").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        transport: { 
            read: { 
                dataType: 'json', 
                type: 'GET', 
                url: '/restful/companies' 
            }
        } 
    },
    dataBound:onDataBound
});

<script>
    function onDataBound(e) {
        e.sender.dataSource.add({ "text": "Joe", "value": "Joe" });
    }
</script>

edited May 12 '15 at 22:08

answered May 12 '15 at 21:58

Nic

12,220
20
77
105

We're using the data- attributes to initialize the drop down. I can't find any information on a data- attribute for dataBound – Hector May 13 '15 at 13:41
I also tried this but does not seem to work: function onDataBound(e) { e.sender.dataSource.add({ text: "John", value: "John" }); } var dropdownlist = $("#nameList").data("kendoDropDownList"); dropdownlist.bind("dataBound", onDataBound); – Hector May 13 '15 at 14:14

Add Item To kendoDropDownList

4 Answers4