I have scenario where I need to make few rows in the editable grid to be displayed as read-only based on some conditions. Is there any option to do this in igGrid?
For example when a row's particular column value is equal to 0 then do not allow to edit that row i.e. make that row readonly.
Thanks & Regards,
Manjunath M
Hello Manjunath,
Thank you for posting in our community.
What I can suggest for achieving your requirement is handling editRowStarting event of the igGridUpdating feature. This event is cancellable. This means false could be returned and the event is not going to be fired, respectively the row is not going to be editable. My suggestion is to check the vale responsible for editing and if it says that that row should not be edited cancel the event. For example:
{ name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, editRowStarting: function(evt, ui){ var rowID = ui.rowID, editColumnValue = $("#grid").igGrid("getCellValue",rowID, "DisableEdit" ); if(!editColumnValue){ return false; } } }
{ name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, editRowStarting: function(evt, ui){ var rowID = ui.rowID, editColumnValue = $("#grid").igGrid("getCellValue",rowID, "DisableEdit" ); if(!editColumnValue){ return false; } }
}
I am also attaching a working sample that illustrates my suggestion for your reference.
Please have a look at the provided sample and let me know if you need any further assistance with this matter.
Hi Vasya,
Thanks for quick reply on this, but it seems to be a work around. Is there inbuilt property to disable or make the row read-only?
And how can I hide the delete button for disabled row?
Thank you for getting back to me.
Currently we do not provide functionality to set rows as read only based on column values out of the box.
What I can say regarding your second requirement, to hide the delete icon based on the row values is that this is not supported out of the box as well. However, it could be achieved with a peculiar solution. Please keep in mind that this is a custom approach and if you decide to implement it you should carefully test all the aspect of your application.
My suggestion is to loop trough the grid data source and identify what are the rows that should have delete row disabled. Once they are identified you could apply particular styles for these rows in order to mark them as non-data and force the updating feature to skip them. In this case the delete icon is not going to be rendered. For example:
$("#grid").igGrid({ dataSource: data, primaryKey: "ID", renderCheckboxes : true, rendered: function(evt,ui){ var ds = $("#grid").data("igGrid").dataSource.data(), rowID, i; for(i = 0; i < ds.length; i++){ if(!ds[i].DisableEdit){ rowID = ds[i].ID; $("#grid").igGrid("rowById", rowID).addClass("ui-iggrid-groupedrow").attr("data-grouprow",true); } } }, . . . });
$("#grid").igGrid({ dataSource: data, primaryKey: "ID", renderCheckboxes : true, rendered: function(evt,ui){ var ds = $("#grid").data("igGrid").dataSource.data(), rowID, i; for(i = 0; i < ds.length; i++){ if(!ds[i].DisableEdit){ rowID = ds[i].ID; $("#grid").igGrid("rowById", rowID).addClass("ui-iggrid-groupedrow").attr("data-grouprow",true); } } },
.
});
I am also attaching my modified sample for your reference.
Please let me know if you need any further assistance with this matter.