Hide inline edit icon and header column programmatically

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;
}

image

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:
image

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!