Disable a Select option in Datatable
Disable a Select option in Datatable
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
This question has accepted answers - jump to:
Answers
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 thetable
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.This is standard HTML stuff. See if this SO thread helps.
Kevin
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).
I changed your select options from using
disabled
todisabled='disabled'
and it seems to work. I added a CSS for the selects to set their width:Which seems to work. See the updated example:
https://jsfiddle.net/3osd6ekv/
Kevin
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
?Looks like we posted at the same time. See my previous comment.
Kevin
thanks a lot! Seems to work.