This is a migrated thread and some comments may be shown as answers.

Kendo grid dataSource, How do I get the corresponding id instead of the default 1

2 Answers 1051 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Stark asked on 06 Apr 2021, 12:41 PM

I want to use dataSource.get () to get the corresponding id where the default id number = 1. Everyone help me, please.

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css" />

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>


<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>



</head>
<body>
<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",

edit: function (e) {
var id = e.sender.dataItem(e.container).ProductID;
var data = dataSource.get(1); //How do I get the corresponding id instead of the default 1
console.log(data.ProductName);
}


});
});

function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
</script>
</div>



</body>
</html>

2 Answers, 1 is accepted

answered on 09 Apr 2021, 09:06 AM

Hi, Stark,

Thank you for the provided code snippet.

The edit event provides you with the model of the current row so you can access the data directly without having to use the get() method:

edit: function (e) {
    var data = e.model;
    console.log(data.ProductName);
}

If you want to send additional data with the Update, you can use the transport.update.data configuration to do so.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.