Custom pop up editor in kendo grid

[Sag]

Hi,

 

I am trying to use custom pop editor in kendo grid ( https://dojo.telerik.com/EvacaKAW ). What I am trying to do is, I need the grid to be editable and the column "text" must be a read-only column. If I try to click on that cell, it is converting as a normal text box hiding the edit button, instead I want to make the input field readonly and I want to enter the text only by using Edit button. I tried to make the column as "editable:false", but it is not allowing me to set the data to the column when I close the editing window.

How can I achieve this by making column (or div inside column) as read-only?

Appreciate the suggestion on this. Thanks in advance.

[Viktor Tachev]

Hi Sag,

In order to prevent the users from editing the column, but keep the underlying field editable I suggest using the columns.editable option. It can be set to a function that can determine whether the field will be editable. In the current scenario the function can always return false. 

The modified example below illustrates the approach:

• https://dojo.telerik.com/EvacaKAW/5

Regards,
Viktor Tachev
Progress Telerik

[Sag]

Hi Viktor,

 

Thank you so much for your suggestion. I didn't know that it works this way.

I have another question though. Is there any way that user can undo his changes on the window. Please consider the below scenario:

1. User click on Edit button.

2. Window appears.

3. User enter his own text.

4. User changes his mind not to make any changes and wishes to cancel the changes.

In this scenario, is there any way that user can discard the changes?Is there any action on the window that closes the window and discards the changes?

[Viktor Tachev]

Hello Sag,

In order to revert changes made by the users you can call the cancelChanges method. For implementing the scenario I would suggest adding a button to the window template. When the user clicks the button that will call cancelChanges() for the Grid. 

$("#cancelButton").on("click", function(e) {
    $("#grid").getKendoGrid().cancelChanges();
});

In a real world application the data will probably come from a remote service. Thus, you can also include a save button in the edit window that will call the DataSource sync() method. 


Regards,
Viktor Tachev
Progress Telerik

[Sag]

Hi Viktor,

Thanks for the reply. As you mentioned, cancelling the changes works well when I want to revert the changes, but it also cancels all the changes that I did to the data in the grid (using the grid in BATCH editing mode). So that cannot be an ideal solution. I want to cancel the changes just for that cell.

Please let me know if I am not clear on this.

[Viktor Tachev]

Hello Sag,

Canceling the changes only for the cell would require keeping the initial cell value. When the users click the cancel button set the value for the editor to the initial value and trigger the change event so the underlying model is updated. 

The updated dojo below illustrates the approach.

• https://dojo.telerik.com/EvacaKAW/8

Regards,
Viktor Tachev
Progress Telerik

[Sag]

Hi Viktor,

 

Thanks for the reply and the suggestion.

Regards,

Sag