CODEWITHSUNDEEP
kendo-uikendo-grid
EasyE
EasyE

Reputation: 580

My Kendo observable is not data binding appropriately to the Kendo Drop DownList

I am currently working with Kendo UI and am trying to data bind my Kendo observable to my drop down list. My drop down list is customized and is created inside of a Kendo editing popup object. I used a simple approach of just calling the editor in my columns and creating a function that creates a drop down list in that object. Now I am able to data bind with out an issue in my HTML file, however I am finding it difficult to do the same with my current approach.

Currently I am filling up the grid with data, I am able to populate the grid with the client name and client number, but the client type is not being posted. I assume is the failure to appropriately data-bind.

This is my Kendo observable 

var viewModel = kendo.observable({
    client: {
        clientName: "",
        clientNumber: "",
        clientType: "",
    },
    dropdownlist: ["HCC", "Tax", "Audit", "Advisory"],
});

This is my Kendo Grid 

$("#grid").kendoGrid({
    dataSource: client,
    toolbar: ["create"],

    columns: [{
        field: "clientName",
        title: "Client Name",
    },
    {
        field: "clientNumber",
        title: "Client Number",
    },
    {
        field: "clientType",
        title: "Client Type",
        editor: categoryDropDownEditor,
    }
    ],
    editable: "popup",
})

And this is my customized function which I am having issues data binding.

function categoryDropDownEditor(container) {
    $('<input data-role="dropdownlist" data-bind="source: dropdownlist , value: client.clientType">')
        .appendTo(container)
        .kendoDropDownList({
            optionLabel: "Engagement Types",
            dataSource: viewModel.dropdownlist,              
        });
}

enter image description here

Upvotes: 0

Views: 102

Answers (1)

Gene R
Gene R

Reputation: 3744

replace value: client.clientType to value: clientType:

function categoryDropDownEditor(container) {
    $('<input data-role="dropdownlist" data-bind="source: dropdownlist, value: clientType">')
        .appendTo(container)
        .kendoDropDownList({
            optionLabel: "Engagement Types",
            dataSource: viewModel.dropdownlist,              
        });
}

Upvotes: 1

Related Questions