Disable user input on kendo grid

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

    Posted 22 Mar 2016 Link to this post

    I'm having a few problems while using kendo grid.

    I'm trying to add an empty where the user can add rows to it. 
    The grid only have 2 rows (ProductCode and ProductQuantity). 

    On insert new row, or on editing an existence one, the user should only be able to introduce vales in the ProductCode. The ProductQuantity will be updated using a service.

    The following code represents what I've done so far. 

    I've added required: false and editable: false  to the ProductQuantity.

    I've tried to catch the add event but nothing seems to work.

    var dataSource = new kendo.data.DataSource({
        batch: false,
        autoSync: false,
        data: [],
        pageSize: 20,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductCode: { type: "string", validation: { required: true } },
                    ProductQuantity: { type: "number", validation: { required: false, editable: false } }
        edit: function (e) {
            if (e.model.isNew() == false) {
                $('[name="ProductQuantity"]').attr("readonly", true);
        change: function (e) {
            if (e.action == "itemchange") {
               //do something
        dataSource: dataSource,
        pageable: false,
        height: 550,
        toolbar: ["create"],
        columns: [
            { field: "ProductCode", title: "Product Code" },
            { field: "ProductQuantity", title: "Quantity" },
                                       { command: ["edit", "destroy"], title: " ", width: "250px" }],
        editable: "inline",

    How can Iachieve this?

    Thanks In advance

  2. Daniel
    Daniel avatar
    2231 posts

    Posted 24 Mar 2016 Link to this post


    The editable option should be set to the field options instead of the validation e.g.
    fields: {
        ProductCode: { type: "string", validation: { required: true } },
        ProductQuantity: { type: "number", validation: { required: false }, editable: false }

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top