We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejGantt/ejTreeGrid column resize events

I need to save the width of the column to restore later.

Subscribe to column resize event: 
$("#GanttContainer .ejTreeGrid").ejTreeGrid({
columnResized: function (args) {                                       

Problem: Events do not always occur (see video).

Video: http://recordit.co/GshuNuxdz3
Playground: http://jsplayground.syncfusion.com/j3i1dbij

1 Reply

JD Jayakumar Duraisamy Syncfusion Team May 18, 2017 12:40 PM UTC

Hi RGV, 
Please find the response below. 
Query 1: I need to save the width of the column to restore later. 
Solution: In Gantt, we don’t have column resize client side event but we can achieve this by workaround to bind the ‘columnResized’ event to the TreeGrid instance and save the new column width value to the database.  
On loading of Gantt, we can update the saved columns width from the database instead of default width in the ‘load’ event. 
Please refer following code snippet, 
load: "load", 
                columnResized: "saveColumnWidth",                            
function load(args){ 
            var model = args.model, column = {}, columns = this.getColumns(), 
            columnsWidth = []; 
            columnsWidth = ej.isNullOrUndefined(JSON.parse(sessionStorage.getItem("columnsWidth"))) ? [] : JSON.parse(sessionStorage.getItem("columnsWidth")); 
            if (columnsWidth.length == 0) 
                columnsWidth = columns; 
            else { 
                for (i = 0; i < columnsWidth.length; i++) { 
                    var column = columnsWidth[i]; 
                    if (!ej.isNullOrUndefined(column.width)) { 
                        columns[i].width = column.width; 
            sessionStorage.setItem("columnsWidth", JSON.stringify(columnsWidth)); 
        function saveColumnWidth(args) { 
            var columnsWidth = JSON.parse(sessionStorage.getItem("columnsWidth")), 
                column = args.column, 
                columnIndex = model.columns.indexOf(column); 
            columnsWidth[columnIndex]["width"] = column.width; 
            sessionStorage.setItem("columnsWidth", JSON.stringify(columnsWidth));                         
We have prepared a sample for your reference. We have saved the new column width to the sessionStorage and reloaded these values with load event of Gantt control. 
Query 2: Problem: Events do not always occur 
Solution: We have analyzed your sample and video and the reported issue has been fixed in our latest volume 2 release of version  
Please refer following sample link, 
Please let us know if you need any other assistance. 
Jayakumar D 

Live Chat Icon For mobile
Up arrow icon