How to disable specific fields in a dynamically generated grid

[Daniel]

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;
    }

[Stefan]

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