We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<button onclick="GetDatafromRight()"></button>
<script>
function GetDatafromRight() {
var DestObj = document.getElementById("DestGrid").ej2_instances[0]; //get instance of destination grid
console.log(DestObj.dataSource); //Fetch the data from destination grid and use this to populate your table
}
</script>
|
|
<button onclick="GetDatafromRight()"></button>
<script>
function GetDatafromRight() {
var DestObj = document.getElementById("DestGrid").ej2_instances[0];
var destdata = DestObj.dataSource;
console.log(DestObj.dataSource);//Fetch the data from destignation grid and use this to populate your table
$.ajax({
url: "/Home/Updatetotable",
type: "POST",
datatype: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ gid: JSON.stringify(destdata) })
});
}
</script> |
|
<div class="col-lg-6">
<ejs-grid id="Grid" dataSource=”Model.UnOrderList” allowRowDragAndDrop="true" rowDrop="rowDrop" allowSelection="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" allowSorting="true">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
<e-grid-pagesettings pageSize="4"></e-grid-pagesettings>
<e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
<e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>
<e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" width="130" editType="datepickeredit"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<div class="col-lg-6">
<ejs-grid id="DestGrid" dataSource=”Model.OrderList” allowRowDragAndDrop="true" rowDrop="rowDropdest" allowSelection="true" allowPaging="true">
<e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
<e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
<script>
function rowDrop(args) {
args.cancel = true;
// delete record from source grid and add to dest grid
document.getElementById('Grid').ej2_instances[0].deleteRecord("OrderID", args.data[0]);
document.getElementById('DestGrid').ej2_instances[0].addRecord(args.data[0]);
}
function rowDropdest(args) {
args.cancel = true;
// delete record from destination grid and add to source grid
document.getElementById('DestGrid').ej2_instances[0].deleteRecord("OrderID", args.data[0]);
document.getElementById('Grid').ej2_instances[0].addRecord(args.data[0]);
}
</script> |
