Adjusting number of columns on the fly

Org Chart
1

This seems like a useful function to change the number of display columns in compact mode, but I infer by it's behavior that it can't easily be used to adjust things on-the-fly as I am trying to do here, since it has to call the function early in the rendering process.

// Adjust max number of columns
renderer.customFunctions.getNumberOfColumns =
function(rootItemData, defaultColumnsNumber){

// Works good
if (rootItemData["Title"] !== "John Doe") {
return 10;
}

// Not working because this method runs too early to interpret the variable
if (window.chartExpanded) {
return 12;
}

return defaultColumnsNumber;
}

2

Hello @rdant,

Could you please share the part of the code that initializes the window.chartExpanded variable?

3

The default columns in compact layout is set to 6 and the visible tree levels is set to 2. Per one of your examples, I have also created an Expand All button to display the 3rd level. When that happens, I want to change the columns display to 12 to display the expanded chart as one big tree. I think either this is not possible to do on the fly when the Expand button is clicked, or maybe I need to re-render the entire chart somehow.

// Not sure if global variable is needed here, but was worried about scope.
window.isChartExpanded = false;
var expColButton = $('');
var msIcon = expColButton.find(".ms-Icon");

// Adjust max number of columns
renderer.customFunctions.getNumberOfColumns =
function(rootItemData, defaultColumnsNumber){

// Not working because this method runs too soon?
if (window.isChartExpanded) {
console.log('expand columns');
return 12;
}

return defaultColumnsNumber;
}

renderer.onInitialLoadingFinished(
function(){

// Add Button to expand/collapse nodes with initial text

    //Appending the button to the right control zone
    $("#RightControlZone").prepend(expColButton);

    //Configuring a function on a button click
    expColButton.click(function () {

        // If it's not expanded
        if (!window.isChartExpanded) {
            renderer.showLoadingPanel();
            showCollapseButton();  
          
            //Expanding a specified number of nodes
            renderer.expandNodeLevels(2, function(){      
                renderer.hideLoadingPanel();
            });
        // If it's expanded
        } else {
            renderer.showLoadingPanel();          
            showExpandButton();                  
            
            renderer.collapseAllNodes(function () {                            
                renderer.hideLoadingPanel();
            });
        }
    });

}
);

4

Hi @rdant,

Thank you for the provided code. Could you please tell me at what point you call the custom getNumberOfColumns function?

I would recommend that you also check if the value of the window.isChartExpanded variable gets changed when the expand/collapse button is clicked.

5

I'm confused by your question "at what point do you call the custom function". That function, I believe, is called from inside the Plumsail library to determine how many columns to render.

I checked that window.isChartExpanded is changed, however, getNumberOfColumns() is not called by the library after executing expandNodeLevels(). Perhaps, that is only called on a full render of the chart.

Not sure I can do what I want to do, which is to draw a different number of columns based on a dynamic condition (number of subordinates, expanded chart, etc).

6

Maybe this is the answer... to adjust the columns on the fly, redefine the function on the fly:

   // Adjust max number of columns narrow
   if (userId === '001234') {
      renderer.customFunctions.getNumberOfColumns =
        function(rootItemData, defaultColumnsNumber) { return 6; }         
   }

That seems to work, sometimes. It seems to depend on the particular action. I can do this on a search click action, but not on an expandNodeLevels action.

7

Hello @rdant,

Unfortunately, neither I nor our developer was able to find a workaround for this. getNumberOfColumns is an initial function and cannot change the value dynamically without refreshing the structure.

8

Thank you for checking. I figured it to be an "early" initialization function.

9

Well, it feels like a hack, but I did get it to work. So, now, when user clicks to expand the chart, it increases the columns on the fly to put all direct reports on one row. Some code is not shown here. Added a setTimeout between the function redefinition and the drilldown function. Also, added a check for the actual root node, which does not have a value for nodeData.id.

// On Expand click...
adjustNumberOfColumns(12);
renderer.expandNodeLevels(2, function(){ renderer.hideLoadingPanel(); });                    
				  
function adjustNumberOfColumns (numColumns) {

    // Get current chart root node
 	var itemId = renderer.context.orgChartControl.rootNode._latestValue.nodeData.Id;	
				
	renderer.customFunctions.getNumberOfColumns = function(rootItemData, defaultColumnsNumber) { return numColumns; }	

    // Force custom function to eval	
	renderer.drillDown(itemId); 
}