javascript - How to manually add an item into datasource in Kendo UI Combobox - Stack Overflow

admin管理员组

文章数量:1356789

I have a bobox that is being populated by a JSON string received from the servlet.

$(document).ready(function() {
    //Combobox Init (From Servlet)
    var boBoxDataSource = new kendo.data.DataSource({
        transport : {
            read : {
                url : "net/samso/action/mon/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
                dataType : "json",
                type : 'GET'
            }
        },
        schema : {
            model : {
                fields : {
                    key : {
                        type : "string"
                    },
                    value : {
                        type : "string"
                    }
                }
            }
        }
    });

    //Manually add an item
    boBoxDataSource.add({key: "062", value: "Total"});

    //Initialize Combobox
    $("#cb_srchgt_io_gb").kendoComboBox({
        dataSource : boBoxDataSource,
        dataTextField : "value",
        dataValueField : "key"
    })
});

The code works fine until I try to manually add an item to the datasource boBoxDataSource.add({key: "062", value: "Total"});. When the item is added, it gets rid of the other items that was populated from JSON data in the datasource.

Why is this happening?

I have a bobox that is being populated by a JSON string received from the servlet.

$(document).ready(function() {
    //Combobox Init (From Servlet)
    var boBoxDataSource = new kendo.data.DataSource({
        transport : {
            read : {
                url : "net/samso/action/mon/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
                dataType : "json",
                type : 'GET'
            }
        },
        schema : {
            model : {
                fields : {
                    key : {
                        type : "string"
                    },
                    value : {
                        type : "string"
                    }
                }
            }
        }
    });

    //Manually add an item
    boBoxDataSource.add({key: "062", value: "Total"});

    //Initialize Combobox
    $("#cb_srchgt_io_gb").kendoComboBox({
        dataSource : boBoxDataSource,
        dataTextField : "value",
        dataValueField : "key"
    })
});

The code works fine until I try to manually add an item to the datasource boBoxDataSource.add({key: "062", value: "Total"});. When the item is added, it gets rid of the other items that was populated from JSON data in the datasource.

Why is this happening?

• javascript
• jquery
• kendo-ui

Share Improve this question Follow edited May 28, 2015 at 9:15 Samurai 3,72955 gold badges2828 silver badges4040 bronze badges asked Mar 21, 2013 at 2:55 TtT23TtT23 7,0603535 gold badges105105 silver badges177177 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The problem is that DataSource is initialized asynchronously, I mean, you start loading when the bobox is initialized but the operation does not finish until the data is received back from the server. Then, and only then, is when you should invoke that element. Is not even acceptable move the add statement to the end of the sample code since loading from a server might take milliseconds or seconds.

If you want to add an element to what is being received from the server, you might use:

$(document).ready(function () {
    //Combobox Init (From Servlet)
    var boBoxDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url     : "net/samso/action/mon/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
                dataType: "json",
                type    : 'GET'
            }
        },
        schema   : {
            model: {
                fields: {
                    key  : { type: "string" },
                    value: { type: "string" }
                }
            },
            data: function(result) {
                //Manually add an item
                result.push({key: "062", value: "Total"});
                return result
            }
        }
    });

    //Initialize Combobox
    $("#cb_srchgt_io_gb").kendoComboBox({
        dataSource    : boBoxDataSource,
        dataTextField : "value",
        dataValueField: "key"
    })
});

You might do the same thing using requestEnd event and pushing the extra element to e.response:

requestEnd: function (e) {
    console.log("e", e);
    e.response.push({key: "062", value: "Total"});
}

Basically, any event that is fired after being received the data from the server is fine.

本文标签： javascriptHow to manually add an item into datasource in Kendo UI ComboboxStack Overflow