Export to Excel with bootstrap switch in one column

Export to Excel with bootstrap switch in one column

GearTheWorldGearTheWorld Posts: 11Questions: 2Answers: 0

One of the columns is a bootstrap switch, see screenshot. When I export to Excel it shows the 2 states of the switch as shown in the next screenshot

I tried a couple of things with columnDefs and render but I was unsuccessful. Any help would be greatly appreciated.

Answers

  • GearTheWorldGearTheWorld Posts: 11Questions: 2Answers: 0
    edited June 2021

    I tried this nice workaround but I still have an empty value in Excel
    What I do which works perfectly well by the way is to change the input for a span and then change the span back to an input after export. For the purpose, I changed the bootstrapSwitch for a normal input type checkbox

    TheTable.on('buttons-processing', function ( e, indicator, buttonApi, DataTable, node, config ) {
        if (indicator) {
            $(TableId).find('input:not(:hidden)').each(function() {
                $(this).parent().html("<span class='forexport'>" + this.value + "</span>");
            });
        } else {
            var RevertBackToInputTrue = "<input checked='checked' class='SmallerBootstrapCheckbox' data-val='true' data-val-required='The ToPay field is required.' id='Summaries_@@INDEX__ToPay' name='Summaries[@@INDEX].ToPay' type='checkbox' value='true'>"
            var RevertBackToInputfalse = "<input class='SmallerBootstrapCheckbox' data-val='false' data-val-required='The ToPay field is required.' id='Summaries_@@INDEX__ToPay' name='Summaries[@@INDEX].ToPay' type='checkbox' value='false'>"
    
            var Index = 0;
    
            $(TableId).find('span.forexport').each(function () {
                if ($(this).text() == "true") {
                    $(TableId).find('span').each(function () {
                        $(this).replaceWith(RevertBackToInputTrue.replace("@@INDEX", Index));
                    });
                }
                else {
                    $(TableId).find('span').each(function () {
                        $(this).replaceWith(RevertBackToInputfalse.replace("@@INDEX", Index));
                    });
                }
    
                Index++;
            });
        }
    });
    
  • GearTheWorldGearTheWorld Posts: 11Questions: 2Answers: 0

    In my last workaround I also tried to put the text directly in the TD without span and still the export is empty.

    I think that changing the table values or controls after initialization is not recognized by the export. I don't know, I'm just trying to figure out here. Maybe I'm missing a little piece somewhere to make it work

  • GearTheWorldGearTheWorld Posts: 11Questions: 2Answers: 0

    If I originally set the TD to a text like 'true' it works so why changing the input for a text at runtime isn't working. It must be something about export which doesn't take what is actually visible but something in memory?

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

    My suggestion is to use orthogonal data as shown in this example. I took one of my toggle examples and added buttons to show this:
    http://live.datatables.net/pesacoxe/130/edit

    If you still need help then please provide a test case we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

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

    As Kevin said, you need to use orthogonal data for that. See this example, it's doing something very similar.

    colin

Sign In or Register to comment.