Events

The OrgChart exposes a variety of events that you can handle and further customize the behavior of the UI component.

For a complete example on the OrgChart events, refer to the OrgChart Events Demo.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Razor

    @(Html.Kendo().OrgChart()
      .Name("orgchart")
      .Events(e => e
            .Select("onSelect")
            .Change("onChange")
      )
    )

Razor

    <kendo-orgchart name="orgchart"
                    on-select="onSelect"
                    on-change="onChange">
    </kendo-orgchart>
    

JavaScript

    <script>
        function onSelect(e) {
            // Handle the "select" event.
        }

        function onChange(e) {
            // Handle the "change" event.
        }
    </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Razor

    @(Html.Kendo().OrgChart()
      .Name("orgchart")
      .Events(e => e
            .Select(@<text>
                function() {
                    // Handle the select event inline.
                }
            </text>)
            .Change(@<text>
                function() {
                    // Handle the change event inline.
                }
            </text>)
      )
    )

Razor

    <kendo-orgchart name="orgchart"
                    on-select="function() {
                        // Handle the select event inline.
                    }"
                    on-change="function() {
                        // Handle the change event inline.
                    }">
    </kendo-orgchart>
    

Next Steps

• Using the OrgChart Events (Demo)

See Also

• Using the API of the OrgChart for ASP.NET Core (Demo)
• Client-Side API of the OrgChart
• Server-Side API of the OrgChart