Category / Section
How to integrate other controls with Splitter?
2 mins read
Integrate Splitter with other controls
You can integrate other controls inside the Splitter panels. Validation errors may occur in the ASPX page on adding other controls in SplitPane
On adding Syncfusion controls inside the SplitPane the ASPX page complains saying “Element Unknown” and does not show up any compilation error. To get rid of this validation error in the ASPX page on adding other Syncfusion controls to SplitPane, you have to add the controls under the PaneContent element. PaneContent is defined inside the SplitPane element, to support adding other controls to the Splitter window without any warning or error messages.
ASPX
<ej:Splitter ID="Splitter1" runat="server" Width="850px"> <ej:SplitPane ID="Split1" PaneSize="400"> <PaneContent> <ej:TreeView ID="treeView" runat="server" Height="300px" Width="300px"> <Nodes> <ej:TreeViewNode Text="ASP.NET MVC" Expanded="true"> <Nodes> <ej:TreeViewNode Text="Essential Grid"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Schedule"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Tools"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Chart"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Diagram"></ej:TreeViewNode> </Nodes> </ej:TreeViewNode> <ej:TreeViewNode Text="Silverlight"> <Nodes> <ej:TreeViewNode Text="Essential Tools"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Gauge"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Chart"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Grid"></ej:TreeViewNode> </Nodes> </ej:TreeViewNode> <ej:TreeViewNode Text="WPF"> <Nodes> <ej:TreeViewNode Text="Essential Grid"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Schedule"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Tools"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Chart"></ej:TreeViewNode> <ej:TreeViewNode Text="Essential Diagram"></ej:TreeViewNode> </Nodes> </ej:TreeViewNode> </Nodes> </ej:TreeView> </PaneContent> </ej:SplitPane> <ej:SplitPane ID="split2" PaneSize="200"> <PaneContent> <ej:Tab ID="Tab" runat="server" Width="500"> <Items> <ej:TabItem Id="tools" Text="Essential Tools"> <ContentSection> Essential Tools is an collection of user interface components used to create interactive ASP.NET MVC applications. Essential Tools can be used to create robust and high performance ASP.NET MVC application interfaces using Editors (including Masked-Edit, Numeric and Percentage text box) and much more. </ContentSection> </ej:TabItem> <ej:TabItem Id="chart" Text="Essential Chart"> <ContentSection> Essential Chart is a business-oriented charting component. It offers an innovative data object model that makes it easy to populate the chart with any kind of data source. Essential Chart features an advanced styles architecture that makes complex multi-level formatting very easy. </ContentSection> </ej:TabItem> <ej:TabItem Id="grid" Text="Essential Grid"> <ContentSection> Essential Mvc Grid offers full featured a Grid control with extensive support for Grouping and the display of hierarchical data. The Grouping Grid control uses Syncfusion's industry leading Essential Grouping engine to provide a Mvc grid with support for grouping, nested tables and foreign-key relations.Essential Grid also offers a display only cell oriented Grid control for use cases where a ? Windows-Forms like? rich, read only grid UI is desired. </ContentSection> </ej:TabItem> </Items> </ej:Tab> </PaneContent> </ej:SplitPane> </ej:Splitter>
Splitter with TreeView and Tab appears as follows.
Figure 1: Splitter with TreeView and Tab
