Category / Section
How to create a Docking Manager sample using Grid control?
1 min read
This knowledge base explains how to create a docking manager sample using Grid control.
Solution:
We can achieve this requirement by rendering the Grid controls within the corresponding Dialog controls. So, we can change the position of Grid controls by dragging the corresponding Dialog control.
- The Grid initialization as follows.
HTML
<div class="cols-sample-area"> <div class="control"> <div id="Dialog1" title="Grid1"> <div id="Grid1"></div> </div> <div id="Dialog2" title="Grid2"> <div id="Grid2"></div> </div> <div id="Dialog3" title="Grid3"> <div id="Grid3"></div> </div> <div style="margin-top:400px;"> <input type="button" value="Export layout" id="exportButton" /> <br /> <br /> <textarea id="exportOutput" rows="5" cols="40"></textarea> </div> </div> </div>
JS
<script type="text/javascript"> $(function () { // declaration $("#Dialog1").ejDialog({ position: { X: 301, Y: 30 }, target: ".cols-sample-area", width:300, height:500 }); $("#Dialog2").ejDialog({ position: { X: 633, Y: 30 }, target: ".cols-sample-area", width:300, height:500 }); $("#Dialog3").ejDialog({ position: { X: 954, Y: 30 }, target: ".cols-sample-area", width:300, height:500 }); $("#Grid1").ejGrid({ dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders" }), allowTextWrap: true, allowPaging: true, isResponsive: true, minWidth:1200, allowScrolling: true, scrollSettings:{ height:'100%'}, columns: [ { field: "OrderID", headerText: "Order ID", width: 90 }, { field: "CustomerID", headerText: 'Customer ID', width: 90}, { field: "ShipCity", headerText: 'Employee ID', width: 75}, ] }); $("#Grid2").ejGrid({ dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Order_Details" }), allowTextWrap: true, allowPaging: true, isResponsive: true, minWidth:1200, allowScrolling: true, scrollSettings:{ height:'100%'}, columns: [ { field: "ProductID", headerText: "Product ID", width: 90 }, { field: "UnitPrize", headerText: 'Unit Prize', width: 90}, { field: "Quantity", headerText: 'Quantity', width: 75}, ] }); $("#Grid3").ejGrid({ dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Employees" }), allowTextWrap: true, allowPaging: true, isResponsive: true, minWidth:1200, allowScrolling: true, scrollSettings:{ height:'100%'}, columns: [ { field: "EmployeeID", headerText: "Employee ID", width: 90 }, { field: "FirstName", headerText: 'FirstName', width: 90}, { field: "LastName", headerText: 'LastName', width: 75}, ] }); }); $("#exportButton").ejButton({ width: 150, click: "exportButtonClickEvent" }); }); </script>
MVC
<div class="cols-sample-area"> <div class="control"> @{Html.EJ() .Dialog("Dialog1") .Position(p => p.XValue("301").YValue("30")) .Target(".cols-sample-area") .Width("300") .Height("500") .Title("Grid 1") .ContentTemplate(@<div> @(Html.EJ().Grid<object>("Grid1") .Datasource(ds => ds.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders")) .AllowPaging() .AllowTextWrap() .IsResponsive() .MinWidth(1200) .AllowScrolling() .ScrollSettings(s => s.Height("100%")) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width(90).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(75).Add(); }) ) </div>).Render(); } @{Html.EJ() .Dialog("Dialog2") .Position(p => p.XValue("633").YValue("30")) .Target(".cols-sample-area") .Width("300") .Height("500") .Title("Grid 2") .ContentTemplate(@<div> @(Html.EJ().Grid<object>("Grid2") .Datasource(ds => ds.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Order_Details")) .AllowPaging() .AllowTextWrap() .IsResponsive() .MinWidth(1200) .AllowScrolling() .ScrollSettings(s => s.Height("100%")) .Columns(col => { col.Field("ProductID").HeaderText("Product ID").Width(90).Add(); col.Field("UnitPrize").HeaderText("Unit Prize").Width(90).Add(); col.Field("Quantity").HeaderText("Quantity").Width(75).Add(); }) ) </div>).Render(); } @{Html.EJ() .Dialog("Dialog3") .Position(p => p.XValue("954").YValue("30")) .Target(".cols-sample-area") .Width("300") .Height("500") .Title("Grid 3") .ContentTemplate(@<div> @(Html.EJ().Grid<object>("Grid3") .Datasource(ds => ds.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Employees")) .AllowPaging() .AllowTextWrap() .IsResponsive() .MinWidth(1200) .AllowScrolling() .ScrollSettings(s => s.Height("100%")) .Columns(col => { col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add(); col.Field("FirstName").HeaderText("First Name").Width(90).Add(); col.Field("LastName").HeaderText("Last Name").Width(75).Add(); }) ) </div>).Render(); }S <div style="margin-top:400px;"> @(Html.EJ().Button("exportButton").Text("Export layout").Width("150").ClientSideEvents(e => e.Click("exportButtonClickEvent"))) <br /> <br /> <textarea id="exportOutput" rows="5" cols="40"></textarea> </div> </div> </div>
ASP
<div class="cols-sample-area"> <div class="control"> <ej:Dialog ID="Dialog1" Title="Grid 1" ClientIDMode="Static" Target=".cols-sample-area" Width="300" Height="500" runat="server"> <Position XValue="301" YValue="30" /> <DialogContent> <ej:Grid ID="Grid1" ClientIDMode="Static" runat="server" AllowPaging="true" AllowTextWrap="true" IsResponsive="true" MinWidth="1200" AllowScrolling="true"> <ScrollSettings Height="100%" /> <DataManager URL="http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"></DataManager> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" Width="90" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" /> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="75" /> </Columns> </ej:Grid> </DialogContent> </ej:Dialog> <ej:Dialog ID="Dialog2" Title="Grid 2" ClientIDMode="Static" Target=".cols-sample-area" Width="300" Height="500" runat="server"> <Position XValue="633" YValue="30" /> <DialogContent> <ej:Grid ID="Grid2" ClientIDMode="Static" runat="server" AllowPaging="true" AllowTextWrap="true" IsResponsive="true" MinWidth="1200" AllowScrolling="true"> <ScrollSettings Height="100%" /> <DataManager URL="http://mvc.syncfusion.com/Services/Northwnd.svc/Order_Details"></DataManager> <Columns> <ej:Column Field="ProductID" HeaderText="Product ID" Width="90" /> <ej:Column Field="UnitPrize" HeaderText="Unit Prize" Width="90" /> <ej:Column Field="Quantity" HeaderText="Quantity" Width="75" /> </Columns> </ej:Grid> </DialogContent> </ej:Dialog> <ej:Dialog ID="Dialog3" Title="Grid 3" ClientIDMode="Static" Target=".cols-sample-area" Width="300" Height="500" runat="server"> <Position XValue="954" YValue="30" /> <DialogContent> <ej:Grid ID="Grid3" runat="server" ClientIDMode="Static" AllowPaging="true" AllowTextWrap="true" IsResponsive="true" MinWidth="1200" AllowScrolling="true"> <ScrollSettings Height="100%" /> <DataManager URL="http://mvc.syncfusion.com/Services/Northwnd.svc/Employees"></DataManager> <Columns> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="90" /> <ej:Column Field="FirstName" HeaderText="First Name" Width="90" /> <ej:Column Field="LastName" HeaderText="Last Name" Width="75" /> </Columns> </ej:Grid> </DialogContent> </ej:Dialog> <div style="margin-top:400px;"> <ej:Button ID="exportButton" ClientIDMode="Static" Text="Export layout" runat="server" Width="150" ClientSideOnClick="exportButtonClickEvent" ></ej:Button> <br /> <br /> <textarea id="exportOutput" rows="5" cols="40"></textarea> </div> </div> </div>
CORE
<div class="cols-sample-area"> <div class="control"> <ej-dialog id="Dialog1" title="Grid 1" target=".cols-sample-area" width="300" height="500"> <e-dialog-position x-value="301" y-value="30" /> <e-content-template> <div> <ej-grid id="Grid1" allow-paging="true" allow-text-wrap="true" is-responsive="true" min-width="1200" allow-scrolling="true"> <e-datamanager url="http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"></e-datamanager> <e-scroll-settings height=@("100%")></e-scroll-settings> <e-columns> <e-column field="OrderID" header-text="Order ID" width="90"></e-column> <e-column field="CustomerID" header-text="Customer ID" width="90"></e-column> <e-column field="ShipCity" header-text="Ship City" width="75"></e-column> </e-columns> </ej-grid> </div> </e-content-template> </ej-dialog> <ej-dialog id="Dialog2" title="Grid 2" target=".cols-sample-area" width="300" height="500"> <e-dialog-position x-value="633" y-value="30" /> <e-content-template> <div> <ej-grid id="Grid2" allow-paging="true" allow-text-wrap="true" is-responsive="true" min-width="1200" allow-scrolling="true"> <e-datamanager url="http://mvc.syncfusion.com/Services/Northwnd.svc/Order_Details"></e-datamanager> <e-scroll-settings height=@("100%")></e-scroll-settings> <e-columns> <e-column field="ProductID" header-text="Product ID" width="90"></e-column> <e-column field="UnitPrize" header-text="Unit Prize" width="90"></e-column> <e-column field="Quantity" header-text="Quantity" width="75"></e-column> </e-columns> </ej-grid> </div> </e-content-template> </ej-dialog> <ej-dialog id="Dialog3" title="Grid 3" target=".cols-sample-area" width="300" height="500"> <e-dialog-position x-value="954" y-value="30" /> <e-content-template> <div> <ej-grid id="Grid3" allow-paging="true" allow-text-wrap="true" is-responsive="true" min-width="1200" allow-scrolling="true"> <e-datamanager url="http://mvc.syncfusion.com/Services/Northwnd.svc/Employees"></e-datamanager> <e-scroll-settings height=@("100%")></e-scroll-settings> <e-columns> <e-column field="EmployeeID" header-text="Employee ID" width="90"></e-column> <e-column field="FirstName" header-text="First Name" width="90"></e-column> <e-column field="LastName" header-text="Last Name" width="75"></e-column> </e-columns> </ej-grid> </div> </e-content-template> </ej-dialog> <div style="margin-top:400px;"> <ej-button id="exportButton" text="Export layout" width="150" click="exportButtonClickEvent" /> <br /> <br /> <textarea id="exportOutput" rows="5" cols="40"></textarea> </div> </div> </div>
Angular
<div class="cols-sample-area"> <div class="control"> <ej-dialog id="Dialog1" title="Grid 1" width="300" height="500" target=".cols-sample-area" [position]="DialogPosition1"> <ej-grid id="Grid1" [dataSource]="gridData1" [allowPaging]="true" [allowTextWrap]="true" [isResponsive]="true" [minWidth]="1200" [allowScrolling]="true" [scrollSettings]="GridScrolSettings" > <e-columns> <e-column field="OrderID" headerText="Order ID" width="90px"></e-column> <e-column field="CustomerID" headerText="Customer ID" width="90px"></e-column> <e-column field="ShipCity" headertext="Ship City" width="75px" ></e-column> </e-columns> </ej-grid> </ej-dialog> <ej-dialog id="Dialog2" title="Grid 2" width="300" height="500" target=".cols-sample-area" [position]="DialogPosition2"> <ej-grid id="Grid2" [dataSource]="gridData2" [allowPaging]="true" [allowTextWrap]="true" [isResponsive]="true" [minWidth]="1200" [allowScrolling]="true" [scrollSettings]="GridScrolSettings" > <e-columns> <e-column field="ProductID" headerText="Product ID" width="90px"></e-column> <e-column field="UnitPrize" headerText="Unit Prize" width="90px"></e-column> <e-column field="Quantity" headertext="Quantity" width="75px" ></e-column> </e-columns> </ej-grid> </ej-dialog> <ej-dialog id="Dialog3" title="Grid 3" width="300" height="500" target=".cols-sample-area" [position]="DialogPosition3"> <ej-grid id="Grid3" [dataSource]="gridData3" [allowPaging]="true" [allowTextWrap]="true" [isResponsive]="true" [minWidth]="1200" [allowScrolling]="true" [scrollSettings]="GridScrolSettings" > <e-columns> <e-column field="EmployeeID" headerText="Employee ID" width="90px"></e-column> <e-column field="FirstName" headerText="First Name" width="90px"></e-column> <e-column field="LastName" headertext="Last Name" width="75px" ></e-column> </e-columns> </ej-grid> </ej-dialog> <div style="margin-top:400px;"> <input type="button" ej-button id="exportButton" [value]="text" [width]="150" (ejclick)="exportButtonClickEvent($event)" /> <br /> <br /> <textarea id="exportOutput" rows="5" cols="40"></textarea> </div> </div> </div>
TS
export class AppComponent { public GridScrolSettings: any; public gridData1: any; public gridData2: any; public gridData3: any; public DialogPosition1: any; public DialogPosition2: any; public DialogPosition3: any; public text: any; constructor() { this.GridScrolSettings = { height:'100%'}; this.DialogPosition1={ X:301,Y:30}; this.DialogPosition2={ X:633,Y:30}; this.DialogPosition3={ X:954,Y:30}; this.gridData1 = new ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/" }); this.gridData2 = new ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Order_Details" }); this.gridData3 = new ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Employees" }); this.text = "Export layout"; } exportButtonClickEvent(e: any){ var dialogObj = $("#Dialog1").ejDialog("instance"); var dialogObj1 = $("#Dialog2").ejDialog("instance"); var dialogObj2 = $("#Dialog3").ejDialog("instance"); $('#exportOutput').html("" + JSON.stringify(dialogObj.model.position) + "" + JSON.stringify(dialogObj1.model.position) + "" + JSON.stringify(dialogObj2.model.position)); } }
- In client-side external button click event we can get the positions of the dialog using ejDialog model and paste it in the text area.
<script type="text/javascript"> function exportButtonClickEvent (args) { var dialogObj = $("#Dialog1").ejDialog("instance"); var dialogObj1 = $("#Dialog2").ejDialog("instance"); var dialogObj2 = $("#Dialog3").ejDialog("instance"); $('#exportOutput').html("" + JSON.stringify(dialogObj.model.position) + "" + JSON.stringify(dialogObj1.model.position) + "" + JSON.stringify(dialogObj2.model.position)); } </script>
Result:
Figure 1: At Initial Rendering of Docking manager in Grid.