Change color dropdown in render column HTML.

Change color dropdown in render column HTML.

diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

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.

This question has accepted answers - jump to:

Answers

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

    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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

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

    Could you help me get the value of the option?

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓
  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

    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.

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

    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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

    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

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

    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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

    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.

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

    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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

    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.

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

    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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

    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.

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

    it seems that there is a conflict between the APIs:

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

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

    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

  • diogovellozdiogovelloz Posts: 11Questions: 1Answers: 0

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

This discussion has been closed.