Search results

Text limit for labels at initial rendering and in runtime

14 Oct 2021 / 2 minutes to read

You can limit the text for the labels at initial rendering time and dynamically.

Step1

To limit the text for the label at initial rendering, it can be limited with the help of the text’s substring method as shown as follows.

Copied to clipboard
let nodes = [{
    id:"node1",
    // ...
    // ...
    // label added to the node
    annotations: [{ id: 'label1', content: setLimit("SyncfusionSyncfusionSyncfusion", 10)}]
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    }]

function setLimit(text, limit) {
    let len;
    // Getting the length of the string
    len = text.length;
    // Checking whether it mets limiting criteria or not
    if (len > limit)
    // Removing the characters beyond the limit.
        text = text.substring(0, limit);
    return text;
}

Refer to the following code sample for limiting the text for labels.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'>
        </ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin} from '@syncfusion/ej2-vue-diagrams';
    Vue.use(DiagramPlugin);
    let nodes = [{
    id:"node1",
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // label added to the node
    annotations: [{ id: 'label1', content: setLimit("SyncfusionSyncfusionSyncfusion", 10)}],
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    }]

function setLimit(text, limit) {
    let len;
    len = text.length;
    if (len > limit)
        text = text.substring(0, limit);
    return text;
}

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    },
}
</script>
<style>
   #diagram_editBox {
         max-width: 10px;
         }
</style>

To perform the text limiting for labels dynamically, set the [max-width] attribute for the text box ID which appears at the time of editing the labels text.