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
close icon

Dynamically set the width of node according to the length of annotation(text inside node)

We need to dynamically set the width of node as per text size(annotation).

We tried by setting the maxWidth and minWidth (please refer below code snippet) but it didn't help.

obj.shape = { type: 'Basic'shape: 'Rectangle' };
     obj.style = {
        fill: '#0f8fe4',
        strokeWidth: 0

      // node text css object
      obj.minWidth = 100;
      obj.maxWidth = 250;
      obj.height = 2;
      obj.annotations = [
          content: nodeData.name,
          offset: { x: 0.5y: 0 },
          verticalAlignment: 'Bottom',
          style: {
            textOverflow: 'Ellipsis',
            textWrapping: 'NoWrap'
          minWidth: 110,
          maxWidth: 235

Also please refer attached screenshot where the size of 1st node is fine but in 2nd node as length of text is less in that case we want to decrease size of that node as per inner text.

It would be great help if there is any other solution for this requirement.

1 Reply

BM Balasubramanian Manikandan Syncfusion Team January 5, 2023 02:09 PM UTC

We have achieved your requirement using textEdit event. This event triggers on completion of text editing. We have set the annotation width to the node width in this event.  Refer to the below code snippet and sample.

Code Snippet :

  public textEdit(args: ITextEditEventArgs) {

    this.node = this.diagram.selectedItems.nodes[0];

    setTimeout(() => {

      let id: string = this.node.id;

      let node: NodeModel = this.node;

      let annotation: string = node.annotations[0].id;

      let bounds: any = document

        .getElementById(node.id + '_' + annotation)


      if (bounds.width > node.width) {

        node.width = bounds.width + 15;


      } else if (bounds.width < 50) {

        node.width = 50;


      } else {

        node.width = bounds.width + 15;



    }, 50);





Live Chat Icon For mobile
Up arrow icon