How to get the selected value from a kendo dropdownlist within a kendo grid?

Question

I have a kendo grid with batch editing enabled which contains a dropdownlist. I can read the other field of the grid while trying to save batch information but getting hard time to read the selected value of the dropdownlist. Here is my code for the grid:

  $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: datasource,
                navigatable: true,
                pageable: true,
                height: 430,
                sortable: true,
                editable: true,
                selectable: "multiple row",
                groupable: true,
                navigatable: true,
                filterable: true,
                toolbar: ["create", "cancel"],
                columns: [

                    { field: "EmployeeID", title: "Employee ID", width: 110 },
                    { field: "EmployeeName", title: "Employee Name", width: 110 },
                    { field: "Category", title: "Category", editor: categoryDropDownEditor, width: 50 },

                    { command: "destroy", title: "Delete", width: 90 }
                ],



            });
        });

Here is the code for the dropdownlist:

 function categoryDropDownEditor(container, options) {
            $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '" id="test"/>')
                .appendTo(container)
                .kendoDropDownList({
                    dataTextField: "EmployeeName",
                    dataValueField: "EmployeeID",
                    optionLabel: "Select",
                    autoBind: false,

                    //index: 0,
                    //change: onChange,
                    dataSource: new kendo.data.DataSource( {

                        transport: {
                            read: {
                                url: "/Home/Category",
                                type: "GET"
                            },
                            schema:{
                                model: {
                                    ID: "CategoryID",
                                    Value: "CategoryName"
                                }
                            }
                        }
                    })
                });
        }

Here is the code where I'm trying to save the values:

function Save() {


        var EmployeeInfo = { "EmployeeID": "", "EmployeeName": "", "CategoryID": "" };

        var CompanyInfo = { "CompanyID": "", "CompanyName": "", "Employee": [] };

        CompanyInfo.CompanyID = $("#CompanyID").val();
        CompanyInfo.CompanyName = $("#CompanyName").val();

        var drop = $("#test").data("kendoDropDownList");

        var GridData = $("#grid").data("kendoGrid");

        var data = GridData.dataSource.data();
        for (var i = 0; i < data.length; i++) {

            var item = data[i]; //Got the dropdown selected value & text here, just need to assign that value to the CategoryID attribute!
            EmployeeInfo.EmployeeID = item.EmployeeID;
            EmployeeInfo.EmployeeName = item.EmployeeName; 
            EmployeeInfo.CategoryID = item.CategoryID[0];  //Problem is here in assinging data!!
            CompanyInfo.Employee.push(EmployeeInfo);
            EmployeeInfo = { "EmployeeID": "", "EmployeeName": "" };


        }


        $.ajax({
            url: '/Home/Create',
            data: JSON.stringify(CompanyInfo),
            type: 'POST',
            contentType: 'application/json;',
            dataType: 'json'

        });
    };

How can I get the selected value of the dropdownlist? Another problem is that, after selecting an item in the dropdown, when I'm moving to another line of grid, the selected text getting changed in the dropdown, showing [object, object] instead. Please help. Thanks.

Answer 1

The problem is that you are trying to access the DropDownList from Save function when very likely that input no longer exist. You should simply access that field the same way you access the others. An editor function updates the fields because it is an observable object.

Try doing:

for (var i = 0; i < data.length; i++) {
    var item = data[i];
    EmployeeInfo.EmployeeID = item.EmployeeID;
    EmployeeInfo.EmployeeName = item.EmployeeName; 
    EmployeeInfo.CategoryID = item.Category,
    CompanyInfo.Employee.push(EmployeeInfo);
    EmployeeInfo = { "EmployeeID": "", "EmployeeName": "" };
}

By the way, I'm not sure about the processing that you want to do before sending the data to the server but typically people use create, update and destroy in DataSource.transport. It uses to simplify your development and saves you from doing ajax calls.

Answer 2

You can get the selected value by passing tag name using jquery. try this

$('#grid select option:selected').val(); // for val


$('#grid select option:selected').text(); // for text

Answer 3

when select a value from a dropdown list, and in the selec event , we can get the selected value as following ,

@(Html.Kendo().DropDownList()
              .Name("booksDropDown")
              .HtmlAttributes(new { style = "width:37%" })
              .DataTextField("BookName")
              .DataValueField("BookId")
              .Events(x => x.Select("onSelectBookValue"))
              .DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
              .OptionLabel("Select"))

javascript function like following ,

      function onSelectBookValue(e) {    

                    var dataItem = this.dataItem(e.item.index());
                    var bookId = dataItem.BookId;
//other user code
    }

I believe this will help someone

Thanks