How to add dynamic row ( with dropdown in column ) when we have an edit option already implemented in kendo grid

Question

I have a kendo grid which contains dropdown as few column values. I could edit the particular grid it is giving the proper dropdown values but when I try to add a new row dynamically to the grid it shows error .

Live example link

What I am looking for is when i click on the add new item button in the grid it should add a new row with the given dropdown values.

I have tried to add toolbar: ["create"] for creating new toolbar Inside data bound event I have tried to capture the button click and tried to add a new row but nothing is working

dataBound: function (e) {
            $('.k-grid-add').unbind("click");

            $('.k-grid-add').bind("click", function () {
                dataSource.add({ brandId: 0, name: "" });
                var data = dataSource.data();
            });
        },

Can someone help me to resolve this issue?

Answer 1

Sometimes you need to add data. in the templates in order to access a desired data property. Change your templates to:

template: "#= brandName(data.brandId) #"

and

template: "#= modelName(data.modelId) #"

Demo