Editable Checkbox problem

[David]

Hey Guys! First of all, sorry for my English :P

I have a problem my grid where I have a custom column (checkbox selection and selectAll). 

In my columns definition I used the property editable: false, but when my Grid is rendered and I make a click on the column td, my checkbox turn in a input text.

Anyone can help me with this? 

 

this.columns =
                [
                    {
                        id: 1,
                        field: "selected",
                        title: "<input id='selectAll', type='checkbox', class='check-box', ng-click='brand_ctrl.selectAll()' />&nbsp;&nbsp;",
                        template: "<input type='checkbox' ng-model='dataItem.checked' />",
                        sortable: false, width: 37, locked: true, lockable: false, columnMenu: false, editable: false, reorderable: false, filterable: false, "menu": false,  selectable: false
                    },
                    { id: 2, field: 'name', title: 'Name', width: "226px",locked: true, lockable: false}
                ]

this.kendogrid = {
                    dataSource: (new kendo.data.DataSource(this.dataSource)),
                    selectable: "row", sortable: true, pageable: true, scrollable: true, editable: true, batch: true, resizable: true, reorderable: true,
                    toolbar: this.toolbar,
                    columnMenu: true,
                    columns: this.columns
} 

[Alexander Valchev]

Hi David,

There is no such configuration option as editable: false for the column. There are two ways to prevent the editing for a Grid column - the first one is to declare the field as editable: false in the schema.model.fields definition.

• http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-editable

This however will prevent the editing of the field at all (e.g. even through code).
The alternative approach is to remote the columns.field option - in this way you will have a template column (without field) which will prevent the Grid from initializing an editor for it. In this scenario the field value can be changed through code (or binding).

I believe that in your case the 2nd approach will do the job.

{
    id: 1,
    //field: "selected",
    title: "<input id='selectAll', type='checkbox', class='check-box', ng-click='brand_ctrl.selectAll()' />  ",
    template: "<input type='checkbox' ng-model='dataItem.checked' />",
    //sortable: false,
    width: 37,
    locked: true,
    lockable: false,
    columnMenu: false,
    //editable: false,
    reorderable: false,
    //filterable: false,
    "menu": false,
    selectable: false
},

Removing the field will also disable the sorting and filtering so you may omit those configuration options as well.

I hope this information will help.

Regards,
Alexander Valchev
Telerik

 

 

[David]

Hi Alexander, thank you so much!  Works perfectly here =)

[Stefan]

Is it possible to control this programmatically?

 

As in the whole grid becomes can be made editable when an edit button is clicked?

[Alexander Valchev]

Hi Stefan,

To control this programatically you have to modify the Grid options after the widget is initialized. This is possible through the setOptions method. Keep in mind that this method will automatically re-create the Grid widget.

Regards,
Alexander Valchev
Telerik

 

 

[Stefan]

Hi Alexander, so there's no way for not to lose data of the current grid when i click the edit button?

[Alexander Valchev]

Hi Stefan,

What do you mean by "lose data"? If there are any pending changes you may sync them through the saveChanges method.

Regards,
Alexander Valchev
Telerik