Disable a Select option in Datatable

auto_reports

Here is the link to the fiddle : https://jsfiddle.net/14abyk5v/1/
I have two queries :
1. How do make the columns with drop-down appear in proper width.As you can see, the column Tier is barely visible. Also, none of the columns have best fit as per the data.
2. In the dropdowns, how do I make the first option "Choose an option" disabled? I tried adding $select.find('option[value="'+data+'"]').prop('disabled', true); // this is not working but it does not work

kthorngren

How do make the columns with drop-down appear in proper width

One option is to us columns.width.

Datatables scans the column data to determine automatically set the width. You could add the class nowrap to the table tag which will cause the header to be on one line and affecting the column width. Or you can use CSS to set the width of the select inputs.

In the dropdowns, how do I make the first option "Choose an option" disabled?

This is standard HTML stuff. See if this SO thread helps.

Kevin

auto_reports

Thanks Kevin, I already tried nowrap but this does not the problem for Tier (as options texts are longer).
To disable the option, adding disabled within html does not seem to work (which works outside DataTable).

kthorngren

I changed your select options from using disabled to disabled='disabled' and it seems to work. I added a CSS for the selects to set their width:

select {
  width: 150px;
}

Which seems to work. See the updated example:
https://jsfiddle.net/3osd6ekv/

Kevin

auto_reports

Ok, it seems that disabled option is working now.
I only need the solution to adjust column widths. Is there any other solution other that setting columns.width?

kthorngren

Looks like we posted at the same time. See my previous comment.

Kevin

auto_reports

thanks a lot! Seems to work.