Category / Section
How to render tree grid within Syncfusion dialog component
1 min read
Tree grid can be rendered inside any container control and you can render the tree grid control inside the Syncfusion dialog component. The below code snippet explains how to initialize tree grid control within dialog component.
<ej:Button ID="btnOpen" Type="Button" CssClass="e-btn" Text="Click to open dialog" ClientSideOnClick="clickButton" runat="server"></ej:Button>
<ej:Dialog ID="basicDialog" ShowOnInit="false" EnableResize="false" IsResponsive="true" Width="600" ClientSideOnClose="onDialogClose" Containment=".control" runat="server" Title="TreeGrid Control">
<DialogContent>
<ej:TreeGrid runat="server" ID="TreeGridSelfReference" IdMapping="Id" ParentIdMapping="ParentId" TreeColumnIndex="1" IsResponsive="true">
<Columns>
<ej:TreeGridColumn HeaderText="Task Id" Field="Id" Width="60" EditType="Numeric" />
<ej:TreeGridColumn HeaderText="Task Name" Field="Name" EditType="String" />
<ej:TreeGridColumn HeaderText="Start Date" Field="StartDate" EditType="Datepicker" />
<ej:TreeGridColumn HeaderText="Duration" Field="Duration" EditType="Numeric" />
<ej:TreeGridColumn HeaderText="Progress" Field="PercentDone" EditType="Numeric" />
</Columns>
<SizeSettings Height="450px" Width="550px" />
</ej:TreeGrid>
</DialogContent>
</ej:Dialog>
<script type="text/javascript">
function clickButton(args) {
$("#basicDialog").ejDialog("open");
}
</script>
The below screen shot shows the output for above code example to render tree grid within dialog control.
You can also find a sample with the above scenario here. In this sample, the dialog will be initialized on button click action with a tree grid control in it.
