Delay in autofill cell

2 posts, 0 answers
  1. José Angel
    José Angel avatar
    8 posts
    Member since:
    Aug 2013

    Posted 22 Mar 2016 Link to this post

    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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 23 Mar 2016 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top