JavaScript/jQuery Diagram - gridSize
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
Feedback