blocking column for edition

Question

My screen is access control , so I have a prior record in my database (SQL Server) with access times, these times are called steps .

In this screen I'm having problem, there is a form to register the shifts ( days will be allowed to log into the system ) .

In this form I have fields : where do I set a name, a description and a step , after setting I click the add button that will send the data to the grid side .

In this grid I have added the name of the step , day of the week and a button to remove.

My problem is this , my checkbox should be editable , but the name of my step not.

Follows the códiogo of my grid:

$("#myGrid").kendoGrid({
columns: [
     { field: "Etapa", title: dialetos.lblEtapa, attributes: { style: "text-align: left" }, width: 130, visible: true },
     { field: "Domingo", title: dialetos.lblDomingo, template: "<input id='checkbox' #= Domingo ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 85 },
     { field: "Segunda", title: dialetos.lblSegunda, template: "<input id='checkbox' #= Segunda ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
     { field: "Terca", title: dialetos.lblTerca, template: "<input id='checkbox' #= Terca ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 75 },
     { field: "Quarta", title: dialetos.lblQuarta, template: "<input id='checkbox' #= Quarta ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
     { field: "Quinta", title: dialetos.lblQuinta, template: "<input id='checkbox' #= Quinta ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
     { field: "Sexta", title: dialetos.lblSexta, template: "<input id='checkbox' #= Sexta ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 75 },
     { field: "Sabado", title: dialetos.lblSabado, template: "<input id='checkbox' #= Sabado ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
     { title: "Remover", template: "<span class='k-button' id='btnRemover' onClick='RemoveRowSelecionada()' >Remover</span> ", attributes: { style: "text-align: left" }, width: 85 }
],
groupable: false,
sortable: true,
editable: true,
filterable: true,
pageable: true,
selectable: "row",
height: 180,
dataSource: vmObjeto.dias,
batch: true,        
change: function (e) {

    },
  }).data("kendoGrid");

Thanks!

Answer 1

The answer that worked for me :

$(function () {
  $('#myGrid').on('click', '#chkDomingo', (function () {
  var checked = $(this).is(':checked');
  var grid = $('#myGrid').data().kendoGrid;
  var dataItem = grid.dataItem($(this).closest('tr'));
  dataItem.set('Domingo', checked);
}));

$('#myGrid').on('click', '#chkSegunda', (function () {
  var checked = $(this).is(':checked');
  var grid = $('#myGrid').data().kendoGrid;
  var dataItem = grid.dataItem($(this).closest('tr'));
  dataItem.set('Segunda', checked);
 }));

$('#myGrid').on('click', '#chkTerca', (function () {
var checked = $(this).is(':checked');
var grid = $('#myGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Terca', checked);
}));

$('#myGrid').on('click', '#chkQuarta', (function () {
var checked = $(this).is(':checked');
var grid = $('#myGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Quarta', checked);
}));

$('#myGrid').on('click', '#chkQuinta', (function () {
var checked = $(this).is(':checked');
var grid = $('#myGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Quinta', checked);
}));

$('#myGrid').on('click', '#chkSexta', (function () {
var checked = $(this).is(':checked');
var grid = $('#myGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Sexta', checked);
}));

$('#myGrid').on('click', '#chkSabado', (function () {
var checked = $(this).is(':checked');
var grid = $('#myGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Sabado', checked);
}));
});

$("#myGrid").kendoGrid({
columns: [
 { field: "Etapa", title: dialetos.lblEtapa, attributes: { style: "text-align: left" },      width: 130, visible: true },
 { field: "Domingo", title: dialetos.lblDomingo, template: "<input id='checkbox' #= Domingo ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 85 },
 { field: "Segunda", title: dialetos.lblSegunda, template: "<input id='checkbox' #= Segunda ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
 { field: "Terca", title: dialetos.lblTerca, template: "<input id='checkbox' #= Terca ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 75 },
 { field: "Quarta", title: dialetos.lblQuarta, template: "<input id='checkbox' #= Quarta ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
 { field: "Quinta", title: dialetos.lblQuinta, template: "<input id='checkbox' #= Quinta ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
 { field: "Sexta", title: dialetos.lblSexta, template: "<input id='checkbox' #= Sexta ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 75 },
 { field: "Sabado", title: dialetos.lblSabado, template: "<input id='checkbox' #= Sabado ? checked='checked' : '' # type='checkbox' class='checkbox' ' />", attributes: { style: "text-align: left" }, width: 80 },
 { title: "Remover", template: "<span class='k-button' id='btnRemover' onClick='RemoveRowSelecionada()' >Remover</span> ", attributes: { style: "text-align: left" }, width: 85 }
],
 groupable: false,
 sortable: true,
 editable: true,
 filterable: true,
 pageable: true,
 selectable: "row",
 height: 180,
 dataSource: vmObjeto.dias,
 batch: true,        
 change: function (e) {},
  }).data("kendoGrid");