React Diagram - gridSize

Specifies the grid pitch.

Selector: GridSize
Type:

Number

|

Object

When the showGrid property is set to true, the Diagram UI component displays grid lines that help users align diagram elements. Use the gridSize property to specify the grid pitch.

The units property specifies the measurement unit.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        viewUnits: "cm",
        units: "cm",
        gridSize: {
            value: 2,
            items: [1, 2, 3]
        },
        // or
        // gridSize: 2,
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram" viewUnits="cm" units="cm">
    <dxo-grid-size 
        [value]="2" 
        [items]='[1, 2, 3]'>
    </dxo-grid-size>
</dx-diagram>
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
    viewUnits="cm"
>
    <DxGridSize
    :value="2"
    :items="['1', '2', '3']"
    />
</DxDiagram>
</template>
React
App.js
class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} units="cm" viewUnits="cm">
                <GridSize value={2} items={[1, 2, 3]} />
            </Diagram>
        );
    }
}
See Also

items

An array that specifies the Grid Size combobox items on Properties panel.

Type:

Array<Number>

value

Specifies the grid's pitch.

Type:

Number

Raised Events: onOptionChanged