Delay in autofill cell

[José Angel]

Hello,

I have a grid with 2 columns. One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.

The product quantity is obtained by a service.

Atm the user Inserts the Product Code in the first cell, and in the second cell the value is showed.

I had to make a few workarounds since i wanted that the cell after losing focus, or hit enter should save the row. (I made this due to the fact I wasn't able to make the second row not editable).

Because of this, the user experience a bit of delay, between entering the value and updating the other cell.

How can i make this quicker? Or put a loading gif until it updates?

My code is:

01.var dataSource = new kendo.data.DataSource({
02.    batch: false,
03.    autoSync: false,
04.    data: [],
05.    pageSize: 20,
06.    schema: {
07.        model: {
08.            id: "ProductID",
09.            fields: {
10.                ProductCode: { type: "string", validation: { required: true } },
11.                ProductQuantity: { type: "number", validation: { required: false, editable: false } }
12.            }
13.        }
14.    },
15.    edit: function (e) {
16.        if (e.model.isNew() == false) {
17.            $('[name="ProductQuantity"]').attr("readonly", true);
18.        }
19.    },
20.    change: function (e) {
21.        if (e.action == "itemchange" && e.field == "ProductCode") {
22.
23.            apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
24.                var obj = JSON.parse(data.Response);
25.                var grid = $("#ap-grid").data("kendoGrid");
26.                var data = grid.dataSource.data();
27.
28.                data[0].set('ProductQuantity', obj[0].qty);
29.            })
30.            $("#ap-grid").data("kendoGrid").saveRow();
31.
32.        }
33.
34.    }
35.});
36.
37.$("#ap-grid").kendoGrid({
38.    dataSource: dataSource,
39.    pageable: false,
40.    height: 550,
41.    toolbar: ["create"],
42.    columns: [
43.        { field: "ProductCode", title: "Product Code" },
44.        { field: "ProductQuantity", title: "Quantity" },
45.                                   { command: ["destroy"], title: " ", width: "250px" }],
46.    editable: "inline",
47.});

Any suggestions?

thanks in advance

[Dimiter Topalov]

Hi Jose,

In order to disable editing for the ProductQuantity column, you need to use:

ProductQuantity: { type: "number", editable: false }

...instead of 

ProductQuantity: { type: "number", validation: { required: false, editable: false } }

The "editable" option is a property of the model, not one of the model.validation. You can find more information in the corresponding section of our API reference: 

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model

I hope this helps.

Regards,
Dimiter Topalov
Telerik