How to create a Docking Manager sample using Grid control?
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.
