How to set editable mode of a particular cell

[Joseph]

Hi,

I would like to set the editable mode to true for a particular Cell in Kendo UI MVC Grid.

I am able to set the editable of the Column. But I wan to set edit mode for a particular cell.

Can any body please help me in getting resolved this issue.

--Satish

[Dimiter Madjarov]

Hi Joseph,


This cannot be achieved through the Grid configuration, but could be manually implemented. For example you could bind to the edit event, which is fired when a cell is entering edit mode.

.Events(e => e.Edit("onEdit"))

access the current model in the event handler to check the condition and close the cell if it should not be edited.

function onEdit(e) {
    var dataItem = e.model;

    if (<condition>) {
        this.closeCell();
    }
}

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Joseph]

Hi,

Thanks for the response. But in my case based on Radio button Selection I need to Hide the Row.

Please find the more details below.

Details:

My View is Having two radio Buttons.

1. Enter in Units.

2. Enter in $.



My Grid Contains the following details:

Row with the Type.

Row with the Quantity Details

Row with the Unit Price Details.



One Scenario:

If Type value is Sales then I need to hide the Quantity Row.
If Type values is other than Sales Then I need to Show the Quantity Row.


Second Scenario:
If user Selects Enter in Units then I need to Set the Editable mode of the Quantity Cell.
If user Selects Enter in $ then i need to Set the Editable mode of the Unit Price Cell.

This is my actual Requirement. So, Can you please guide me on this.

Regards,
Satish.N

[Dimiter Madjarov]

Hello Joseph,


Thank you for providing the additional details. Nevertheless I am not sure how they relate to the initial question. Could you please elaborate further?

Additionally the Grid (and more specifically it's dataSource) does not support different types of data for the different rows. It supports CRUD operations for homogeneous items with the same fields. Are you referring to the Grid columns instead?

Let me know if you experience any specific Kendo UI related problems during the project implementation, so I could provide further assistance.

Regards,
Dimiter Madjarov
Telerik

 

 

[Joseph]

Hi,

Thanks for the response.

I would like to hide the Quantity Row Based on the Forecast Type.

Quantity, Unit Price, Amount, and Forecast Type are the values in the Forecast Type Column. If Column Cell value is Sales then I need to hide the Row which cell value is Quantity. If Forecast Type cell value is Other than Sales then i need to show the Row which cell value is Quantity.

Suppose if user selects Enter in Units Radio then I need to set the Edit mode of the Quantity, Unit Price, and Amount contain Cells.

Suppose if user selects Enter in $ then I need to set the editable mode of the Unit Price value Cell.

Please let me know if you need any more information.

Regards,
Satish.N

[Dimiter Madjarov]

Hi Joseph,


You could use the removeRow method of the Grid API in order to remove a row or jQuery hide method to hide it, based on the exact requirements in the current scenario.

As for the second question, as stated previously, setting the editable mode of a cell is not supported. You should use the approach from my first answer and close the cell if the condition is satisfied.

Regards,
Dimiter Madjarov
Telerik

 

 

[Hanh]

Hi!
I have the same issue like this post that i need to set editable mode for particular cell under conditions, I've try function onEdit() like you said above  but this function disable not only edit mode of this cell but also every cells of that cell's row. Can you please support me with this? 

[Tsvetomir]

Hi Hanh, 

The suggestion that is provided in the previous correspondence in this thread is rather outdated. If you would like to conditionally enable a certain cell for editing or not, I can recommend using the Editable option. Here is an example:

columns.Bound(x => x.LastName).Editable("isEditable");
 
function isEditable(e) {
     if(condition){
         return true;
     } else {
         return false;
     }
}

Give this a try and let me know how it works out for you.

 

Best regards,
Tsvetomir
Progress Telerik