editable.resizeBoolean|Object(default: true)
Defines the look-and-feel of the shape resizing handles.
Example - styling the resizing handles
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
layout: {
type: "tree"
},
shapes: [{
id: "1",
content: {
text: "Monday"
}
}, {
id: "2",
content: {
text: "Tuesday"
}
}],
connections: [{
from: "1",
to: "2"
}],
editable: {
resize: {
handles: {
fill: {
color: "red",
opacity: 0.5
},
height: 10,
width: 10,
stroke: {
color:"blue",
width:1,
dashType:"dot"
},
hover: {
fill: {
color:"green",
opcaity:.8
},
stroke: {
color:"purple",
width:5
}
}
}
}
}
});
</script>editable.resize.handlesObject
Specifies the settings of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
],
editable: {
resize: {
handles: {
fill: { color: "#ff6358" },
stroke: { color: "#333" },
width: 8,
height: 8
}
}
}
});
</script>editable.resize.handles.fillString|Object
Specifies the fill settings of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
fill: {
color: "yellow",
opacity: 0.8
}
}
}
}
});
</script>editable.resize.handles.fill.colorString
Specifies the fill color of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
fill: {
color: "orange"
}
}
}
}
});
</script>editable.resize.handles.fill.opacityNumber(default: 1)
Specifies the fill opacity of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
fill: {
color: "blue",
opacity: 0.5
}
}
}
}
});
</script>editable.resize.handles.heightNumber
Specifies the height of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
height: 12
}
}
}
});
</script>editable.resize.handles.hoverObject
Specifies the settings of the resizing handles on hovering over them. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
fill: {
color: "red",
opacity: 0.8
},
stroke: {
color: "blue",
width: 2
}
}
}
}
}
});
</script>editable.resize.handles.hover.fillString|Object
Specifies the fill settings on hovering over the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
fill: {
color: "green",
opacity: 0.7
}
}
}
}
}
});
</script>editable.resize.handles.hover.fill.colorString
Specifies the fill color on hovering over the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
fill: {
color: "orange"
}
}
}
}
}
});
</script>editable.resize.handles.hover.fill.opacityNumber(default: 1)
Specifies the fill opacity on hovering over the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
fill: {
color: "red",
opacity: 0.6
}
}
}
}
}
});
</script>editable.resize.handles.hover.strokeObject
Specifies the stroke on hovering over the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
stroke: {
color: "purple",
width: 3,
dashType: "dot"
}
}
}
}
}
});
</script>editable.resize.handles.hover.stroke.colorString
Specifies the stroke color on hovering over the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
stroke: {
color: "green"
}
}
}
}
}
});
</script>editable.resize.handles.hover.stroke.dashTypeString
Specifies the stroke dash type on hovering over the resizing handles. See the editable.resize configuration for an example.
The following dash types are supported:
- "dash" - A line that consists of dashes
- "dashDot" - A line that consists of a repeating pattern of dash-dot
- "dot" - A line that consists of dots
- "longDash" - A line that consists of a repeating pattern of long-dash
- "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
- "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
- "solid" - A solid line
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
stroke: {
color: "red",
dashType: "longDash"
}
}
}
}
}
});
</script>editable.resize.handles.hover.stroke.widthNumber
Specifies the stroke color on hovering over the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
hover: {
stroke: {
color: "blue",
width: 4
}
}
}
}
}
});
</script>editable.resize.handles.strokeObject
Specifies the stroke of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
stroke: {
color: "orange",
width: 2,
dashType: "dash"
}
}
}
}
});
</script>editable.resize.handles.stroke.colorString
Specifies the stroke color of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
stroke: {
color: "purple"
}
}
}
}
});
</script>editable.resize.handles.stroke.dashTypeString
Specifies the stroke dash type of the resizing handles. See the editable.resize configuration for an example.
The following dash types are supported:
- "dash" - A line that consists of dashes
- "dashDot" - A line that consists of a repeating pattern of dash-dot
- "dot" - A line that consists of dots
- "longDash" - A line that consists of a repeating pattern of long-dash
- "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
- "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
- "solid" - A solid line
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
stroke: {
color: "green",
dashType: "dashDot"
}
}
}
}
});
</script>editable.resize.handles.stroke.widthNumber
Specifies the stroke thickness of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
stroke: {
color: "red",
width: 3
}
}
}
}
});
</script>editable.resize.handles.widthNumber
Specifies the width of the resizing handles. See the editable.resize configuration for an example.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Draggable Shape"
},
x: 100,
y: 100
}
],
editable: {
resize: {
handles: {
width: 10
}
}
}
});
</script>