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") ?>">
  <!-- 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
} ?>