Hide add and delete button in datatable

Forms
1

Hi! I'm trying to remove add and delete of the specific datatable in forms since there are multiple datatable added. Is it possible to do this? thank you!

2

Hello @Jes_Santimosa,

You can hide the Add new record button and the Delete column of the specific DataTable control using the code:

var dt = $(fd.control('DataTable1').$el);
//hides 'Add new record' button  
dt.find('.fd-datatable div.k-header.k-grid-toolbar').css('display', 'none')
//hides delete column
dt.find('.fd-datatable table tr th:last-child,.fd-datatable table tr td:last-child').css('display', 'none')
3

hello, second line doesn't work. tried to separate them but still didn't work.

//hides delete column
dt.find('.fd-datatable table tr th:last-child').css('display', 'none');
dt.find('.fd-datatable table tr td:last-child').css('display', 'none');

4

@Jes_Santimosa,

Where is the delete column displayed? In the first or the last row?

image

To hide the delete column that is displayed in the firs row use this code:

dt.find('.fd-datatable table tr th:first-child,.fd-datatable table tr td:first-child').css('display', 'none');

in the last column use this one:

dt.find('.fd-datatable table tr th:last-child,.fd-datatable table tr td:last-child').css('display', 'none')
5

Thanks it worked.
However, Is this possible to be removed?
image

6

@Jes_Santimosa,

Try adding this code after the code I've shared to get rid of this blanks:

var columns = dt.find('col');
var headerColumn = columns.length/2 - 1
var contentColumn = columns.length - 1
$(columns[headerColumn]).attr("style","width:0px");
$(columns[contentColumn]).attr("style","width:0px");
7

Hello, I tried this and it only works sometimes. I have to put a delay timer code for it to work.

1 Like
8

Hi @Jes_Santimosa
Most probably the control is not "ready".
Try your code wrap in this

fd.control("yourDataTableInternalName")
  .ready()
  .then((el) => {
// Your code here
});

Steo