i want to create family tree website using mindfusion orgchart structure.. but i want to use custom fonts in it. i used

@font-face {
font-family: 'Kimberley Bl';
src: url('C:/users/admin/fonts/terafont-chandan.ttf') format('truetype');
}

and then use it in the *.js with the diagram objects:

this.getCell(1, 1).setFont(
new Font("Kimberley Bl", 3.5, true /*bold*/, false /*italic*/));
this.getCell(2, 1).setFont(
new Font("Kimberley Bl", 3.5, true /*bold*/, false /*italic*/));

but i cant understand in which css file i should write css code for custom font... Please Reply

i need some more help i used i used 'this.getCell(0, 0).setTextAlignment(Alignment.Center);' for set node text center of the node but whats happen right side margin automatically incressed and some cherectors hided in left side text crosed border of node and result is some text cut out... for exaple if text is 'AKSHAY'A and K is hided loft side and only 'SHAY' displaying and still not in center...please reply early

i attached image i used indian language 'Gujarati' Font when i write code for set text center 'this.getCell(0, 0).setTextAlignment(Alignment.Center);' some text cut from left side i want to text should be wraped when word contain to many charecters please reply..

Hi,

The OrgChartEditor sample uses custom nodes, which inherit from the TableNode class, which represents a table-like grid with a header.

The text is clipped, because there are two more columns inside the node and they occupy the space to the right. If you don't need the grid capabilities of TableNode, you may achieve better results by using ShapeNode. Alternatively, you can redefine the tables to have only one column, or make use of the columnSpan property.

In your project, in the OrgChartNode constructor, initialize the table with only one column:

// set up table cells
this.redimTable(1, 4); 

or you can use the columnCount property (you will need v3.2):

this.setColumnCount(1); 

Regards,
Lyubo

Hi,

This sample is made with a (3,4), that's why you may be getting errors, which prevent the nodes to draw correctly.

In your example I changed: this.redimTable(3, 4); to this.redimTable(1, 4); and commented out the call to the configureCellsmethod (as it assumes (3,4) grid): //this.configureCells(); and the text is now centered in the nodes.

I would again suggest you look into using ShapeNodes, as it appears that you don't need the functionality that TableNodes provide.

Regards,
Lyubo

Hey Lyudo Please reply i need it so much..

The text is in center now but but texts are cut offs in long word names please help me I am eating for your reply

Hi,

As I said earlier, the OrgChart sample assumes table nodes with (3,4) cells grid and will be difficult to customize if you don't need the table features.

To use ShapeNodes, call the diagram Factory's createShapeNode method, set the text, then call risizeToFitText. Add the links between nodes and then arrange the diagram with the TreeLayout.

Information and tutorials on how to use JsDiagram can be found in the chm file supplied with the package and online at https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm - namely in the Programming Interface Overview and Tutorials topics.

A simple example on how to add shape nodes to the diagram and arrange them using the tree layout:

var Alignment = MindFusion.Diagramming.Alignment;
var FitSize = MindFusion.Diagramming.FitSize;
var Rect = MindFusion.Drawing.Rect;

//...

var shapeNode1 = diagram.getFactory().createShapeNode(new Rect(0, 0, 10, 5));
shapeNode1.setText("Hello from ShapeNode 1!");
shapeNode1.resizeToFitText(FitSize.Ratio);

var shapeNode2 = diagram.getFactory().createShapeNode(new Rect(0, 0, 10, 5));
shapeNode2.setText("Hello from ShapeNode 2!");
shapeNode2.resizeToFitText(FitSize.Ratio);

var shapeNode3 = diagram.getFactory().createShapeNode(new Rect(0, 0, 10, 5));
shapeNode3.setText("Hello from ShapeNode 3!");
shapeNode3.resizeToFitText(FitSize.Ratio);

diagram.getFactory().createDiagramLink(shapeNode1, shapeNode2);
diagram.getFactory().createDiagramLink(shapeNode1, shapeNode3);

var layout = new MindFusion.Graphs.TreeLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
layout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;

diagram.arrange(layout); 

Regards,
Lyubo