How to make a textbox readonly based on the condition in edit pop up in iggrid

Hi Team,

In grid, while updating any record – primary key value should not be updated as per coding standards. So, we want to make a column readonly only when we are trying to update. We want the column value to be editable when we try to add a new record in the grid.

By the properties of ignite grid, if we mention “readonly: true”, it would be applicable for all scenarios. But we want it only in the case of updating and not while adding a new record.

Add should be like this

And while editing, code value – “8” should be made readonly.

Can you help with the solution for this problem?

Hello Tapas,

Thank you for posting in our community.

What I can suggest for achieving your requirement is handling editRowStarting event. In this event, via the ui argument, we can determine whether it is fired form regular editing or from row adding. ui.rowAdding is true in cases that the edit mode is triggered for adding new row and it is false when the event is triggered from row editing. Having this in mind, we can set the readOnly property for the field of your choice based on the rowAdding value. For example:

					editRowStarting: function(evt, ui){ 
						var var grid = $("#grid1"), colSettings = $("#grid1").igGridUpdating("option", "columnSettings");
						colSettings[0].readOnly =  !ui.rowAdding;
						grid.igGridUpdating("option", "columnSettings", colSettings );
						grid.igGrid("dataBind");
				},

After setting the modified columnSettings collection the dataBind method should be called in order to make sure the new settings are applied.

Attached you will find a small sample for your reference. In this small application "Product Name" column is editable only when adding new row. Please test this sample on your side and let me know whether it helps you achieve your requirement.

Looking forward to hearing from you.

0005.igGridReadOnlyRowAdding.zip

Hi Team,

any update on the same.

Hello,

Above I have suggested a way to achieve your requirement. Please let me know if my previous post is not visible for you.

Looking forward to hearing from you.

Hi Vasya,

When we are trying the same thing in our code, we are getting error in lob.js file while click on the row for editing.

And also I do not want the use of angular.min.js file . Is it possible to achieve the same without angular ?

Hello Tapas,

I have run Vasya's sample and everything works as expected without errors. Can you provide me with a small isolated sample reproducing your issue?

You can safely remove the angular.min.js file.