I have a kendo grid with three columns. I need to hide or show columns without using the columnMenu configuration. I have created a layout window that has 3 checkboxes to select the columns. On clicking the apply button I am able to hide the columns, but after I reopen the layout window the previous checkbox selections do not persist. How do I fix this issue?
var filterLayoutWindow = '<div id="filterLayoutWindow"></div>';
var layoutWindow = function () {
var html = '<div id="ColReset"><div><h3 class= "fa fa-columns" align="center"> Columns</h3></div><br>' +
'<div id="checkbox-container"><div><label for="check1">Timestamp</label><input type="checkbox" id="check1"></div>' +
'<div><label for="check2">Logs</label><input type="checkbox" id="check2"></div>' +
'<div><label for="check3">Message</label><input type="checkbox" id="check3"></div></div>';
html += '<br><div align="right" class="k-edit-buttons k-state-default">';
html += '<button class="k-button k-button-icontext k-primary k-apply-layout apply"><span class="k-icon k-apply"></span>Apply</button>';
html += '<button class="k-button k-button-icontext k-cancel-layout cancel"><span class="k-icon k-cancel"></span>Cancel</button></div></div>';
var container = $(html).appendTo(filterLayoutWindow).kendoWindow({
modal: true,
resizable: false,
draggable: true,
title: "Layout",
width: "40%",
height: "40%",
visible: false,
close: function () {
this.destroy();
}
});
container.data("kendoWindow").center().open();
container.on("click", ".k-apply-layout", function (e) {
layoutFilters();
container.data("kendoWindow").destroy();
});
container.on("click", ".k-cancel-layout", function (e) {
container.data("kendoWindow").destroy();
});
}
function layoutFilters() {
var checkbox1 = document.getElementById("check1");
var checkbox2 = document.getElementById("check2");
var checkbox3 = document.getElementById("check3");
if (checkbox1.checked == true)
lGrid.hideColumn(1);
else
lGrid.showColumn(1);
if (checkbox2.checked == true)
lGrid.hideColumn(2);
else
lGrid.showColumn(2);
if (checkbox3.checked == true)
lGrid.hideColumn(3);
else
lGrid.showColumn(3);
}
Aucun commentaire:
Enregistrer un commentaire