All docs
V21.1
21.2
21.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
Box
Map
Vue

pageSize

Specifies a size of pages.

Type:

Object

The units property specifies the page's measurement units.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        units: "cm",
        pageSize: {
            width: 10,
            height: 10,
        },
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram" units="cm">
    <dxo-page-size [width]="10" [height]="10">
    </dxo-page-size>
</dx-diagram>
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
>
    <DxPageSize
    :width="10"
    :height="10"
    />
</DxDiagram>
</template>
React
App.js
class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} units="cm">
                <PageSize width={10} height={10} />
            </Diagram>
        );
    }
}
NOTE
  • If you call the import method, it applies the imported page settings and the pageSize property is ignored.

  • Page settings are stored in a diagram model. The pageSize property is not in effect if the model is read-only (the readOnly property is set to true).

height

Specifies the page height.

Type:

Number

items[]

An array that specifies the page size items in the Page Size combobox on Properties Panel.

Type:

Array<Object>

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        viewUnits: "cm",
        units: "cm",
        pageSize: {
            width: 21,
            height: 29.7,
            items: [
                { text: "A4 (21cm x 29.7cm)", width: 21, height: 29.7 },{ text: "A3 (29.7cm x 42cm)", width: 29.7, height: 42 }
            ]
        },
    });
});
Angular
app.component.html
<dx-diagram #diagram id="diagram" units="cm" viewUnits="cm">
    <dxo-page-size 
        [width]="10" 
        [height]="10"
        [items]='[{ text: "A4 (21cm x 29.7cm)", width: 21, height: 29.7 },
                  { text: "A3 (29.7cm x 42cm)", width: 29.7, height: 42 }]'>
    </dxo-page-size>
</dx-diagram>
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
    viewUnits="cm"
>
    <DxPageSize
    :width="10"
    :height="10"
    :items="[{ text: 'A4 (21cm x 29.7cm)', width: 21, height: 29.7 },
                    { text: 'A3 (29.7cm x 42cm)', width: 29.7, height: 42 }]"
    />
</DxDiagram>
</template>
React
App.js
<Diagram id="diagram" ref={this.diagramRef} units="cm" viewUnits="cm">
<PageSize width={10} height={10} items={[{ text: 'A4 (21cm x 29.7cm)', width: 21, height: 29.7 },
    { text: 'A3 (29.7cm x 42cm)', width: 29.7, height: 42 }]}/>
</Diagram>

Diagram control data toolbox

width

Specifies the page width.

Type:

Number