Grid

Grid

Grid sistemi grafik ve tasarım sektöründe bir sayfayı yatay ve dikey olarak sütunlara ayrılmasıyla hizalama işlemidir. Grid yapısı, sayfa üzerinde kullanılacak olan yazı, resim, video gibi nesnelerin yerleştirileceği alanları belirlemede yardımcı olurlar.

Kullanım Şekli:

Tasarımı:

 {
  "defaultColDef": {
    "suppressMenu": false,
    "cellEditorParams": null
  },
  "bottomGridShow": false,
  "bottomGridColumns": {},
  "rowActions": [],
  "javascriptActions": [],
  "clientSide": false,
  "inlineEdit": false,
  "floatingFilter": true,
  "extraRecords": [],
  "buttons": {
    "menuButtons": {
      "refreshButton": true,
      "printButton": true,
      "exportButton": true,
      "importButton": false,
      "groupButton": true,
      "reportButton": true,
      "logButton": true
    },
    "configButtons": {
      "editConfigButton": true,
      "saveConfigButton": true,
      "editingModeButton": true,
      "editReportDesignButton": true
    },
    "addButton": true,
    "editButton": true,
    "deleteButton": true,
    "saveButton": true,
    "loadButton": true
  },
  "tabs": [],
  "showSideBar": false,
  "printouts": [],
  "autoLoad": false,
  "autoLoadTabIndex": 0,
  "autoLoadMode": "visible",
  "rowStyles": {},
  "pivotMode": false,
  "gridReady": "",
  "rowSelected": "",
  "beforeCellEdit": "",
  "beforeCellValueChange": "",
  "afterCellValueChange": "",
  "recordScript": "",
  "recordBeforeSaveScript": "",
  "beforeAddScript": "",
  "beforeEditScript": "",
  "beforeSaveScript": "",
  "afterSaveScript": "",
  "beforeDeleteScript": "",
  "afterDeleteScript": "",
  "useMaterialTheme": false,
  "pivotPanelShow": null,
  "pivotColumnGroupTotals": null,
  "pivotRowTotals": null,
  "autoGroupColumnDef": null,
  "groupIncludeTotalFooter": null,
  "groupIncludeFooter": null,
  "pivotColumnWidth": 100,
  "pivotColumnMinWidth": 100,
  "pivotRowTotalHeaderName": "Total",
  "pivotShowPivotColumns": true,
  "managedDragging": true,
  "enableCloning": false,
  "uniqueFields": [],
  "newRecordExtraData": {},
  "checkboxSelection": false,
  "excelImportShouldTempSave": false,
  "showCountButton": true,
  "htmlPrint": true,
  "inlineFind": {
    "fields": [],
    "debounceDuration": 500,
    "sort": true,
    "select": false
  },
  "offlineCacheGridID": null,
  "gridOptions": {},
  "colDefs": [
    {
      "hide": false,
      "field": "ID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "HOTELID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "FOLIO_DATE",
      "width": 200,
      "pinned": null,
      "type": "date",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "FOLIODATE",
      "width": 200,
      "pinned": null,
      "type": "date",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "RESID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "AGENCYID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "DEPARTMENTID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "DEPCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "DEPNAME",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "DEPTTYPE",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "FOLIOINVOICEID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "INVOICED",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "TLTOTAL",
      "width": 200,
      "pinned": null,
      "type": "double",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "CURRTOTAL",
      "width": 200,
      "pinned": null,
      "type": "double",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "CURRENCY",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "CURRID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "TYPEID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "GUESTNAMES",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "ROOMNO",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "CHECKIN",
      "width": 200,
      "pinned": null,
      "type": "date",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "CHECKOUT",
      "width": 200,
      "pinned": null,
      "type": "date",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "ERPCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "ERPID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "INVOICEDATE",
      "width": 200,
      "pinned": null,
      "type": "date",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "TAHSILATTL",
      "width": 200,
      "pinned": null,
      "type": "double",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "PMSCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "PMSSUBCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "AGENCY",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "ACCOUNTCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "INVOICENUMBER",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "SUBACCOUNTID",
      "width": 200,
      "pinned": null,
      "type": "integer",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "SUBACCOUNTCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "AGENCYACCOUNTCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    },
    {
      "hide": false,
      "field": "INVOICEACCONTCODE",
      "width": 200,
      "pinned": null,
      "type": "text",
      "rowGroupIndex": null,
      "pivotIndex": null,
      "aggFunc": null,
      "cellClassRules": {
        "cell-changed": "node.cellEditData && node.cellEditData[\"changedFields\"][colDef.field]"
      }
    }
  ],
  "heading": "test-123",
  "request": {
    "Object": "QA_EASYPMS_ERP_PAYMENTS",
    "Select": [
      "ID",
      "HOTELID",
      "FOLIO_DATE",
      "FOLIODATE",
      "RESID",
      "AGENCYID",
      "DEPARTMENTID",
      "DEPCODE",
      "DEPNAME",
      "DEPTTYPE",
      "FOLIOINVOICEID",
      "INVOICED",
      "TLTOTAL",
      "CURRTOTAL",
      "CURRENCY",
      "CURRID",
      "TYPEID",
      "GUESTNAMES",
      "ROOMNO",
      "CHECKIN",
      "CHECKOUT",
      "ERPCODE",
      "ERPID",
      "INVOICEDATE",
      "TAHSILATTL",
      "PMSCODE",
      "PMSSUBCODE",
      "AGENCY",
      "ACCOUNTCODE",
      "INVOICENUMBER",
      "SUBACCOUNTID",
      "SUBACCOUNTCODE",
      "AGENCYACCOUNTCODE",
      "INVOICEACCONTCODE"
    ],
    "Where": [],
    "OrderBy": [
      {
        "Column": "null",
        "Direction": "null"
      }
    ],
    "Joins": []
  },
  "primaryField": "ID",
  "jsPrint": [],
  "filterPanel": {
    "type": {
      "name": "expanded",
      "state": true
    },
    "areaName": "P1",
    "header": "filters",
    "groupsLayout": [
      [
        "G1"
      ]
    ],
    "groups": [
      {
        "areaName": "G1",
        "fields": [
          {
            "xSpan": 2,
            "controlType": "filter",
            "field": "FOLIO_DATE",
            "label": "Folio Date",
            "value": "${moment()}",
            "required": false,
            "operator": "=",
            "type": "date",
            "showOperator": false,
            "elementName": "G1~0"
          }
        ],
        "border": true,
        "header": "Start Date"
      }
    ]
  },
  "onCellKeyPressScript": "",
  "multiInsert": false,
  "multiUpdate": false,
  "cacheData": false,
  "beforeConfigProcessedScript": ""
}