\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

Defines how the diagram behaves when the user attempts to edit shape content, create new connections, edit connection labels and so on.

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.

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 saved 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 selectable options.

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 shape options.

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 the Sass-based themes.The supported values are: * "sass" - special value, see notes * "black" * "blueopal" * "bootstrap" * "default" * "highcontrast" * "metro" * "metroblack" * "moonlight" * "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 zoom level 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 zoom max level in percentages.

Returns

\Kendo\Dataviz\UI\Diagram

Parameters

$value float

Example

<?php
$diagram = new \Kendo\Dataviz\UI\Diagram('Diagram');
$diagram->zoomMax(1);
?>

zoomMin

The zoom min level in percentages.

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) { }'));
?>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy