New to Telerik UI for ASP.NET Core? Download free 30-day trial

Events

The Telerik UI DockManager for ASP.NET Core exposes multiple events that allow you to control and customize the behavior of the UI component.

For a complete example on basic DockManager events, refer to the demo on using the events of the DockManager.

Handling by Handler Name

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

    @(Html.Kendo().DockManager()
        .Name("dockmanager")
        .Events(events => events.Pin("onPin"))
        .RootPane(root =>
        {
            root.Id("root")
            .Panes(panes  => {
                panes.Add().Type(PaneType.Split).Panes(top => {
                     top.Add().Id("tools")
                        .Type(PaneType.Content)
                        .Title("Tools")
                        .Content("Content");
                });
            });
        })
    )

    <script>
        function onPin(e){
             // Handle the pin event.
        }
    </script>
    <kendo-dockmanager name="dockmanager" on-pin="onPin">
      <root-pane id="root" type="RootPaneType.Split">
          <panes>
              <pane id="nested" type="PaneType.Split">
                  <panes>
                      <pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
                  </panes>
              </pane>
          </panes>
      </root-pane>
    </kendo-dockmanager>

     <script>
        function onPin(e){
             // Handle the pin event.
        }
    </script>

Handling by Template Delegate

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

    @(Html.Kendo().DockManager()
        .Name("dockmanager")
        .Events(events => events.Pin(@<text>
                            function(e){
                                // Handle the Pin event.
                            }
                        </text>)
        )
        .RootPane(root =>
        {
            root.Id("root")
            .Panes(panes  => {
                panes.Add().Type(PaneType.Split).Panes(top => {
                     top.Add().Id("tools")
                        .Type(PaneType.Content)
                        .Title("Tools")
                        .Content("Content");
                });
            });
        })
    )
    <kendo-dockmanager name="dockmanager" 
                       on-pin="function(){
                            // Handle the pin event.
                       }">
      <root-pane id="root" type="RootPaneType.Split">
          <panes>
              <pane id="nested" type="PaneType.Split">
                  <panes>
                      <pane id="tools" type="PaneType.Content" title="Tools" content="Tools Content"></pane>
                  </panes>
              </pane>
          </panes>
      </root-pane>
    </kendo-dockmanager>

Next Steps

In this article