\Kendo\Dataviz\UI\Diagram
A PHP wrapper for Kendo UI Diagram.
Inherits from \Kendo\UI\Widget.
Usage
To use Diagram in a PHP page instantiate a new instance, configure it via the available
configuration methods and output it by echo-ing the result of the render method.
Using Kendo Diagram
<?php
// Create a new instance of Diagram and specify its id
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
// Configure it
$diagram->autoBind(true)
// Output it
echo $diagram->render();
?>
Methods
addEvent
Fired when the user adds new shape or connection.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the add event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->addEvent('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onAdd(e) {
// handle the add event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->addEvent('onAdd');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->addEvent(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
autoBind
If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value boolean
Example
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->autoBind(true);
?>
cancel
Fired when the user clicks the "cancel" button in the popup window in case the item was added via a toolbar. For additional information check the cancel event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->cancel('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onCancel(e) {
// handle the cancel event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->cancel('onCancel');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->cancel(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
change
Fired when an item is added or removed to/from the diagram. For additional information check the change event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->change('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onChange(e) {
// handle the change event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->change('onChange');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->change(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
click
Fired when the user clicks on a shape or a connection. For additional information check the click event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->click('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onClick(e) {
// handle the click event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->click('onClick');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->click(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
connectionDefaults
Defines the defaults of the connections. Whenever a connection is created, the specified connectionDefaults will be used and merged with the (optional) configuration passed through the connection creation method.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value \Kendo\Dataviz\UI\DiagramConnectionDefaults|array
Example - using \Kendo\Dataviz\UI\DiagramConnectionDefaults
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$connectionDefaults = new \Kendo\Dataviz\UI\DiagramConnectionDefaults();
$editable = true;
$connectionDefaults->editable($editable);
$diagram->connectionDefaults($connectionDefaults);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$editable = true;
$diagram->connectionDefaults(array('editable' => $editable));
?>
addConnection
Adds one or more DiagramConnection to the Diagram.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value[, $value2, ...] \Kendo\Dataviz\UI\DiagramConnection|array
Example - using \Kendo\Dataviz\UI\DiagramConnection
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$connection = new \Kendo\Dataviz\UI\DiagramConnection();
$editable = true;
$connection->editable($editable);
$diagram->addConnection($connection);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$editable = true;
$diagram->addConnection(array('editable' => $editable));
?>
Example - adding more than one DiagramConnection
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$first = new \Kendo\Dataviz\UI\DiagramConnection();
$second = new \Kendo\Dataviz\UI\DiagramConnection();
$diagram->addConnection($first, $second);
?>
connectionsDataSource
Defines the data source of the connections.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value |array|
Example - using
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->connectionsDataSource(new ());
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->connectionsDataSource(array());
?>
dataBound
Fired when the widget is bound to data from dataDource and connectionsDataSource.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the dataBound event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dataBound('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onDataBound(e) {
// handle the dataBound event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dataBound('onDataBound');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dataBound(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
dataSource
Sets the data source of the widget.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value \Kendo\Data\DataSource|array
Example - using \Kendo\Data\DataSource
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$dataSource = new \Kendo\Data\DataSource();
$diagram->dataSource($dataSource);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$schema = new \Kendo\Data\DataSourceSchema();
$diagram->dataSource(array('schema' => $schema));
?>
drag
Fired when dragging shapes or connection. For additional information check the drag event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->drag('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onDrag(e) {
// handle the drag event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->drag('onDrag');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->drag(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
dragEnd
Fired after finishing dragging shapes or connection. For additional information check the dragEnd event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dragEnd('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onDragEnd(e) {
// handle the dragEnd event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dragEnd('onDragEnd');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dragEnd(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
dragStart
Fired before starting dragging shapes or connection. For additional information check the dragStart event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dragStart('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onDragStart(e) {
// handle the dragStart event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dragStart('onDragStart');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->dragStart(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
edit
Fired when the user edits a shape or connection. For additional information check the edit event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->edit('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onEdit(e) {
// handle the edit event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->edit('onEdit');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->edit(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
editable
A set of settings to configure the Diagram behavior when the user attempts to: edit, delete or create shapes and connections.; drag shapes.; resize shapes. or rotate shapes..
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value boolean|\Kendo\Dataviz\UI\DiagramEditable|array
Example - using boolean
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->editable(true);
?>
Example - using \Kendo\Dataviz\UI\DiagramEditable
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$editable = new \Kendo\Dataviz\UI\DiagramEditable();
$drag = true;
$editable->drag($drag);
$diagram->editable($editable);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$drag = true;
$diagram->editable(array('drag' => $drag));
?>
itemBoundsChange
Fired when the location or size of a shape are changed. For additional information check the itemBoundsChange event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->itemBoundsChange('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onItemBoundsChange(e) {
// handle the itemBoundsChange event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->itemBoundsChange('onItemBoundsChange');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->itemBoundsChange(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
itemRotate
Fired when a shape is rotated. For additional information check the itemRotate event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->itemRotate('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onItemRotate(e) {
// handle the itemRotate event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->itemRotate('onItemRotate');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->itemRotate(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
layout
The layout of a diagram consists in arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user. It aims at giving a more direct insight in the information contained within the diagram and its relational structure.On a technical level, layout consists of a multitude of algorithms and optimizations: analysis of the relational structure (loops, multi-edge occurrence...); connectedness of the diagram and the splitting into disconnected components; crossings of connections or bends and length of links. and various ad-hoc calculations which depend on the type of layout. The criteria on which an algorithm is based vary but the common denominator is: a clean separation of connected components (subgraphs); an orderly organization of the shapes in such a way that siblings are close to another, i.e. a tight packing of shapes which belong together (parent of child relationship) or a minimum of connection crossings. Kendo diagram includes three of the most used layout algorithms which should cover most of your layout needs - tree layout, force-directed layout and layered layout. Please, check the type property for more details regarding each type.The generic way to apply a layout is by calling the layout() method on the diagram. The method has a single parameter options. It is an object, which can contain parameters which are specific to the layout as well as parameters customizing the global grid layout. Parameters which apply to other layout algorithms can be included but are overlooked if not applicable to the chose layout type. This means that you can define a set of parameters which cover all possible layout types and simply pass it in the method whatever the layout define in the first parameter.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value \Kendo\Dataviz\UI\DiagramLayout|array
Example - using \Kendo\Dataviz\UI\DiagramLayout
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$layout = new \Kendo\Dataviz\UI\DiagramLayout();
$endRadialAngle = 1;
$layout->endRadialAngle($endRadialAngle);
$diagram->layout($layout);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$endRadialAngle = 1;
$diagram->layout(array('endRadialAngle' => $endRadialAngle));
?>
mouseEnter
Fired when the mouse enters a shape or a connection.Will not fire for disabled items. For additional information check the mouseEnter event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->mouseEnter('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onMouseEnter(e) {
// handle the mouseEnter event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->mouseEnter('onMouseEnter');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->mouseEnter(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
mouseLeave
Fired when the mouse leaves a shape or a connection.Will not fire for disabled items. For additional information check the mouseLeave event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->mouseLeave('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onMouseLeave(e) {
// handle the mouseLeave event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->mouseLeave('onMouseLeave');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->mouseLeave(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
pan
Fired when the user pans the diagram. For additional information check the pan event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->pan('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onPan(e) {
// handle the pan event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->pan('onPan');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->pan(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
pannable
Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value boolean|\Kendo\Dataviz\UI\DiagramPannable|array
Example - using boolean
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->pannable(true);
?>
Example - using \Kendo\Dataviz\UI\DiagramPannable
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$pannable = new \Kendo\Dataviz\UI\DiagramPannable();
$key = 'value';
$pannable->key($key);
$diagram->pannable($pannable);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$key = 'value';
$diagram->pannable(array('key' => $key));
?>
Configures the export settings for the saveAsPDF method.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value \Kendo\Dataviz\UI\DiagramPdf|array
Example - using \Kendo\Dataviz\UI\DiagramPdf
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$pdf = new \Kendo\Dataviz\UI\DiagramPdf();
$author = 'value';
$pdf->author($author);
$diagram->pdf($pdf);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$author = 'value';
$diagram->pdf(array('author' => $author));
?>
remove
Fired when the user removes a shape or connection. For additional information check the remove event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->remove('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onRemove(e) {
// handle the remove event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->remove('onRemove');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->remove(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
save
Fired when the user saves a shape or a connection. For additional information check the save event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->save('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onSave(e) {
// handle the save event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->save('onSave');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->save(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
select
Fired when the user selects one or more items. For additional information check the select event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->select('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onSelect(e) {
// handle the select event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->select('onSelect');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->select(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
selectable
Defines the Diagram selection options.By default, you can select shapes in the Diagram in one of two ways: Clicking a single shape to select it and deselect any previously selected shapes. or Holding the Ctrl key while clicking multiple shapes to select them and any other shapes between them.. Using the selectable configuration, you can enable single selection only, enable selection by drawing a rectangular area with the mouse around shapes in the canvas, or disable selection altogether.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value boolean|\Kendo\Dataviz\UI\DiagramSelectable|array
Example - using boolean
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->selectable(true);
?>
Example - using \Kendo\Dataviz\UI\DiagramSelectable
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$selectable = new \Kendo\Dataviz\UI\DiagramSelectable();
$key = 'value';
$selectable->key($key);
$diagram->selectable($selectable);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$key = 'value';
$diagram->selectable(array('key' => $key));
?>
shapeDefaults
Defines the default options that will be applied to all shapes in the Diagram.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value \Kendo\Dataviz\UI\DiagramShapeDefaults|array
Example - using \Kendo\Dataviz\UI\DiagramShapeDefaults
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$shapeDefaults = new \Kendo\Dataviz\UI\DiagramShapeDefaults();
$editable = true;
$shapeDefaults->editable($editable);
$diagram->shapeDefaults($shapeDefaults);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$editable = true;
$diagram->shapeDefaults(array('editable' => $editable));
?>
addShape
Adds one or more DiagramShape to the Diagram.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value[, $value2, ...] \Kendo\Dataviz\UI\DiagramShape|array
Example - using \Kendo\Dataviz\UI\DiagramShape
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$shape = new \Kendo\Dataviz\UI\DiagramShape();
$editable = true;
$shape->editable($editable);
$diagram->addShape($shape);
?>
Example - using array
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$editable = true;
$diagram->addShape(array('editable' => $editable));
?>
Example - adding more than one DiagramShape
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$first = new \Kendo\Dataviz\UI\DiagramShape();
$second = new \Kendo\Dataviz\UI\DiagramShape();
$diagram->addShape($first, $second);
?>
template
The template which renders the content of the shape when bound to a dataSource. The names you can use in the template correspond to the properties used in the dataSource. For an example, refer to the dataSource topic below.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->template('value');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->template(new \Kendo\JavaScriptFunction('function() { }'));
?>
theme
The diagram theme. This can be either a built-in theme or "sass". When set to "sass" the diagram will read the variables from a Sass-based theme.The supported values are: * "sass" - works only when a custom Sass theme is loaded in the page * "black" * "blueopal" * "bootstrap" * "bootstrap-v4" - works only with the Bootstrap-v4 Sass theme loaded in the page * "default" * "default-v2" - works only with the Default-v2 Sass theme loaded in the page * "fiori" * "flat" * "highcontrast" * "material" * "materialBlack" * "metro" * "metroblack" * "moonlight" * "nova" * "office365" * "silver" * "uniform"
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string
Example
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->theme('value');
?>
toolBarClick
Fired when the user clicks an item in the toolbar. For additional information check the toolBarClick event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->toolBarClick('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onToolBarClick(e) {
// handle the toolBarClick event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->toolBarClick('onToolBarClick');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->toolBarClick(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
zoom
The default zoom level of the Diagram in percentages.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value float
Example
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoom(1);
?>
zoomEnd
Fired when the user changes the diagram zoom level. For additional information check the zoomEnd event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomEnd('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onZoomEnd(e) {
// handle the zoomEnd event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomEnd('onZoomEnd');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomEnd(new \Kendo\JavaScriptFunction('function(e) { }'));
?>
zoomMax
The maximum zoom level in percentages. The user will not be allowed to zoom in past this level.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value float
Example
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomMax(1);
?>
zoomMin
The minimum zoom level in percentages. The user will not be allowed to zoom out past this level. You can see an example in zoomMax.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value float
Example
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomMin(1);
?>
zoomRate
The zoom step when using the mouse-wheel to zoom in or out.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value float
Example
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomRate(1);
?>
zoomStart
Fired when the user starts changing the diagram zoom level. For additional information check the zoomStart event documentation.
Returns
\Kendo\Dataviz\UI\Diagram
Parameters
$value string|\Kendo\JavaScriptFunction
Example - using string which defines a JavaScript function
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomStart('function(e) { }');
?>
Example - using string which defines a JavaScript name
<script>
function onZoomStart(e) {
// handle the zoomStart event.
}
</script>
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomStart('onZoomStart');
?>
Example - using \Kendo\JavaScriptFunction
<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomStart(new \Kendo\JavaScriptFunction('function(e) { }'));
?>