Refesh grid data
Hi
I have a group update button for data grid source.
I use this.$ref.grid.ej2Instances.dataSource = this.list; to refresh the grid.
But It only worked at first click,
After first click, the datasource will update, but the grid is not refresh to show the updated data.
<template>
<div class="dlg">
<div class="datasheetheader">
<div class="recordstextlabel">
{{ numRecordsText }}
</div>
<div
class="btnExcle"
title="Excle"
v-show="buttonsEnabled"
@click.prevent.stop="CreateExcelFileButtonHanlder"
>
<img class="img" :src="ExcelIcon" />
</div>
<div
class="btnsave"
title="Save"
v-show="canUpdate"
@click.prevent.stop="save"
>
<img class="img" :src="saveIcon" />
</div>
<div
class="btngroupupdate"
title="Group Update"
v-show="canGroupUpdate"
@click.prevent.stop="groupupdate"
>
<img class="img" :src="updateDateIcon" />
</div>
<VueCheckBox
id="idChkEditMode"
class="chkEditMode"
label=" Edit Mode"
v-show="showeditmode"
v-model="editmode"
/>
</div>
<div class="gridcontainer">
<ejs-grid
id="Grid"
ref="grid"
:key="forcefreshcount"
v-show="true"
height="100%"
:editSettings="editSettings"
:beforeDataBound="beforeDataBound"
:allowExcelExport="true"
:allowFiltering="true"
:allowResizing="true"
:allowSorting="true"
:dataSource="list"
:columns="columnsEjs"
:recordDoubleClick="ondblclick"
:rowDataBound="rowDataBound"
:queryCellInfo="queryCellInfo"
:actionBegin="actionBegin"
:filterSettings="filterOptions"
/>
</div>
<SubDraggleDialog
v-if="msgDlgModualName != ''"
:key="dialogrefreshcount"
:title="label.GroupUpdateValue"
:dlgcomponentname="msgDlgModualName"
:dlgparam="msgDlgParam"
:dlgstyle="msgDlgStyle"
:isokclosedlg="true"
@cancel="maindlgclose"
@ok="maindlgokclick"
/>
</div>
</template>
<script>
import Vue from "vue";
import {
GridPlugin,
VirtualScroll,
Sort,
Edit,
Filter,
ExcelExport,
Resize,
} from "@syncfusion/ej2-vue-grids";
import langmixin from "@/mixins/lang_mixin";
import formmixin from "@/mixins/form_mixin";
import dlgmixin from "@/mixins/dlg_mixin";
import ApiMyPortal from "@/apiservices/api.myportal";
import ApiPackageApprove from "@/apiservices/api.packageapprove";
import ApiMarketQuest from "@/apiservices/api.marketquest";
import FieldTypeEnum from "@/enum/app/value/FieldTypeEnum";
import ReminderActionEnum from "@/enum/app/value/ReminderActionEnum";
import ComboBoxExEnums from "@/enum/server/ComboBoxExEnums";
// import ResultTypeEnum from "@/enum/server/value/ResultTypeEnum";
import MenuIconEnum from "@/enum/img/MenuIconEnum";
import { DataManager } from "@syncfusion/ej2-data";
import {
getCurrentMsgs,
getCountryId,
setShowShareAreaMustBeInFullScreenMode,
} from "@/utils/UtilsSys";
import UtilsPMT from "@/utils/UtilsPMT";
//import GlobalContext from '@/utils/UtilsGlobalContext';
import UtilsColumnListInfo from "@/utils/control/datagrid/UtilsColumnListInfo";
import MMapItemType from "@/map/value/MMapItemType";
import MainEventEnum from "@/enum/events/MainEventEnum";
import UtilMCDItem from "@/map/utils/UtilMCDItem";
import UtilsMyPortal from "@/views/pmt/UtilsMyPortal";
import { addDays } from "@/utils/UtilsGeneral";
import SubDraggleDialog from "@/common/dialog/SubDraggleDialog";
import { getDlgStyleOptions } from "@/common/dialog/UtilsDraggaleDialog";
import DlgCompName from "@/components/modal/DlgCompName";
import { modifyBaseInfoForGrid } from "@/views/datasheet/UtilsGMapDatasheet";
import { DataUtil } from "@syncfusion/ej2-data";
import { Query } from "@syncfusion/ej2-data";
import { getComboxValueObjectList } from "@/utils/control/UtilsCombox";
//import { getComoBoxExValueList } from '@/utils/control/UtilsCombox';
//let Designtypelist = [];//getComoBoxExValueList(ComboBoxExEnums.DesignType); //getComboxValueObjectList(ComboBoxExEnums.DesignType);
Vue.use(GridPlugin);
export default {
name: "DlgPmtTaskPipeline",
mixins: [langmixin, formmixin, dlgmixin],
components: {
SubDraggleDialog,
},
provide: {
grid: [VirtualScroll, Sort, Edit, Filter, ExcelExport, Resize],
},
data() {
return {
showeditmode: false,
buttonsEnabled: true,
ExcelIcon: MenuIconEnum.csvxlsIcon,
saveIcon: MenuIconEnum.saveIcon,
updateDateIcon: MenuIconEnum.updateDateIconPath,
forcefreshcount: 0,
canGroupUpdate: false,
canUpdate: false,
itemPortal: null,
reminder: null,
numRecordsText: "[ ]",
defaultselectedindex: 0,
list_org: [],
list: [],
columnsEjs: [],
editSettings: {
allowEditing: true,
showConfirmDialog: false,
allowAdding: false,
allowDeleting: false,
mode: "Normal",
},
dialogrefreshcount: 0,
msgDlgTitle: "",
msgDlgModualName: "",
msgDlgStyle: {},
msgDlgParam: {},
baseDropDownColumnsList: [],
filterOptions: {
type: "Menu",
},
filter: {
type: "CheckBox",
},
Designtypelist: [],
editmode: false,
DesignTypeParams: {
params: {
allowFiltering: true,
dataSource: [],
fields: { text: "NameEn", value: "NameEn" },
query: new Query(),
actionComplete: () => false,
},
},
};
},
props: {},
mounted() {},
created() {
this.itemPortal = this.param;
this.reminder = this.itemPortal.item;
this.getGridColumns(this.reminder);
this.getDataList(this.reminder);
this.Designtypelist = getComboxValueObjectList(ComboBoxExEnums.DesignType);
this.DesignTypeParams.params.dataSource = this.Designtypelist;
this.canGroupUpdate = UtilsMyPortal.canGroupUpdate(this.itemPortal);
this.canUpdate = UtilsMyPortal.canUpdate(this.itemPortal);
},
methods: {
// cellSaved: function(args) {
// var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
// grid.editModule.batchSave(); //call this method inside the success function of the axios post
// },
actionBegin: function (args) {
if (args.requestType === "save") {
var fieldname = UtilsPMT.getReminderFieldName(this.reminder);
this.list.forEach(function (element) {
if (element.PipelineId == args.data.PipelineId) {
element[fieldname] = args.data[fieldname];
}
});
// PLease store this data in Vuex store
}
if (args.requestType === "beginEdit" && !this.editmode) {
args.cancel = true;
// Grid edit action is cancelled
}
},
// load: function () {
// var self = this;
// this.$refs.grid.ej2Instances.element.addEventListener(
// "click",
// function (e) {
// if (self.editmode) {
// var instance = this.ej2_instances[0];
// if (e.target.classList.contains("e-rowcell")) {
// if (instance.isEdit) instance.endEdit();
// let index = parseInt(e.target.getAttribute("Index"));
// instance.selectRow(index);
// instance.startEdit();
// }
// }
// }
// );
// this.$refs.grid.ej2Instances.element.addEventListener(
// "mouseup",
// function (e) {
// var instance = this.ej2_instances[0];
// if (e.target.classList.contains("e-rowcell")) {
// let index = parseInt(e.target.getAttribute("Index"));
// let colindex = parseInt(e.target.getAttribute("aria-colindex"));
// let field = instance.getColumns()[colindex].field;
// let allowEditing = instance.getColumns()[colindex].allowEditing;
// if (allowEditing == true) {
// instance.editModule.editcell(index, field);
// }
// }
// }
// );
//},
beforeDataBound: function (args) {
var gridObj =
document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (args.count === 0) {
gridObj.getContent().children[0].classList.add("c-scroll");
}
},
queryCellInfo: function (args) {
if (args.column.field === "SeqNum") {
args.cell.classList.add("cc-count");
}
},
rowDataBound: function (args) {
this.showVisibleAndSeq(args);
},
showVisibleAndSeq: function (args) {
if (args.row.querySelector(".cc-count")) {
var val = parseInt(args.row.getAttribute("aria-rowindex")) + 1;
args.row.querySelector(".cc-count").innerText = val;
}
},
getGridColumns(reminder) {
switch (reminder.ReminderActionId) {
case ReminderActionEnum.APPROVE_MARKETQUEST_TYPE:
this.getMarketQuestColumnList();
break;
case ReminderActionEnum.APPROVE_PIPELINEPROCESS_TYPE:
this.getPipelineApproveListColumnList();
break;
default:
this.getMyPortalPipelineColumnList(reminder);
break;
}
},
getMyPortalPipelineColumnList(reminder) {
var gridColumns = UtilsColumnListInfo.getMyPortalPipelineColumnListEjs();
var fieldname = UtilsPMT.getReminderFieldName(reminder);
if (fieldname != null) {
if (fieldname == "ProjectedOpenDate") {
this.showeditmode = false;
this.editmode = false;
} else {
this.showeditmode = true;
}
var columnInfo = gridColumns.find((c) => c.field == fieldname);
if (
UtilsPMT.getReminderFieldType(reminder) == FieldTypeEnum.DATE_TYPE
) {
//col = UtilsMxDatagrid.setEditableDateFieldColumn(dgmapitem,fieldname,reminder.ReminderActionId != ReminderActionEnum.UPDATE_PLANOPENDATE_TYPE);
let editable =
reminder.ReminderActionId !=
ReminderActionEnum.UPDATE_PLANOPENDATE_TYPE;
UtilsColumnListInfo.highlightPmtDateColumn(columnInfo, editable);
} else if (
reminder.ReminderActionId == ReminderActionEnum.UPDATE_DESIGNTYPE_TYPE
) {
for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].field == fieldname) {
gridColumns[i].editType = "dropdownedit";
gridColumns[i].edit = this.DesignTypeParams;
gridColumns[i].width = 200;
}
}
// UtilsColumnListInfo.highlightPmtDropDownColumn(
// columnInfo,
// ComboBoxExEnums.DesignType,
// true
// );
// col = UtilsMxDatagrid.SetEditableSingleValueDropDownBoxFieldColumn(dgmapitem,fieldname,
// GlobalContext.getComoBoxExValueList(ComboBoxExEnums.DesignType));
}
}
gridColumns.forEach(function (element) {
element.allowEditing = "false";
element.textAlign = "Center";
if (element.field.endsWith("SeqNum")) {
element.allowFiltering = false;
element.width = 50;
}
if (element.field.endsWith("Date")) {
//cinfo.dataType = FieldTypeEnum.DATE_TYPE;
element.format = "yMd";
element.editType = "datepickeredit";
element.type = "date";
//element.edit = this.dpParams
element.width = 120;
}
});
for (var j = 0; j < gridColumns.length; j++) {
if (
gridColumns[j].field == fieldname &&
gridColumns[j].field != "ProjectedOpenDate"
) {
gridColumns[j].allowEditing = true;
} else {
gridColumns[j].isPrimaryKey = true;
}
}
this.columnsEjs = gridColumns;
//this.columnsEjs = UtilsColumnListInfo.getMyPortalPipelineColumnListEjs();
},
getPipelineApproveListColumnList() {
this.columnsEjs =
UtilsColumnListInfo.getPipelineApproveListColumnListEjs();
for (var i = 0; i < this.columnsEjs.length; i++) {
this.columnsEjs[i].isPrimaryKey = true;
this.columnsEjs[i].textAlign = "Center";
}
},
getMarketQuestColumnList() {
this.columnsEjs =
UtilsColumnListInfo.getMarketQUestApproveListColumnListEjs();
for (var i = 0; i < this.columnsEjs.length; i++) {
this.columnsEjs[i].isPrimaryKey = true;
this.columnsEjs[i].textAlign = "Center";
}
},
getDataList(reminder) {
switch (reminder.ReminderActionId) {
case ReminderActionEnum.APPROVE_MARKETQUEST_TYPE:
this.getMarketQuestApprovePackageListAll();
break;
case ReminderActionEnum.APPROVE_PIPELINEPROCESS_TYPE:
this.getPipelineApprovePackageListAll();
break;
default:
this.getPipelineReminderItemList(reminder);
break;
}
},
getPipelineApprovePackageListAll() {
const param =
UtilsColumnListInfo.getUnCompletedPipelineApprovePackageFilterArray();
ApiPackageApprove.getPipelineApprovePackageListAll(
param,
(issucc, datainfo) => {
if (issucc) {
this.numRecordsText =
datainfo.length >= 0 ? "[ " + datainfo.length + " ]" : "[ ]";
modifyBaseInfoForGrid(
-1,
-1,
datainfo,
this.baseDropDownColumnsList
);
this.list = DataUtil.parse.parseJson(datainfo);
this.list_org = JSON.parse(JSON.stringify(this.list)); //this.deepCopy(datainfo);
}
}
);
},
getMarketQuestApprovePackageListAll() {
var self = this;
ApiMarketQuest.getNeedApproveMarketQuestList(
getCountryId(),
(issucc, mqlist) => {
if (issucc) {
self.numRecordsText =
mqlist.length >= 0 ? "[ " + mqlist.length + " ]" : "[ ]";
modifyBaseInfoForGrid(-1, -1, mqlist, self.baseDropDownColumnsList);
self.list = DataUtil.parse.parseJson(mqlist);
self.list_org = JSON.parse(JSON.stringify(self.list)); //this.deepCopy(mqlist);
}
}
);
},
getPipelineReminderItemList(reminder) {
var self = this;
ApiMyPortal.getPipelineReminderItemList(reminder, (issucc, datainfo) => {
if (issucc) {
self.numRecordsText =
datainfo.length >= 0 ? "[ " + datainfo.length + " ]" : "[ ]";
modifyBaseInfoForGrid(-1, -1, datainfo, this.baseDropDownColumnsList);
self.list = DataUtil.parse.parseJson(datainfo);
self.list_org = JSON.parse(JSON.stringify(self.list)); //this.deepCopy(datainfo); //[...datainfo]; // need deep copy
self.forcefreshcount++;
}
});
},
ondblclick(param) {
if (this.editmode == false) {
setShowShareAreaMustBeInFullScreenMode(true);
const isMarketQuest =
this.reminder.ReminderActionId ==
ReminderActionEnum.APPROVE_MARKETQUEST_TYPE;
var mcditem = UtilMCDItem.getMCDItem(
isMarketQuest
? MMapItemType.MAP_ITEM_MARKETQUEST
: MMapItemType.MAP_ITEM_PIPELINE,
0,
param.rowData
);
window.EventBus.$emit(
MainEventEnum.MainEventShowMapItemProperty,
mcditem
);
}
},
CreateExcelFileButtonHanlder() {
var gridInst = this.$refs.grid;
gridInst.excelExport();
},
groupupdate() {
this.msgDlgModualName = DlgCompName.DlgGroupValueSetupView;
this.msgDlgStyle = getDlgStyleOptions(null, false, 0, 0, true);
this.msgDlgParam = {};
this.dialogrefreshcount++;
},
maindlgclose() {
this.mainDlgModualName = "";
},
// eslint-disable-next-line
maindlgokclick(param) {
this.mainDlgModualName = "";
this.updatedateByGorup(param);
},
save() {
//alert("Saved??");
var fieldname = this.getCurrentModifyFieldName();
if (fieldname == null) return;
var modifiedGroupValues = {
Obj: this.reminder,
IdObjectList: [],
};
var comparelist = JSON.parse(JSON.stringify(this.list));
for (var i = 0; i < comparelist.length; i++) {
var orgValueString = this.list_org[i][fieldname];
var newValueString = comparelist[i][fieldname]; // getValueString(UtilsGeneral.getProperty(pipelineArray_.getItemAt(i),fieldname));
if (orgValueString != newValueString) {
if (newValueString == "") {
if (
this.reminder != null &&
this.reminder.ReminderActionId ==
ReminderActionEnum.UPDATE_DESIGNTYPE_TYPE
) {
continue;
}
}
var ioobject = {
Id: comparelist[i]["PipelineId"],
Value: comparelist[i][fieldname], // UtilsGeneral.getProperty(pipelineArray_.getItemAt(i),fieldname);
};
modifiedGroupValues.IdObjectList.push(ioobject);
}
}
if (modifiedGroupValues.IdObjectList.length == 0) {
alert("No changes are made.");
return;
// GlobalMapControl.showAlert(MessageTextEnum.StrNoValueChanged,MessageTextEnum.StrWarningTitle);
}
// else{
// GlobalMapControl.showAlert(StringUtil.substitute(MessageTextEnum.StrItemChangedNumberPattern,modifiedGroupValues_.IdObjectList.length )
// + MessageTextEnum.StrUpdatePrompt, MessageTextEnum.StrConfirmation,
// mx.controls.Alert.OK | mx.controls.Alert.CANCEL, onSavePromptListener);
// }
// }
const MessageTextEnum = getCurrentMsgs();
if (window.confirm(MessageTextEnum.StrUpdatePrompt) == false) {
return;
}
// var self = this;
ApiMyPortal.updatePipelineReminderItems(
modifiedGroupValues,
// eslint-disable-next-line
(issucc, datainfo) => {
if (issucc) {
// self.numRecordsText = datainfo.length >= 0 ? "[ " + datainfo.length + " ]" : "[ ]";
// self.list = datainfo;
this.list_org = JSON.parse(JSON.stringify(this.list)); //this.deepCopy(this.list);
window.EventBus.$emit(MainEventEnum.MainEventPMTValueChanged, {});
alert("Update successful.");
}
}
);
},
getCurrentModifyFieldName() {
if (this.reminder == null) {
return null;
}
return UtilsPMT.getReminderFieldName(this.reminder);
},
deepCopy(inObject) {
let outObject, value, key;
if (typeof inObject !== "object" || inObject === null) {
return inObject; // Return the value if inObject is not an object
}
// Create an array or object to hold the values
outObject = Array.isArray(inObject) ? [] : {};
for (key in inObject) {
value = inObject[key];
// Recursively (deep) copy for nested objects, including arrays
outObject[key] = this.deepCopy(value);
}
return outObject;
},
updatedateByGorup(param) {
var fieldname = UtilsPMT.getReminderFieldName(this.reminder);
let filterrecorder = this.$refs.grid.getFilteredRecords();
//let pdfdata;
// let query =
// this.$refs.grid.ej2Instances.renderModule.data.generateQuery(); // get grid corresponding query
// for (var z = 0; z < query.queries.length; z++) {
// if (query.queries[z].fn == "onPage") {
// query.queries.splice(z, 1); // remove page query to get all records
// break;
// }
// }
// let fdata = new DataManager({ json: this.list })
// .executeQuery(query)
// .then((e) => {
// pdfdata = e.result; // get all filtered records
// let exportProperties = {
// dataSource: pdfdata,
// };
// this.$refs.grid.pdfExport(exportProperties);
// })
// .catch((e) => true);
if (filterrecorder.length < 1) {
for (var i = 0; i < this.list.length; i++) {
if (param.isAddDays) {
var datevalue = this.list[i][fieldname];
//var orgutcdatestr = getUTCDateTimeStrFromStr(datevalue);
this.list[i][fieldname] = addDays(datevalue, param.adddays);
} else {
this.list[i][fieldname] = param.totargetday;
}
}
} else {
for (var y = 0; y < filterrecorder.length; y++) {
if (param.isAddDays) {
var cdatevalue = filterrecorder[y][fieldname];
//var orgutcdatestr = getUTCDateTimeStrFromStr(datevalue);
filterrecorder[y][fieldname] = addDays(cdatevalue, param.adddays);
} else {
filterrecorder[y][fieldname] = param.totargetday;
}
}
}
for (var x = 0; x < filterrecorder.length; x++) {
for (var j = 0; j < this.list.length; j++) {
if (filterrecorder[x].PipelineId == this.list[j].PipelineId) {
this.list[j][fieldname] = filterrecorder[x][fieldname];
}
}
}
//var newlist = DataUtil.parse.parseJson(this.list);
//this.list = newlist;
this.$refs.grid.ej2Instances.dataSource = this.list;
//this.$refs.grid.refreshColumns();
//this.dialogrefreshcount++;
},
},
watch: {},
};
</script>
<style lang = "scss" scoped>
$checkbox-width: 140px;
.dlg {
width: 1000px;
height: 550px;
}
.gridcontainer {
margin-top: 0px;
left: 0px;
width: 100%;
height: calc(100% - 34px);
box-sizing: border-box;
border: 1px solid #c0c0c0;
}
.chkEditMode {
position: absolute;
top: 7px;
left: 132px;
width: $checkbox-width;
}
.btnExcle {
position: absolute;
top: 6px;
left: 46px;
width: 20px;
height: 20px;
z-index: 1;
&:hover {
background-color: rgba(200, 200, 255, 0.9);
}
}
.btnsave {
position: absolute;
top: 6px;
left: 72px;
width: 20px;
height: 20px;
z-index: 1;
&:hover {
background-color: rgba(200, 200, 255, 0.9);
}
}
.btngroupupdate {
position: absolute;
top: 6px;
left: 98px;
width: 20px;
height: 20px;
z-index: 1;
&:hover {
background-color: rgba(200, 200, 255, 0.9);
}
}
.img {
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
.recordstextlabel {
position: absolute;
top: 6px;
left: 11px;
}
</style>
SIGN IN To post a reply.
4 Replies
FZ
Fan Zhang
November 18, 2021 09:16 PM UTC
I added the following code after this.$refs.grid.ej2Instances.dataSource = this.list;
and it worked, but the grid seems like refreshed, the scroll bar rolled back to left side.
this.$refs.grid.updateRow(0,fieldname);
AG
Ajith Govarthan
Syncfusion Team
November 20, 2021 04:08 AM UTC
Hi Fan Zhang,
Thanks for contacting Syncfusion support.
Based on your query, you want to change datasource dynamically in your Grid application. So, we have prepared sample and found everything works fine at our end. For your convenience, we have attached the sample, please refer them for your reference.
Code Example:
|
App.vue
onClick: function (args) {
this.isCustomPaging = true;
var gridObj = this.$refs.grid1.$el.ej2_instances[0];
gridObj.dataSource = []; // empty the grid data and assign new data here
gridObj.dataSource = gridData.slice(2, 4);
}, |
Sample Link: https://codesandbox.io/s/vue-template-forked-gxsh8
If you still face the issue, then please share the issue reproducible sample and video demonstration of the reported issue to find the root cause of the issue.
Regards,
Ajith G.
FZ
Fan Zhang
November 20, 2021 06:27 AM UTC
It works great!!
Thanks
Fan
AG
Ajith Govarthan
Syncfusion Team
November 22, 2021 11:51 AM UTC
Hi Fan,
Thanks for the update.
We are happy to hear that the provided solution works fine at our end.
Please get back to us if you need further assistance.
Regards,
Ajith G.
SIGN IN To post a reply.
- 4 Replies
- 2 Participants
-
FZ Fan Zhang
- Nov 18, 2021 08:34 PM UTC
- Nov 22, 2021 11:51 AM UTC
