citrus-cms/app/Functions/datagrid-scripts.php

<?php function datagrid_scripts() {
     ?>
        <!-- DevExtreme CSS -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx-diagram.css" />

     <!-- DevExtreme Diagram JavaScript -->
    <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx-diagram.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.1.1/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.5/css/<?php echo setting("DevExpress_Theme", false,"dx.light.compact") ?>.css">
<!-- Quill CSS -->
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.7/quill.snow.css">

<!-- Quill JS -->
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>


<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>



<style>
.dx-datagrid tr:nth-child(odd) {
     background-color:#e8e8e8;
}
#dataGrid {
     height: calc(100vh - 220px);
}

.dx-datagrid .dx-row > td, .dx-datagrid .dx-row > tr > td {  
     padding: 5px !important;  
}  
.dx-editor-cell .dx-texteditor .dx-texteditor-input {
     height: 16px;
}

.dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #d2d2d2;
}
</style>
     <?php 
} ?>

<?php function datagrid_configurations() {
      ?>
      toolbar: {
            items: [
               "addRowButton",
               "applyFilterButton",
               "columnChooserButton",
               "revertButton",
               "saveButton",
               "searchPanel",
               "exportButton",
               "groupPanel",
               {
                    location: 'before',
                    widget: 'dxButton',
                    options: {
                         icon: 'filter',
                         text: '{{e2("Clear Filter")}}',
                         onClick: function(e) {
                              dataGrid.clearFilter();
                         }
                    }
               },
            ]  
        },
      paging: {
          pageSize: <?php echo setting('row_count') ?>,
        },
        allowColumnResizing: true,
        columnAutoWidth: true,
        allowColumnReordering: true,
        columnMinWidth: 150,
        columnMaxWidth: 250,
        columnResizingMode: "widget",
        showColumnLines: true,
        filterRow: { visible: true },
        searchPanel: { visible: true },
        columnFixing: {
            enabled: true
        },
        headerFilter: {
          visible: true,
          allowSearch: true,
        },
        
        loadPanel: {
          enabled: true,
        },
        
        scrolling: {
          mode: 'standart',
          rowRenderingMode: 'infinite',
          columnRenderingMode: 'infinite',
        },
        hoverStateEnabled: true,
        showBorders: true,
        
        remoteOperations: {
            filtering: true,
            paging: true,
            sorting: true,
            groupPaging: true,
            grouping: true,
            summary: true
        },
        
        
        
        onContextMenuPreparing: function(e) { 
          console.log("onContextMenuPreparing");
          console.log(e);
            if (e.target == "content") {
                if (!e.items) e.items = [];

                @if(isAuth($id, "modify"))

                e.items.push({
                    text: "<?php echo e2("Clear Value") ?>",
                    onItemClick: function(args) {
                        e.component.cellValue(e.rowIndex, e.columnIndex, null);
                    }
                    
                });

                @endif

                @if(isAuth($id, "write"))

                e.items.push({
                    text: "<?php echo e2("Clone Row") ?>",
                    onItemClick: function(args) {
                      $(".dx-icon-edit-button-addrow").trigger("click");
                      selectedData = e.row.data;
                      
                      
                    }
                    
                });

                @endif

                @if(isAuth($id, "modify"))

                e.items.push({
                    text: "<?php echo e2("Copy Start") ?>",
                    onItemClick: function(args) {
                      copyData =  e.component.cellValue(e.rowIndex, e.columnIndex);
                      selectedColIndex = e.columnIndex;
                      selectedRowIndex = e.rowIndex;
                      console.log(e);
                      console.log(selectedColIndex);
                      console.log(selectedRowIndex);
                      Swal.fire(copyData, "<?php echo e2("Data copied start") ?>", "success");
                      
                      
                    }
                    
                });
                
                e.items.push({
                    text: "<?php echo e2("Until Paste") ?>",
                    onItemClick: function(args) {
                      
                      if(e.columnIndex != selectedColIndex) {
                        Swal.fire("<?php echo e2("Wrong") ?>", "<?php echo e2("Please copy using the same columns.") ?>", "error");
                      } else {
                          for(var rowIndex = selectedRowIndex + 1; rowIndex<=e.rowIndex; rowIndex++) {
                            e.component.cellValue(rowIndex, e.columnIndex, copyData);
                          }
                         
                      }
                     
                      
                      
                    }
                    
                });

                @endif
            } 
        },
        
        onEditingStart(e) {
          var focusedSelector = $("td.dx-focused");
          var rowIndex = dataGrid.option("focusedRowIndex");
          var colIndex = dataGrid.option("focusedColumnIndex");
          try {
            var dataField = e.column.dataField;
            var allEntries = JSON.parse(localStorage.getItem("originalData" + rowIndex + colIndex)) || [];
            allEntries.push(e.data[dataField]); 
            localStorage.setItem("originalData" + rowIndex + colIndex, JSON.stringify(allEntries));
          } catch (error) {
            
          }
          
          
        },

        
        onInitNewRow(e) {
          
          if(selectedData) {
              e.data = selectedData;
              selectedData = null;
            
          }
          
        },
        onRowInserting(e) {
          logEvent('RowInserting');
          console.log(e);
        },

        onRowInserted() {
         // logEvent('RowInserted');
        },
        onRowUpdating() {
        },
        onRowUpdated() {
         // logEvent('RowUpdated');
        },
        onRowRemoving() {
         // logEvent('RowRemoving');
        },
        onRowRemoved() {
         // logEvent('RowRemoved');
        },
        onSaving() {
          
        },
        onInitialized() {
          
          $("#dataGrid td").on("click", function() {
            logEvent("#dataGrid td");
          });
        }, 
        onRowClick: function(e) {         
          
            /*
            console.log("onRowClick");
            console.log(e);
            selectedData = e.data;
            selectedData.id = null;
            if(e.rowType === "data") {
                e.component.editRow(e.rowIndex);
            } 
            
            */
        },
        onSaved() {
          
          logEvent('Saving Success');
        },
        onEditCanceling() {
         // logEvent('EditCanceling');
        },
        onEditCanceled() {
         // logEvent('EditCanceled');
        },
        onFocusedRowChanging(e) {
       //   console.log(e);
        },
       
       
        sorting: {
            mode: "multiple" // or "multiple" | "none"
        },
        
        
      <?php 
} ?>