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.
Unfortunately, activation email could not send to your email. Please try again.

ejGantt/ejTreeGrid column resize events

Thread ID:

Created:

Updated:

Platform:

Replies:

130504 May 16,2017 06:36 AM May 18,2017 08:40 AM JavaScript 1
loading
Tags: ejGantt
RGV
Asked On May 16, 2017 06:36 AM

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

Subscribe to column resize event: 
$("#GanttContainer .ejTreeGrid").ejTreeGrid({
columnResized: function (args) {                                       
console.log(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 08:40 AM

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, 
$("#GanttContainer").ejGantt({ 
//… 
load: "load", 
}); 
$("#ejTreeGridGanttContainer").ejTreeGrid({ 
                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 15.2.0.40.  
Please refer following sample link, 
Please let us know if you need any other assistance. 
Regards, 
Jayakumar D 


CONFIRMATION

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.

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.

;