Kendo UI Grid Conditional editing

Question

I would like to disable DiscountPercentageMRC/NRC/Usage columns for certain CatalogProductId's. Please find below javascript for the grid. Any help would be greatly appreciated.

<h2>Kendo Grid bound to ASP.NET MVC action methods</h2>
@* The DIV where the Kendo grid will be initialized *@
<div id="grid"></div>
<script>
  $(document).ready(function () {
     $("#grid").kendoGrid({
         columns: [
         { field: "CompanyId"},
         { field: "CompanyName" },
         { field: "DiscountPercentageMRC" },
         { field: "CatalogProductId"},
         { field: "DiscountPercentageMRC" },
         { field: "DiscountPercentageNRC" },
         { field: "DiscountPercentageNRC" },
         { field: "DiscountPercentageUsage"}
         ],
        height: 400,
        editable: true, // enable editing
        pageable: true,
        sortable: true,
        filterable: true,
        toolbar: ["create", "save", "cancel","edit"], // specify toolbar commands
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            batch: true, 
            editable: "inline",
            transport: {
                read: {
                    url: "@Url.Action("ResellerDiscountsGet", "AccountDetail", new {                     BusOrdId = @ViewBag.Message })",
                    type: "POST",

                }
            }
        },

        selectable: true
    });

     });

   </script>

possible duplicate of [Make cell readonly in Kendo Grid if condition is met](http://stackoverflow.com/questions/20881484/make-cell-readonly-in-kendo-grid-if-condition-is-met) — Lars Höppner, Feb 24 '15 at 17:08

score 8 · Accepted Answer · edited Oct 15 '14 at 08:10

8

You would use the Edit event to enable/disable cells. I created a working example here: http://jsfiddle.net/Eh8GL/151/

function OnEdit(e) {
    // Make sure it's not a new entry
    if (!e.model.isNew()) {
        var catalogproductid =  e.container.find("input[name=CatalogProductId]").data("kendoNumericTextBox").value();

        // Disable DiscountPercentageMRC if catalog productid = 100
        if (catalogproductid == 100) {
            var disableField = e.container.find("input[name=DiscountPercentageMRC]").data("kendoNumericTextBox");
            disableField.enable(false);
        }
    }
}

edited Oct 15 '14 at 08:10

Kevin Hogg

1,771
25
34

answered Apr 14 '14 at 20:03

Rick S

6,476
5
29
43

What if `CatalogProductId` is not number type? – kittu Jul 03 '17 at 14:28
`data("kendoNumericTextBox");` this applies only for number type right? What about string type? – kittu Jul 03 '17 at 14:29
@Satyadev If you wanted to check if Company Name was a certain value and then disable a field you could do like this. http://jsfiddle.net/veys2g9d/1/ – Rick S Jul 05 '17 at 14:22
I think you didn't get me. I want to disable `Company Name` when I click on edit button and enable all other fields – kittu Jul 05 '17 at 18:37

Kendo UI Grid Conditional editing

1 Answers1

Linked