Disable a Select option in Datatable

Disable a Select option in Datatable

auto_reportsauto_reports Posts: 14Questions: 5Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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_reportsauto_reports Posts: 14Questions: 5Answers: 0

    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).

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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_reportsauto_reports Posts: 14Questions: 5Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

  • auto_reportsauto_reports Posts: 14Questions: 5Answers: 0

    thanks a lot! Seems to work.

Sign In or Register to comment.