Hi,
Is there a way to hide the inline edit icon and header column programmatically? I have tried the codes below and was able to hide the header column but not the inline edit icon.
fd.control('SPDataTable1').ready().then(function(dt) {
//Hide inline edit column if status is not new or pending
if ((fd.field('Status').value != "1-New") &&
(fd.field('Status').value != "1-Pending")) {
$($(dt.$el).find('.k-header')[1]).hide();
$($(dt.$el).addClass("fd-command-cell");
}
});
The CSS class "fd-command-cell" does hide the inline edit icon but I need it to be available in certain status.
/* hide sp-datatable inline edit icon */
.fd-command-cell{
display: none!important;
}
Appreciate any help! Thank You.
Dear @COR6603,
Do you just want to hide the column? You can try the following JS code:
fd.spRendered(function() {
fd.control('SPDataTable1').ready().then(function(dt) {
var columns = dt.widget.columns
columns.splice(1,1);
dt.widget.setOptions({
columns: columns
});
});
});
Or do you want to set whole control into readonly mode? Then use the following:
fd.control('SPDataTable1').readonly = true;
I did try using the .readonly mode but couldn't get it to work. Then I realized yesterday that it needed to be under the fd.control('SPDataTable1').ready function in order for it to work.
It's working now. Thank you very much!
1 Like
Dear @COR6603,
You should also be able to set it to Readonly mode in properties in the editor without any JS code:
Yes, I could do that but in this instance the SP data table has to be available for editing when the parent form is a new submission. Then the SP data table has to be read-only after and based on certain status.
I was able to get it to work programmatically. Thank you very much Nikita!