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 9 Views
This is a migrated thread and some comments may be shown as answers.
Stark
Top achievements
Rank 1
Iron
Iron
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: "&nbsp;", 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

Sort by
0
Stark
Top achievements
Rank 1
Iron
Iron
answered on 06 Apr 2021, 12:48 PM
I am using with asp.net web api. In my practice, I used the update: to call the API but I don't know how to  get id value corresponding instead change to id=1 default current.
I have to collect files with dataItem, but the code does not understand when it is placed in the transport: { update:  
0
Georgi Denchev
Telerik team
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.

Tags
Grid
Asked by
Stark
Top achievements
Rank 1
Iron
Iron
Answers by
Stark
Top achievements
Rank 1
Iron
Iron
Georgi Denchev
Telerik team
Share this question
or