Databases
StackOverflow2013
Postsdbo
POHow to get the selected value from a kendo dropdownlist within a kendo grid?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get the selected value from a kendo dropdownlist within a kendo grid?
    text
    copied!<p>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:</p> <pre><code> $(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 } ], }); }); </code></pre> <p>Here is the code for the dropdownlist:</p> <pre><code> function categoryDropDownEditor(container, options) { $('&lt;input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '" id="test"/&gt;') .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" } } } }) }); } </code></pre> <p>Here is the code where I'm trying to save the values: </p> <pre><code>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 &lt; data.length; i++) { var item = data[i]; //Got the dropdown selected value &amp; 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' }); }; </code></pre> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload