Empty grid with one column for input and other for output

Question

I've start using kendo.ui and I'm getting a few problems when build a grid.

It is my intention to add a grid with 2 columns. The first one for user input. And the second one to be read only. The value in the second column will come from DB.

To start I want my grid to be empty only with a blank row. User enters code number in first column, press enter. This will calculate the value in the second column and should add a new row.

Kendo should be easy but I'm having troubles creating this.

$('#divGrid').kendoGrid({
                        columns: [
                         { field: "Partnumber" },
                         { field: "Quantity" }
                        ],
                        dataSource: {
                            data: [
                              { Partnumber: "", Quantity: '' },
                            ],
                        },
                        editable: {
                            mode: "inline"
                        }
                    });

This simply will add a null row because I'm using an empty datasource.

I've tried putting this editable so the user can make an input. But it seems both cells get editable.

Thanks in advance

André

andrescpacheco andrescpacheco · Accepted Answer · 2016-05-30T07:22:44

Realized now that nobody answer to this question and I've found a workaround for this.

Using the change event, i can "save" the row after being introduced. Just have to wait for the response. I've used a kendo progress to prevent the user from interaction with the grid.

$('#divGrid').kendoGrid({
                    columns: [
                     { field: "Partnumber" },
                     { field: "Quantity" }
                    ],
                    dataSource: {
                        data: [],
                        schema: {
                                model: {
                                    fields: {
                                        Partnumber: { type: "string", validation: { required: true } },
                                        Quantity: { type: "string" }
                                    }
                                }
                            },
                            change: function (e) {
                               // Other code here

                                if (e.action === "itemchange" && e.field === "Partnumber") {
                                            kendo.ui.progress(loading, true);                                        
                                            var data = grid.dataSource.data();
                                            data[0].set('Partnumber', kendo.toString(obj[0].qty, "n0"));
                                            data[0].set('Quantity', kendo.toString(obj[0].stock, "n0"));
                                    }

                    }
                    },
                    editable: {
                        mode: "inline"
                    }
                });

Hope this helps anyone.

André

Empty grid with one column for input and other for output

1 Answers