Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
141189 | Nov 28,2018 10:38 PM UTC | Dec 3,2018 11:38 AM UTC | ASP.NET Core | 5 |
![]() |
Tags: Grid |
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" query-cell-info="cellinfo" >
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column>
<e-column field="CustomerID" header-text="CustomerID"></e-column>
<e-column field="EmployeeID" datasource="ViewBag.DDl" header-text="Freight">
<e-edit-template create="create" read="read" write="write"> </e-edit-template>
</e-column>
</e-columns>
</ej-grid>
<script type="text/javascript">
var dropData = @Html.Raw(Json.Serialize(ViewBag.DDl)); // to retrieve the data from server
function cellinfo(args) {
var data = [];
if (args.column.field == "EmployeeID") {
for (i = 0; i < args.rowData.EmployeeID.length; i++)
for (j = 0; j < dropData.length; j++) {
if (args.rowData.EmployeeID[i] == dropData[j].EmployeeID) {
data.push(dropData[j].CustomerID);
break;
}
}
args.cell.innerHTML = data.join(","); //assign the value to cell
}
}
function create(args) {
return "<input>";
}
function read(args) {
var selvalue = [];
var selected = args.ejDropDownList("getSelectedValue").split(",");
for (i = 0; i < selected.length; i++)
for (j = 0; j < dropData.length; j++) {
if (selected[i] == dropData[j].CustomerID) {
selvalue.push(dropData[j].EmployeeID);
break;
}
}
return selvalue;
}
function write(args) {
var selIndex = [];
if (args.rowdata != undefined)
{
for (i = 0; i < args.rowdata["EmployeeID"].length; i++)
for (j = 0; j < dropData.length; j++){
if (args.rowdata["EmployeeID"][i] == dropData[j].EmployeeID) {
selIndex.push(j);
break;
}
}
}
args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "EmployeeID", text: "CustomerID", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" });
}
</script>
|
|
|
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" query-cell-info="cellinfo" cell-save="onSave" before-batch-save="beforeSave" >
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Batch"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column>
<e-column field="CustomerID" header-text="CustomerID"></e-column>
<e-column field="EmployeeID" datasource="ViewBag.DDl" header-text="Freight">
<e-edit-template create="create" read="read" write="write"> </e-edit-template>
</e-column>
</e-columns>
</ej-grid>
<script type="text/javascript">
var dropData = @Html.Raw(Json.Serialize(ViewBag.DDl)); // to retrieve the data from server
var editedData;
function onSave(args) { // to display the value after selecting the value.
if (args.columnName == "EmployeeID") {
var data = [];
for (i = 0; i < args.value.length; i++)
for (j = 0; j < dropData.length; j++) {
if (args.value[i] == dropData[j].EmployeeID) {
data.push(dropData[j].CustomerID);
break;
}
}
editedData = data.join(",");
setTimeout(function () {
var grid = $("#FlatGrid").ejGrid("instance");
grid.setCellValue(grid.getSelectedRows().index(),"EmployeeID",editedData); // to display the text instead of value after saving the value
},0)
}
}
function beforeSave(args) { // to change the value from text to interger while saving the changes in dataSource.
if (args.batchChanges.changed.length) {
for (var k = 0; k < args.batchChanges.changed.length; k++) {
if (!(typeof args.batchChanges.changed[k].EmployeeID[0] == "number")) {
var data = [];
for (i = 0; i < args.batchChanges.changed[k].EmployeeID.split(",").length; i++)
for (j = 0; j < dropData.length; j++) {
if (args.batchChanges.changed[k].EmployeeID.split(",")[i] == dropData[j].CustomerID) {
data.push(dropData[j].EmployeeID);
break;
}
}
args.batchChanges.changed[k].EmployeeID = data.join(",")
}
}
}
}
// to modify the value during intial rendering
function cellinfo(args) {
var data = [];
if (args.column.field == "EmployeeID") {
for (i = 0; i < args.rowData.EmployeeID.length; i++)
for (j = 0; j < dropData.length; j++) {
if (args.rowData.EmployeeID[i] == dropData[j].EmployeeID) {
data.push(dropData[j].CustomerID);
break;
}
}
args.cell.innerHTML = data.join(","); // return the selected value from dropdownlist
}
}
function create(args) {
return "<input>";
}
function read(args) {
var selvalue = [];
var selected = args.ejDropDownList("getSelectedValue").split(",");
for (i = 0; i < selected.length; i++)
for (j = 0; j < dropData.length; j++) {
if (selected[i] == dropData[j].CustomerID) {
selvalue.push(dropData[j].EmployeeID);
break;
}
}
return selvalue;
}
function write(args) {
var selIndex = [];
if (args.rowdata != undefined && typeof args.rowdata.EmployeeID[0] == "number") {
for (i = 0; i < args.rowdata["EmployeeID"].length; i++)
for (j = 0; j < dropData.length; j++) {
if (args.rowdata["EmployeeID"][i] == dropData[j].EmployeeID) {
selIndex.push(j);
break;
}
}
}
else if (typeof args.rowdata.EmployeeID.split(",")[0] == "string") { // for second time editng changes without saving it.
for (i = 0; i < args.rowdata["EmployeeID"].length; i++)
for (j = 0; j < dropData.length; j++) {
if (args.rowdata["EmployeeID"].split(",")[i] == dropData[j].CustomerID) {
selIndex.push(j);
break;
}
}
}
args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "EmployeeID", text: "CustomerID", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" });
}
</script> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.