Category / Section
How to get the information about the column visibility while clicking on column chooser menu in Gantt
1 min read
In the TreeGrid component, it is possible to get the information about the column visibility when clicking on the column chooser menu with some work around. Please refer the following code example for this.
<script type="text/javascript">
$(function () {
$("#GanttContainer").ejGantt({
dataSource: defaultGanttData,
allowSelection: true,
showColumnChooser: true,
//..
});
});
$(document).on('click', '.e-columnMenuListDiv', function (e) {
if ($(e.target).hasClass("e-chkbox-small") || $(e.target).closest(".e-chkbox-small").length > 0) {
var taskName = $(e.currentTarget).find("label").text()
if ($(e.target).hasClass("e-checkmark")) {
alert(taskName + " column is shown in TreeGrid") // In visible state
}
else {
alert(taskName + " column is hidden in TreeGrid") // In hidden state
}
}
else if (!$(e.target).hasClass("e-columnMenuListDiv") && e.target.innerHTML && !$(e.target).hasClass("e-chkbox-small")) {
var status = $(e.target.parentElement).find(".e-checkbox").attr("checked");
if (status == "checked") {
var statuscolumn = "hidden" //In hidden state
}
else
statuscolumn = "Shown" //In visible state
alert(e.target.innerHTML + " column is " + statuscolumn + " in TreeGrid")
}
});
</script>
Sample:
A sample to get the information about the column visibility in the TreeGrid is available here.
Note:
In the above sample, we have bound the click event for the column chooser menu for getting the information about the column visibility in the TreeGrid.
