This is a migrated thread and some comments may be shown as answers.

Editable Checkbox problem

6 Answers 370 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 11 Sep 2014, 06:23 PM
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





6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 15 Sep 2014, 09:13 AM
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.
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
David
Top achievements
Rank 1
answered on 15 Sep 2014, 01:05 PM
Hi Alexander, thank you so much!  Works perfectly here =)
0
Stefan
Top achievements
Rank 1
answered on 03 Dec 2015, 12:00 PM

Is it possible to control this programmatically?

 

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

0
Alexander Valchev
Telerik team
answered on 07 Dec 2015, 08:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Stefan
Top achievements
Rank 1
answered on 07 Dec 2015, 12:35 PM

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

0
Alexander Valchev
Telerik team
answered on 09 Dec 2015, 09:06 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
David
Top achievements
Rank 1
Stefan
Top achievements
Rank 1
Share this question
or