I currently have a wijmo grid where a list of columns with checkbox appears after binding is done. I would like to add the checkboxes to a pop up so that it is visible only on click. The following code is what i have to hide and unhide the columns on checked and unchecked conditions.
self.hideCols = function () {
var columns = $('#Grid').wijgrid("option", "columns"),
listContainer = $("#columnsList"),
checkBox, isChecked;
$.each(columns, function (index, col) {
isChecked = (col.visible)
? "checked = 'checked'"
: "";
checkBox = $("<label><input type='checkbox' " + isChecked + " />" + col.headerText + "</label>");
listContainer.append(checkBox);
checkBox.click(function (e) {
columns[index].visible = $(this).children("input")[0].checked;
$('#Grid').wijgrid("doRefresh");
})
I got it. Just had to create a pop up using HTML and include the columnlist inside the
<div id="dialog" data-bind="wijdialog: {disabled: disabled, autoOpen: autoOpen, draggable: draggable, modal: modal, resizable: resizable }" title="Uncheck to Hide Columns"> <table id="columnsList"></table> </div>