Update core smartproc

src/views/master-data/bidang-page copy.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Bidang</h3>
+    <p class="content-block">Bidang</p>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <DxDataGrid ref="currDataGrid"
+            :data-source="dataSource" 
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+            @exporting="onExporting">
+            <DxRemoteOperations :group-paging="true" />
+            <DxEditing
+                :allow-adding="true"
+                :allow-updating="true"
+                :allow-deleting="true"
+                :use-icons="true"
+                mode="popup">
+                <DxTexts 
+                add-row="Tambah"
+                edit-row="Ubah"
+                delete-row="Hapus"
+                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                save-row-changes="Simpan"
+                cancel-row-changes="Batal"
+                ></DxTexts>
+                <DxForm label-location="top" :col-count="1">
+                  <!--<DxItem dataField="instansiId" editor-type="dxSelectBox"/>-->
+                  <DxItem dataField="instansiId"/>
+                  <DxItem dataField="bidang">
+                    <DxRequiredRule message="Bidang harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Bidang"
+                />
+            </DxEditing>
+            <DxToolbar>
+                <DxItem name="groupPanel" />
+                <DxItem name="searchPanel" location="before"/>
+                <DxItem name="addRowButton" show-text="always" css-class="">
+                  <DxTexts add-row="Tambah"></DxTexts>
+                </DxItem>
+                <DxItem name="exportButton" />
+                <DxItem name="columnChooserButton" />
+            </DxToolbar>
+            <DxPaging :page-size="5" />
+            <DxPager 
+            :visible="true"
+            :allowed-page-sizes="[5, 10, 50]" 
+            :display-mode="compact" 
+            :show-page-size-selector="true" 
+            :show-info="true" 
+            :show-navigation-buttons="true"
+            info-text="Hal {0} dari {1} ({2} data)" />
+            <DxFilterRow :visible="false" />
+            <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
+            <DxColumn data-field="instansiId" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="bidang" caption="Bidang"></DxColumn>
+            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton name="edit"/>
+              <DxButton name="delete"/>
+            </DxColumn>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Bidang..."/>
+            <!--<DxExport
+              :enabled="true"
+              :formats="['xlsx', 'pdf']"
+              :allow-export-selected-data="true"
+            />-->
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script> 
+import DxDataGrid, {
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  DxTexts,
+  DxRequiredRule,
+  DxLookup
+} from "devextreme-vue/data-grid";
+import CustomStore from "devextreme/data/custom_store";
+import { Workbook } from 'exceljs';
+import { saveAs } from 'file-saver-es';
+import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
+import { jsPDF } from 'jspdf';
+import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
+const URL = process.env.VUE_APP_ROOT_API+'/bidang';
+const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
+
+const instansiOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_instansi+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const dataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=1000')
+      .then((response) => response.json())
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  insert: (values) => {
+        return fetch(URL, {
+            method: "POST",
+            body: JSON.stringify(values),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+    },
+
+  update: (key, values) => {
+      return fetch(URL + "/" + encodeURIComponent(key), {
+          method: "PUT",
+          body: JSON.stringify(values),
+          headers: {
+              'Content-Type': 'application/json'
+          }
+      });
+  },
+
+  remove: (key) => {
+      return fetch(URL + "/" + encodeURIComponent(key), {
+          method: "DELETE",
+      });
+  },
+});
+
+export default {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    DxTexts,
+    DxRequiredRule,
+    DxLookup
+},
+  methods: {
+    onExporting(e) {
+      e.cancel = true;
+
+      switch (e.format) {
+        case "pdf": {
+          const doc = new jsPDF();
+          exportDataGridToPDF({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+          }).then(() => {
+            doc.save('Bidang.pdf');
+          });
+        }
+        break;
+
+        case "xlsx": {
+          const workbook = new Workbook();
+          const worksheet = workbook.addWorksheet('Bidang');
+
+          exportDataGridToExcel({
+            component: e.component,
+            worksheet: worksheet,
+            autoFilterEnabled: true,
+          }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer) => {
+              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
+            });
+          });
+        }
+        break;
+      }
+      
+    },
+    onCellPrepared(e) {
+      var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
+    
+      $links.text("");
+      
+      if(isEditing){
+          $links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
+          $links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
+      } else {
+          $links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
+          $links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
+      }
+    },
+  },
+  
+  data() {
+      return {
+          //jsonUrl: URL,
+          dataSource,
+          instansis: instansiOptions,
+          // instansis: { 
+          //   items: instansiOptions, 
+          //   searchEnabled: true, value: '' 
+          // },
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/master-data/bidang-page.vue

@@ -6,8 +6,8 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
-            key-expr="ID"
+            :data-source="dataSource" 
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">
@@ -17,7 +17,6 @@
                 :allow-updating="true"
                 :allow-deleting="true"
                 :use-icons="true"
-                form="popup"
                 mode="popup">
                 <DxTexts 
                 add-row="Tambah"
@@ -28,8 +27,8 @@
                 cancel-row-changes="Batal"
                 ></DxTexts>
                 <DxForm label-location="top" :col-count="1">
-                  <DxItem dataField="instansi_id" editor-type="dxSelectBox"/>
-                  <!--<DxItem dataField="instansix_id" :data-source="instansiEditorOptions" editor-type="dxDropDownBox"/>-->
+                  <!--<DxItem dataField="instansiId" editor-type="dxSelectBox"/>-->
+                  <DxItem dataField="instansiId"/>
                   <DxItem dataField="bidang">
                     <DxRequiredRule message="Bidang harus diisi" />
                   </DxItem>
@@ -63,8 +62,8 @@
             info-text="Hal {0} dari {1} ({2} data)" />
             <DxFilterRow :visible="false" />
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
-            <DxColumn data-field="instansi_id" caption="Instansi">
-              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansiEditorOptions" />
+            <DxColumn data-field="instansiId" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
             </DxColumn>
             <DxColumn data-field="bidang" caption="Bidang"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
@@ -111,6 +110,8 @@ const URL = process.env.VUE_APP_ROOT_API+'/bidang';
 const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
 
 const instansiOptions = new CustomStore({
+  key: 'id',
+  
   load:() => {
       return fetch(URL_instansi+'?size=1000')
       .then((response) => response.json())
@@ -124,10 +125,22 @@ const instansiOptions = new CustomStore({
       //   console.log(JSON.parse(data));
       // })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   }
 });
 
-const customDataSource = new CustomStore({
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -233,11 +246,12 @@ export default {
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource, 
-          instansiEditorOptions: { 
-            items: instansiOptions, 
-            searchEnabled: true, value: '' 
-          },
+          dataSource,
+          instansis: instansiOptions,
+          // instansis: { 
+          //   items: instansiOptions, 
+          //   searchEnabled: true, value: '' 
+          // },
       }
   },
 }

src/views/master-data/instansi-page.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jabatan-page.vue

@@ -6,28 +6,31 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
-            key-expr="ID"
+            :data-source="dataSource" 
+            key-expr="id"
             :allow-column-reordering="true"
-            :column-auto-width="true"
-            @exporting="onExporting">
+            :column-auto-width="true">
             <DxRemoteOperations :group-paging="true" />
             <DxEditing
                 :allow-adding="true"
                 :allow-updating="true"
                 :allow-deleting="true"
                 :use-icons="true"
-                form="popup"
                 mode="popup">
                 <DxTexts 
-                add-row="Tambah"
-                edit-row="Ubah"
-                delete-row="Hapus"
-                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
-                save-row-changes="Simpan"
-                cancel-row-changes="Batal"
-                ></DxTexts>
+                    add-row="Tambah"
+                    edit-row="Ubah"
+                    delete-row="Hapus"
+                    confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                    save-row-changes="Simpan"
+                    cancel-row-changes="Batal"></DxTexts>
                 <DxForm label-location="top" :col-count="1">
+                  <DxItem dataField="instansiId">
+                    <DxRequiredRule message="Instansi harus dipilih" />
+                  </DxItem>
+                  <DxItem dataField="bidangId">
+                    <DxRequiredRule message="Bidang harus dipilih" />
+                  </DxItem>
                   <DxItem dataField="jabatan">
                     <DxRequiredRule message="Nama Jabatan harus diisi" />
                   </DxItem>
@@ -37,7 +40,7 @@
                     :hide-on-outside-click="true"
                     :show-title="true"
                     :width="400"
-                    :height="400"
+                    :height="450"
                     title="Form Jabatan"
                 />
             </DxEditing>
@@ -61,6 +64,12 @@
             info-text="Hal {0} dari {1} ({2} data)" />
             <DxFilterRow :visible="false" />
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
+            <DxColumn data-field="instansiId" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="bidangId" caption="Bidang">
+              <DxLookup display-expr="bidang" value-expr="id" :data-source="bidangs" :search-enabled="true" />
+            </DxColumn>
             <DxColumn data-field="jabatan" caption="Nama Jabatan"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
@@ -68,11 +77,6 @@
               <DxButton name="delete"/>
             </DxColumn>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Jabatan..."/>
-            <!--<DxExport
-              :enabled="true"
-              :formats="['xlsx', 'pdf']"
-              :allow-export-selected-data="true"
-            />-->
           </DxDataGrid>
         </div>
       </div>
@@ -93,18 +97,78 @@ import DxDataGrid, {
   DxSearchPanel,
   DxToolbar,
   DxTexts,
-  DxRequiredRule
+  DxRequiredRule,
+  DxLookup
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { Workbook } from 'exceljs';
-import { saveAs } from 'file-saver-es';
-import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
-import { jsPDF } from 'jspdf';
-import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
 const URL = process.env.VUE_APP_ROOT_API+'/jabatan';
+const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
+const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
 
-const customDataSource = new CustomStore({
+const instansiOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_instansi+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const bidangOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_bidang+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_bidang+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.bidang);
+        return {
+          data: response.bidang
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -154,62 +218,16 @@ export default {
     DxSearchPanel,
     DxToolbar,
     DxTexts,
-    DxRequiredRule
-  },
-  methods: {
-    onExporting(e) {
-      e.cancel = true;
-
-      switch (e.format) {
-        case "pdf": {
-          const doc = new jsPDF();
-          exportDataGridToPDF({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-          }).then(() => {
-            doc.save('Jenispengadaan.pdf');
-          });
-        }
-        break;
-
-        case "xlsx": {
-          const workbook = new Workbook();
-          const worksheet = workbook.addWorksheet('Jabatan');
-
-          exportDataGridToExcel({
-            component: e.component,
-            worksheet: worksheet,
-            autoFilterEnabled: true,
-          }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer) => {
-              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
-            });
-          });
-        }
-        break;
-      }
-      
-    },
-    onCellPrepared(e) {
-      var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
-    
-      $links.text("");
-      
-      if(isEditing){
-          $links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
-          $links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
-      } else {
-          $links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
-          $links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
-      }
-    },
+    DxRequiredRule,
+    DxLookup
   },
   
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
+          instansis: instansiOptions,
+          bidangs: bidangOptions,
       }
   },
 }

src/views/master-data/jenis-anggaran copy.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jenis-anggaran.vue

@@ -6,8 +6,8 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
-            key-expr="ID"
+            :data-source="dataSource" 
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">
@@ -29,7 +29,7 @@
                   <DxItem dataField="jenisAnggaran">
                     <DxRequiredRule message="Jenis Anggaran harus diisi" />
                   </DxItem>
-                  <DxItem dataField="keterangan" />
+                  <DxItem dataField="keterangan"/>
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
@@ -66,7 +66,7 @@
               <DxButton name="delete"/>
             </DxColumn>
             <template #row-cell-template="{ data }">
-              <DxText>{{ data.rowIndex +1 }}</DxText>
+              <DxText>{{ data.rowIndex + data.component.pageIndex() + 1 }}</DxText>
             </template>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Jenis Anggaran..."/>
             <!--<DxExport
@@ -105,7 +105,7 @@ import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
 const URL = process.env.VUE_APP_ROOT_API+'/jenisanggaran';
 
-const customDataSource = new CustomStore({
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -206,7 +206,7 @@ export default {
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
       }
   },
 }

src/views/master-data/jenis-kontrak copy.vue

@@ -6,7 +6,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jenis-kontrak.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jenis-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/lokasi-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/metode-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/metode-penyampaian.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/strategi-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/sumber-dana.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/supply-positioning-matrix.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/unit-inisiator.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">