\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));
?>

pdf

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. With versions prior to R1 2023 this can be either the respective LESS theme from the list below or "sass". When set to "sass" the diagram will read the variables from a Sass-based theme.Note: Since Q2 2024 release, the default value for the theme property is "sass" instead of "default". It is recommended to use "sass" with version Q2 2024 or later.The supported values are: * "sass" * "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) { }'));
?>
In this article
Not finding the help you need?