Refactor data grid components

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -81,7 +82,7 @@
         />
       </DxColumn>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialog()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -93,7 +94,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer" @click="showDialog()">
+        <p class="!text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -139,6 +140,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -473,7 +475,13 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingSubData = ref(false)
 
-const showDialog = () => {
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
@@ -546,15 +554,17 @@ const onExporting = (e: any) => {
   }
 }
 
-const currentDataSelected = ref<any>(null)
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
-  currentDataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }