Enable checkbox only if row was edited

[Flavius]

Hi,

I am using Kendo Grid and I have created a checkbox that is read-only as default. The checkbox will only enable after user has edited the row.

I am developing this function in onChange by using "$('.chkbx').prop('disabled', false);" to remove the disabled attribute of checkbox but it will enable all the checkbox in the grid instead of edited row.

I have retrieved grid, recno and data item of current row in onChange. May I know is that possible to remove the disabled attribute of checkbox by using these information I retrieved? Or even better if could based on condition of dirty flag, so that if user has removed the value they changed, the checkbox can revert back to disabled. 

Thanks in advance.

Here is my code:

model: {
            id: "recno",
            fields: {
                DEupdateFlag: { type: "boolean" },
                recno: { editable: false, validation: { required: true } },
                custname: { editable: true}
            }
        }


columns: [
            {
                template: '<input type="checkbox" disabled="disabled" #= DEupdateFlag ? \'checked="checked"\' : "" #      class="chkbx" />',
                width: 70,
                headerTemplate: '<b>Action</b>',
                headerAttributes: { style: "text-align:center" },
                attributes: {
                    "class": "table-cell",
                    style: "text-align: center"
                }
            },
            { field: "recno", title: "Recno", width: 66, filterable: true },
            { field: "custname", title: "Customer Name", width: 85, editor: TextEditor, filterable: true }
        ]

function onChange{e){
    if (e.action == "itemchange") {
        var grid = $("#mainGrid").data("kendoGrid");
        var recno = e.items[0].recno;
        var dataItem = grid.dataSource.get(recno);

        $('.chkbx').prop('disabled', false);
        }
}

[Neli]

Hello Flavius,

I am not sure about the exact Grid configuration at your end, so I will take as an example the default incell editing. When a cell is edited the save event will be triggered. In the save event handler, you could find the edited row. Then, you could search for the checkbox and enable or disable it. For convenience, you could add a custom class to the template. For example:

 template: '<input type="checkbox" class="custom" disabled="disabled" #= UnitPrice > 10 ? \'checked="checked"\' : "" #      class="chkbx" />',

This way it will be easier to search for the checkbox element. 

Below is a sample code for the save event handler:

 

save: function(e){              
      	$(e.container).closest("tr").find(".custom").removeAttr("disabled")
 },

 

Here is a Dojo example where the described above is implemented. 

If the provided suggestion does not fit your scenario, could you please send us more information about the exact Grid configuration at your end? This way we could have a better idea and provide appropriate assistance.

I hope the provided information will be helpful. Let me know in case you have additional questions on the matter.

 

Regards,
Neli
Progress Telerik

[Flavius]

Thanks! It helps a lot!

Another question, in my grid model above, I put editable and validation in my fields. However, I would like to make the value of editable become dynamic. Which will return true or false based on a LIST. That list is actually contain the primary key columns name. I don't really want the user could edit the value of primary key columns. So I wish to do something like: 

if (custname.indexOf(LIST) !== -1)
    return false;
}

 

I have tried this method inside editable but it didn't work. Is it possible to do something like this? Or is there other method to do so?

Thank you.

[Neli]

Hi Flavius,

I am not sure I understand the issue correctly. However, in case you need to set a different value to the model, based on another field, or some condition, you could use the edit event. In the edit event handler, you could use the model set option when needed.

 edit: function(e){            		
              if(e.model.ProductID > 7 ){
              		e.model.set("ProductName", "true")
              }
    },

In the Dojo linked here, when the ProductName column is edited, if the corresponding ProductID is greater than 7, the value of ProductName will be set to "true". 

In case this is not the exact case and I have misunderstood the issue, please elaborate a little bit more on the exacts scenario, so I could provide appropriate assistance.

I hope the above will help.

Regards,
Neli
Progress Telerik