Disable editing of a grid column?

[Kyle]

I have one column that I do not want users editing (a username).

I have tried the following:

                columns: [
                    { field: "entityName", title:"Name", editor: null, template: '<img src="#= iconURL #" style="border: 0px;" />&nbsp;#= entityName #' },
                    { field: "editable", title: "editable", filterable: true, sortable: true, editor: comboEditor},
                    { command: ["edit"], title: "&nbsp;", width: "210px", filterable: false }
                ]

Where I have specified the editor as null and that does not work. Additionally have tried:

                    { field: "entityName", title:"Name", editable: false, template: '<img src="#= iconURL #" style="border: 0px;" />&nbsp;#= entityName #' }, 

And that still does not work. Am I overlooking a simple way to disable editing an individual column?

[Alexander Valchev]

Hello Kyle,

You could disable editing of a particular column in the model of the dataSource. For example:

model: {
    fields: {
        ProductID: {
            //this field will not be editable (default value is true)
            editable: false
        }
    }
}

I hope this information will help.

Greetings,
Alexander Valchev
the Telerik team

[Kyle]

Thanks, that did exactly what I was looking for. I hadn't thought of marking it as non editable in the model.

[Guido]

Wouldn't it make more sense to have this in the columns section? That way I can keep my datasource simply generated by some json

like:

var dataSource = new kendo.data.DataSource({data: strategyFamily});

                var gridHtml = $(strategyFamilyHtml).find('.strategyGrid').kendoGrid({

                    dataSource: dataSource,

                    editable: true,

                    columns: [

                        {

                            field: 'name',

                            title: 'name',

                            editable: false

                        },

                        {

                            field: 'message',

                            title: 'message'

                        },

                        {

                            field: "enabled",

                            title: "enabled"                               

                        }

                     

                    ]

                });

Now I am going to have to deep dive into the data to describe what the UI may or may not do, cumbersome and it doesn't feel right

[Guido]

To expand upon that, I now have to add this to my code, which seems unfortunate:

var dataSource = new kendo.data.DataSource({

                    data: strategyFamily,

                    schema: {

 

                        model: {

                            fields: {

                                name: {

                                    editable: false

                                },

                                message: {

                                    editable: true

                                },

                                enabled: {

                                    type: "boolean"

 

                                }

                            }

                        }

                    }

                });

[Vijith]

I second the thought. Disabling edit on the UI column, does not seem to be a concern on the model. It seems more intuitive to have it as column option.

Thanks,

Vijith

[Alexander Valchev]

Hi Vijith,

Setting editable: false in the model configuration will not only disable the UI but also prevent editing in the model via JavaScript.

Regards,
Alexander Valchev
Telerik

 

 

[Rakesh]

Can you check this plunkr: https://plnkr.co/edit/wtpnujzLz35kaHFasfae

In edit mode, when I click on the Units In Stock column it opens the pop-up twice.

[Rakesh]

Test

[Rakesh]

https: //plnkr.co/edit/wtpnujzLz35kaHFasfae

 

Can you check this plunkr. In edit mode, the units in stock column opens the pop-up twice.

[Alexander Valchev]

Hi Rakesh,

I was not able to reproduce the issue on my side. Could you please specify which browser and OS you use?

Regards,
Alexander Valchev
Telerik by Progress

[Alex Hajigeorgieva]

Hi,

Just a quick update that the Kendo UI Grid columns now support the desired ability to disable editing of a column:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable

When using this property with an MVVM grid or with the Kendo UI wrappers for MVC, set it as a function:

<div data-role="grid"
     data-editable="true"
     data-toolbar="['create', 'save']"
     data-columns="[
       { 'field': 'UnitPrice' , 'editable' : function(){return false} },
      ]"></div>

https://dojo.telerik.com/@bubblemaster/OZEFufAM

Regards,
Alex Hajigeorgieva
Progress Telerik

[Austin]

I know this may not help the OP but I stumbled upon another thread a while ago explaining how to achieve this but still be able to display/edit the value via jquery. 

columns:[

{ field: "FeeTypeID", width: 100, minwidth: 50, editor: nonEditor },

}

function nonEditor(container, options) {
    container.removeClass("k-edit-cell");
}

 

I am using this in conjunction with a dropdown list that will populate this cell with its value. I know the OP said he didn't want the cell editable at all, but this may help other people who stumble into this thread. Here is the on change function for my dropdown list that populates the cells value. 

change: function (e) {
                    var guid = kendo.guid();
                    $('' + guid + '').appendTo(container);
                    var dataItem = e.sender.dataItem();
                    options.model.set("FeeTypeID", dataItem.ID);
                }

 

Hope it helps!

 

[Alex Hajigeorgieva]

Hi, Austin,

Thank you very much for sharing.

However, I am wondering if the change event handler will not raise a JavaScript error as the dataItem() method requires a row as a parameter

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/dataitem

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Austin]

Hi Alex,

Looking at that documentation it would seem you are correct. However, we have had this in production for a couple of weeks now and I have yet to see an issue. In our internal testing, no errors were recorded. There are 'getElementById' warnings but I was experiencing those way before this logic with the dropdown and the functionality is not affected by the warnings. Thank you for the heads up though! I'll know where to start if something does arise.  

[Alex Hajigeorgieva]

Hello, Austin,

The change handler that you shared with is bound to the Kendo UI Grid DropDownList event, and I had mistakenly thought it is the change handler of the grid.

This is why there is no error in your application because the Kendo UI DropDownList returns the selected dataItem when there is no parameter (parameter is optional):

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/dataitem

Thank you for getting back to me to clear the confusion.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik