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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejGantt/ejTreeGrid column resize events

Thread ID:





130504 May 16,2017 10:36 AM UTC May 18,2017 12:40 PM UTC JavaScript 1
Tags: ejGantt
Asked On May 16, 2017 10:36 AM UTC

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

Jayakumar Duraisamy [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon