excelHtml5 Export - one column is a dropdown list, only want selected value

puffster

JSFiddle: https://jsfiddle.net/owfvdany/

` render: {
_: function (data, type, row) {
if (currentStudent == row.personID)
return '<span class="sameStudent">' + data + '</span>';
else {
//Cycle through the list of transaction plans and get the selected one
var buttonText;
$.each(lapd, function (idx, element) {
if (parseInt(row.transitionPlanID) == parseInt(lapd[idx].actionPlanID)) {
buttonText = element.description;
return false;
}
});

                                //Create div and button elements
                                var $div = $("<div></div>", {
                                    "data-toggle": "tooltip",
                                    "data-html": "true",
                                    "data-placement": "top",
                                    "title": row.transitionPlanModifiedBy + "<br />" + row.transitionPlanModifiedDate
                                });
                                var $button = $("<button></button>", {
                                    "type": "button",
                                    "id": "btnAP" + row.personID,
                                    "class": "btn btn-sm dropdown-toggle mt-1 " + row.transitionButtonColor,
                                    "data-toggle": "dropdown",
                                });

                                //append the selected transition type text to the button name
                                //and append the button to the div element
                                $button.append(buttonText);
                                $div.append($button);

                                //create a ul element
                                var $ul = $("<ul></ul>", {
                                    "id": "ddActionPlans",
                                    "class": "dropdown-menu csr_lnk",
                                    "style": "max-height: 400px; width: auto; overflow-y: auto"
                                })

                                //append ul element to the div element
                                $div.append($ul);

                                //loop through each transition plan and for each:
                                //create a li element and append to the ul element
                                //create an input checkbox element and append to the li element
                                //if the transition plan is the one selected by the user mark it as checked
                                //create a label for the input element and append it to the li element
                                $.each(lapd, function (idx, element) {
                                    var $li = $("<li></li>", {
                                    });
                                    $ul.append($li);

                                    var $input = $("<input></input>", {
                                        "type": "radio",
                                        "class": "d-inline ddActionPlan",
                                        "id": "ddActionPlan" + row.personID + "-" + element.actionPlanID,
                                        "name": "radAP" + row.personID,
                                        "value": element.actionPlanID,
                                        "onclick": "ddUserSelectedActionPlanChanged(" + row.personID + ", this.value);" 
                                    });

                                    if (parseInt(lapd[idx].actionPlanID) == parseInt(row.transitionPlanID)) {
                                        $input.attr("checked", "checked");
                                    }

                                    $li.append($input);

                                    var $label = $("<label></label>", {
                                        "for": "ddActionPlan" + row.personID + "-" + element.actionPlanID,
                                        "class": "d-inline input small dropdownLabel_NBormalFont"
                                    });

                                    $label.append(element.description);
                                    $li.append($label);
                                });

                                return $div.prop("outerHTML");
                            }
                        },

                        sp: function (data, type, row) {
                            return data;
                        }
                    }

`

I've created a table and one of the columns is a dropdown list with the selected value stored as the name of the button (using bootstrap 4). My JSFiddle above is a not-so-good working model of what's happening when I export to excel -- but you can still see what the issue is. The code I'm displaying above is how I'm actually creating the button and dropdown list in the Render function of datatables. Basically for that column it's not selecting the selected value, but rather selecting every value that could be selected from the drowndown list. Is there a way that the only thing that gets exported is the selected value?

colin

You would use orthogonal data for that. This example here is similar - it's using columns.render to convert the checkbox value - you would do the same for the select,

Colin