Change color dropdown in render column HTML.

diogovelloz

Hello,
I have a column using the render function creating dropdowns, I would like to change the color of each option.

My code.

                      {
                        class: "details-control",
                        orderable: false,
                        render: function (data, type, row) {
                          if (type === "display") {
                            data =
                              '<td><select name="options" id="combo" class="editRow form-control" ><option class=""   value="Selecione"selected disabled="disabled" >' +
                              (data == 1 ?
                                "Concluído" :
                                data == 2 ?
                                "Cancelado" :
                                data == 3 ?
                                "Reagendado" :
                                data == 4 ?
                                "No local" :
                                data == 5 ?
                                "Ausente" :
                                "Selecione") +
                              "</option>" +
                              '<option value="1">Concluído</option>' +
                              '<option value="2">Cancelado</option>' +
                              '<option value="3">Reagendado</option>' +
                              '<option value="4">No local</option>' +
                              '<option value="5">Ausente</option></select></td>';
                          }

                          return data;
                        }
                      }

I tried using the bootstrap-select framework but it seems that the datatables did not recognize it.

kthorngren

Your above code doesn't seem to use the bootstrap-select library enabled. I haven't used that library so thought I would try it:
http://live.datatables.net/qayanufa/1/edit

In addition to adding the selectpicker class to the select I initialized the API in initCompete:

        initComplete: function () {
          $('.selectpicker').selectpicker({});
        }

Also added color to one of the options.

Kevin

diogovelloz

Thanks a lot, really what was missing was to initialize the selectpicker on initComplete.

Could you help me get the value of the option?

diogovelloz

I got it get value's, but a problem occured, selectpicket not initialize in the other pages in datatables, only de first page.

diogovelloz

My code att http://live.datatables.net/qayanufa/3/edit

kthorngren

Try using drawCallback instead.
http://live.datatables.net/qayanufa/4/edit

Kevin

diogovelloz

I'm trying to use this function Custom content, after reload the selected option does not create the span class, do you know help me? http://live.datatables.net/qayanufa/5/edit

https://silviomoreto.github.io/bootstrap-select/examples/#customize-options

Thanks for your help.

kthorngren

Are you talking about this part of your code?

    $("#example tbody").on("change", "tr .selectpicker", function (e) {
      
    vOption = this.options[e.target.selectedIndex].value;
    console.log(vOption);
    table.ajax.reload(null, false);

    
  } );

Is the question that when you select an item that after table.ajax.reload(null, false); the item is no longer selected? If your question is something else please be more specific.

Otherwise when you use ajax.reload() the table will be reset back to what is loaded. What are you wanting to happen? Why are you using ajax.relaod()?

Kevin

diogovelloz

My problem would be even with the CSS class of bootstrap-select, I'm using the custom-select function, which creates a background in the dropdown, after using ajax.reload () in my code the option gets selected the only problem is that this option had to stay with the background of another color and not default.!

https://silviomoreto.github.io/bootstrap-select/examples/#customize-options

kthorngren

Maybe I'm missing it but your example (http://live.datatables.net/qayanufa/5/edit) does not seem to select the "selected" option on reload. However the "Relish" option does stay green after the reload. So, Im confused by your problem description and the behavior in the test case. Maybe I'm doing something wrong in testing your code.

Kevin

diogovelloz

Ok, I'll try to be more specific. After ajax.reload () the select field would have to look like this image.

But after ajax.reload () the select ends up losing the bootstrap-select class, with the option selected but without the colored background.

kthorngren

I understand what you are saying. However when I run the test case you provided the selected option is not selected after the ajax.reload(). Does the test case show this issue? If so how do I recreate it?

Kevin

diogovelloz

In the test case it is not showing this problem, because the value of select is written to my db and then I retrieve the selected option.

kthorngren

Ok, that's the info I've been asking for. Then this is not really a Datatables issue but more an issue in how the select is being built. It looks like you are moving the label of the selected option to the top option but not applying the data-content attribute. I guess there are two options; One is to apply the data-content attribute to the first option or apply the selected attribute to the selected option.

The updated test case shows applying the selected option and the data-content attribute is working. Its hard coded for all rows. I'll leave it to you to write the code if you choose this option.

http://live.datatables.net/qayanufa/7/edit

Kevin

diogovelloz

Ok Kevin, I think I understand I'm going to work on this, but I believe the correct one would be the way you said it, thank you very much for your help.

diogovelloz

it seems that there is a conflict between the APIs:

https://github.com/silviomoreto/bootstrap-select/issues/1145

kthorngren

Sounds like the problem was that the issue occurred because the Bootstrap Dropdown.js was included twice causing two events to be bound to the select input. Not really a conflict but a matter of making sure you load Dropdown.js just once.

Are you experiencing issues with this solution?

Kevin

diogovelloz

I solved the problem, thanks again for the great help.
http://live.datatables.net/qayanufa/10/edit