mercredi 15 janvier 2020

Hide/Show columns in Kendo Grid using a kendo window which contains checkboxes

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">&nbsp;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