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

How to disable specific fields in a dynamically generated grid

1 Answer 332 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 16 Mar 2017, 10:19 PM

Hi, 

I'm try disabled fiels in the dynamically grid, find a exaple in kendo demo but i can't goal.

This is exaple:

<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    {
      field: "salary",
          editable: function (dataItem) {
                return dataItem.name === "Jane";
      }
    }
  ],
  editable: true,
  dataSource: [ { name: "Jane", salary: 2000 }, { name: "Bill", salary: 2000 } ]
});
</script>

 

This is my code, in the generateColumns method i want to do that:

loadGridDetails(url: string, nameGrid: string) {
        $("#" + nameGrid).empty();
        $.getJSON(url)
            .done(data => {
                let columns = this.generateColumns(data[0]);
                $("#" + nameGrid).kendoGrid({
                    dataSource: {
                        data: data,
                        pageSize: 10,
                        dataValueField: "key",
                        dataTextField: "value"
                    },
                    scrollable: false,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    sortable: true,
                    navigatable: true,
                    columns: columns,
                    editable: true,
                    resizable: true
                });
 
                let grid = $("#" + nameGrid).data("kendoGrid");
                //grid.columns[1].attributes = { editable: false };                                            
 
                grid.hideColumn(grid.columns[0]);
                grid.hideColumn(grid.columns[2]);
 
            })
            .fail((jqxhr, textStatus, error) => {
                let err = textStatus + ", " + error;
                alert("Respuesta fallida: \n" + url + "\n " + err);
            });
    }
 
    generateColumns(dataItem) {
        let columns = [];
 
        for (var propt in dataItem) {
            debugger;
            columns.push({                
                field: propt
            });
        }
        columns.push({
            command: [{
                className: "btn-danger",
                name: "destroy",
                text: "Eliminar"               
            }], attributes: {
                "class": "text-center"
            }
        });
        return columns;
    }

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Mar 2017, 01:41 PM
Hello Daniel,

In this scenario, I can suggest checking if the field has to be edited in the generateColumns function and to add the editable property to the column if needed.

for (var propt in dataItem) {
 if(editableCheck){
  columns.push({               
   field: propt,
   editable: function (dataItem) {
    return false;
    }
   });
} else {
 columns.push({               
  field: propt
  });
 }
}

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or