how to create in datatable dropdown menu in column on button click?

how to create in datatable dropdown menu in column on button click?

eyal_hbeyal_hb Posts: 98Questions: 31Answers: 0

i want to have any row button and when i clicked the button its will show me drop-down menu with other function/buttons.

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @eyal_hb ,

    You would use columns.render to create it in the cell. The it could be a <ul> element or anything else.

    Cheers,

    Colin

  • eyal_hbeyal_hb Posts: 98Questions: 31Answers: 0

    hey Colin i tried this

     {
    
    mData": "Hotel.Official_Image_Id",
    "orderable": false,
    "render": function (data, type, row, meta) {
    return '<div class="dropdown"><button class=btn btn-primary dropdown-toggle id = "dLabel" type = "button" data - toggle="dropdown" aria - haspopup="true" aria - expanded="false">Dropdown trigger'
                               + '<span class="caret" ></span ></button ><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
                               '<li><a href="#">Action</a></li><li><a href="#">Another action</a></li></ul> </div>'
                        },
    },
    

    the button display but when i click nothing happens, if i try this in html body its work

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @eyal_hb ,

    Would you be able to link to a page that's showing this failure, please, or create a test case?

    Cheers,

    Colin

  • mohamedalthafmohamedalthaf Posts: 2Questions: 0Answers: 0

    I am having same issue.

    I am using react-bootstrap and it was all working until i upgraded my node v from 9.4.0 to v12.18.13 , now this isn't working. Exact problem what @eyal_hb mentioned. Please advise.

    Thanks,
    Yasar

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

    @mohamedalthaf As Colin asked please provide a link to your page or a test case showing the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • mohamedalthafmohamedalthaf Posts: 2Questions: 0Answers: 0

    Its little bit complicated to create a test case with my code base. So to make it clear,
    when i had node version 9.4.0 and use babel 6.x everything works. when i upgrade to 12.x and babel 7.x things are breaking.. button click is not bring the dropdown. could you please let me know if i need to upgrade specific packages to make it work..

    Problem versions:
    Node v12.18.3
    datatables.net v1.10.25
    electron: 11.0.3
    babel: 7.0.0

    working versions:
    node v9.4.0
    datatables.net v1.10.25
    electron: 1.6.2
    babel: 6.0.0

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    As I'm sure you'll appreciate it's hard to fix something you can't debug - we really need to see this, so please link to your page if you can't create a test case,

    Colin

Sign In or Register to comment.