Refesh grid data

[Fan Zhang]

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>

[Fan Zhang]

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);

[Ajith Govarthan]

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. 

[Fan Zhang]

It works great!!

Thanks

Fan

[Ajith Govarthan]

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.