Loading grid configuration...
}
+ {gridDto && !columnData && Loading columns...
}
+ {gridDto && columnData && !gridDataSource && (
+ Loading data source...
+ )}
+ {gridDto &&
+ columnData &&
+ gridDataSource &&
+ (() => {
+ return true
+ })() && (
+ <>
+
+
0
+ ? gridDto.gridOptions.height
+ : gridDto.gridOptions.fullHeight
+ ? `calc(100vh - ${170 + widgetGroupHeight}px)`
+ : undefined
}
- }}
- hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
- columnHidingEnabled={gridDto.gridOptions.columnOptionDto?.columnHidingEnabled}
- focusedRowEnabled={gridDto.gridOptions.columnOptionDto?.focusedRowEnabled}
- showColumnHeaders={gridDto.gridOptions.columnOptionDto?.showColumnHeaders}
- filterSyncEnabled={true}
- onSelectionChanged={onSelectionChanged}
- onInitNewRow={onInitNewRow}
- onCellPrepared={onCellPrepared}
- onRowInserting={onRowInserting}
- onRowUpdating={onRowUpdating}
- onEditingStart={onEditingStart}
- onDataErrorOccurred={onDataErrorOccurred}
- onExporting={onExporting}
- onEditCanceled={() => {
- setMode('view')
- setIsPopupFullScreen(false)
- }}
- onSaved={() => {
- setMode('view')
- setIsPopupFullScreen(false)
- }}
- onRowInserted={() => {
- props.refreshData?.()
- }}
- onRowUpdated={() => {
- props.refreshData?.()
- }}
- onRowRemoved={() => {
- props.refreshData?.()
- }}
- onEditorPreparing={onEditorPreparing}
- >
-
- {
- const grid = gridRef.current?.instance
- grid?.saveEditData()
- },
- },
- },
- {
- widget: 'dxButton',
- toolbar: 'bottom',
- location: 'after',
- options: {
- text: translate('::Cancel'),
- onClick: () => {
- const grid = gridRef.current?.instance
- grid?.cancelEditData()
- },
- },
- },
- {
- widget: 'dxButton',
- toolbar: 'top',
- location: 'after',
- options: {
- icon: isPopupFullScreen ? 'collapse' : 'fullscreen',
- hint: isPopupFullScreen
- ? translate('::Normal Boyut')
- : translate('::Tam Ekran'),
- stylingMode: 'text',
- onClick: () => setIsPopupFullScreen(!isPopupFullScreen),
- },
- },
- ],
+ width={gridDto.gridOptions.width || '100%'}
+ allowColumnResizing={gridDto.gridOptions.columnOptionDto?.allowColumnResizing}
+ allowColumnReordering={gridDto.gridOptions.columnOptionDto?.allowColumnReordering}
+ showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
+ showRowLines={gridDto.gridOptions.columnOptionDto?.showRowLines}
+ showColumnLines={gridDto.gridOptions.columnOptionDto?.showColumnLines}
+ columnResizingMode={gridDto.gridOptions.columnOptionDto?.columnResizingMode}
+ columnAutoWidth={gridDto.gridOptions.columnOptionDto?.columnAutoWidth}
+ rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
+ rowAlternationEnabled={gridDto.gridOptions.columnOptionDto?.rowAlternationEnabled}
+ onRowPrepared={(e) => {
+ //header, filter, data, group, summaries
+ if (e.rowType === 'data') {
+ e.rowElement.style.height = gridDto.gridOptions?.rowDto.rowHeight
+ e.rowElement.style.whiteSpace = gridDto.gridOptions?.rowDto.whiteSpace
+ e.rowElement.style.overflowWrap = gridDto.gridOptions?.rowDto.overflowWrap
+ }
}}
- form={{
- colCount: 1,
- onFieldDataChanged: (e) => {
- if (e.dataField) {
- const formItem = gridDto.gridOptions.editingFormDto
- .flatMap((group) => group.items || [])
- .find((i) => i.dataField === e.dataField)
- if (formItem?.editorScript) {
- try {
- eval(formItem.editorScript)
- } catch (err) {
- console.error('Script exec error', err)
+ hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
+ columnHidingEnabled={gridDto.gridOptions.columnOptionDto?.columnHidingEnabled}
+ focusedRowEnabled={gridDto.gridOptions.columnOptionDto?.focusedRowEnabled}
+ showColumnHeaders={gridDto.gridOptions.columnOptionDto?.showColumnHeaders}
+ filterSyncEnabled={true}
+ onSelectionChanged={onSelectionChanged}
+ onInitNewRow={onInitNewRow}
+ onCellPrepared={onCellPrepared}
+ onRowInserting={onRowInserting}
+ onRowUpdating={onRowUpdating}
+ onEditingStart={onEditingStart}
+ onDataErrorOccurred={onDataErrorOccurred}
+ onExporting={onExporting}
+ onEditCanceled={() => {
+ setMode('view')
+ setIsPopupFullScreen(false)
+ }}
+ onSaved={() => {
+ setMode('view')
+ setIsPopupFullScreen(false)
+ }}
+ onRowInserted={() => {
+ props.refreshData?.()
+ }}
+ onRowUpdated={() => {
+ props.refreshData?.()
+ }}
+ onRowRemoved={() => {
+ props.refreshData?.()
+ }}
+ onEditorPreparing={onEditorPreparing}
+ >
+
+
+ {
+ const grid = gridRef.current?.instance()
+ grid?.saveEditData()
+ },
+ },
+ },
+ {
+ widget: 'dxButton',
+ toolbar: 'bottom',
+ location: 'after',
+ options: {
+ text: translate('::Cancel'),
+ onClick: () => {
+ const grid = gridRef.current?.instance()
+ grid?.cancelEditData()
+ },
+ },
+ },
+ {
+ widget: 'dxButton',
+ toolbar: 'top',
+ location: 'after',
+ options: {
+ icon: isPopupFullScreen ? 'collapse' : 'fullscreen',
+ hint: isPopupFullScreen
+ ? translate('::Normal Boyut')
+ : translate('::Tam Ekran'),
+ stylingMode: 'text',
+ onClick: () => setIsPopupFullScreen(!isPopupFullScreen),
+ },
+ },
+ ],
+ }}
+ form={{
+ colCount: 1,
+ onFieldDataChanged: (e) => {
+ if (e.dataField) {
+ const formItem = gridDto.gridOptions.editingFormDto
+ .flatMap((group) => group.items || [])
+ .find((i) => i.dataField === e.dataField)
+ if (formItem?.editorScript) {
+ try {
+ eval(formItem.editorScript)
+ } catch (err) {
+ console.error('Script exec error', err)
+ }
}
}
- }
- },
- items:
- gridDto.gridOptions.editingFormDto?.length > 0
- ? (() => {
- const sortedFormDto = gridDto.gridOptions.editingFormDto
- .slice()
- .sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
+ },
+ items:
+ gridDto.gridOptions.editingFormDto?.length > 0
+ ? (() => {
+ const sortedFormDto = gridDto.gridOptions.editingFormDto
+ .slice()
+ .sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
- // Tabbed item'ları grupla
- const tabbedItems = sortedFormDto.filter(
- (e: any) => e.itemType === 'tabbed',
- )
- const result: any[] = []
+ // Tabbed item'ları grupla
+ const tabbedItems = sortedFormDto.filter(
+ (e: any) => e.itemType === 'tabbed',
+ )
+ const result: any[] = []
- // Helper function: item mapper
- const mapFormItem = (i: EditingFormItemDto) => {
- let editorOptions: EditorOptionsWithButtons = {}
- try {
- editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
+ // Helper function: item mapper
+ const mapFormItem = (i: EditingFormItemDto) => {
+ let editorOptions: EditorOptionsWithButtons = {}
+ try {
+ editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
- if (editorOptions?.buttons) {
- editorOptions.buttons = (editorOptions?.buttons || []).map(
- (btn: any) => {
- if (
- btn?.options?.onClick &&
- typeof btn.options.onClick === 'string'
- ) {
- btn.options.onClick = eval(`(${btn.options.onClick})`)
- }
- return btn
- },
- )
- }
+ if (editorOptions?.buttons) {
+ editorOptions.buttons = (editorOptions?.buttons || []).map(
+ (btn: any) => {
+ if (
+ btn?.options?.onClick &&
+ typeof btn.options.onClick === 'string'
+ ) {
+ btn.options.onClick = eval(`(${btn.options.onClick})`)
+ }
+ return btn
+ },
+ )
+ }
- const rawFilter = searchParams?.get('filter')
- if (rawFilter) {
- const parsed = JSON.parse(rawFilter)
- const filters = extractSearchParamsFields(parsed)
+ const rawFilter = searchParams?.get('filter')
+ if (rawFilter) {
+ const parsed = JSON.parse(rawFilter)
+ const filters = extractSearchParamsFields(parsed)
- const hasFilter = filters.some(
- ([field, op, val]) => field === i.dataField,
- )
-
- if (hasFilter) {
- const existsInExtra = extraFilters.some(
- (f) => f.fieldName === i.dataField && !!f.value,
+ const hasFilter = filters.some(
+ ([field, op, val]) => field === i.dataField,
)
- if (!existsInExtra) {
- editorOptions = {
- ...editorOptions,
- readOnly: true,
+ if (hasFilter) {
+ const existsInExtra = extraFilters.some(
+ (f) => f.fieldName === i.dataField && !!f.value,
+ )
+
+ if (!existsInExtra) {
+ editorOptions = {
+ ...editorOptions,
+ readOnly: true,
+ }
}
}
}
- }
- } catch {}
+ } catch {}
- const fieldName = i.dataField.split(':')[0]
- const listFormField = gridDto.columnFormats.find(
- (x: any) => x.fieldName === fieldName,
- )
+ const fieldName = i.dataField.split(':')[0]
+ const listFormField = gridDto.columnFormats.find(
+ (x: any) => x.fieldName === fieldName,
+ )
- if (listFormField?.sourceDbType === DbTypeEnum.Date) {
- editorOptions = {
- ...{
- type: 'date',
- dateSerializationFormat: 'yyyy-MM-dd',
- displayFormat: 'shortDate',
- },
- ...editorOptions,
+ if (listFormField?.sourceDbType === DbTypeEnum.Date) {
+ editorOptions = {
+ ...{
+ type: 'date',
+ dateSerializationFormat: 'yyyy-MM-dd',
+ displayFormat: 'shortDate',
+ },
+ ...editorOptions,
+ }
+ } else if (
+ listFormField?.sourceDbType === DbTypeEnum.DateTime ||
+ listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
+ listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
+ ) {
+ editorOptions = {
+ ...{
+ type: 'datetime',
+ dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxxx',
+ displayFormat: 'shortDateShortTime',
+ },
+ ...editorOptions,
+ }
}
- } else if (
- listFormField?.sourceDbType === DbTypeEnum.DateTime ||
- listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
- listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
- ) {
- editorOptions = {
- ...{
- type: 'datetime',
- dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxxx',
- displayFormat: 'shortDateShortTime',
- },
- ...editorOptions,
+
+ // Set defaultValue for @AUTONUMBER fields
+ if (
+ typeof listFormField?.defaultValue === 'string' &&
+ listFormField?.defaultValue === '@AUTONUMBER' &&
+ mode === 'new'
+ ) {
+ editorOptions = {
+ ...editorOptions,
+ value: autoNumber(),
+ }
}
+
+ const item: SimpleItemWithColData = {
+ canRead: listFormField?.canRead ?? false,
+ canUpdate: listFormField?.canUpdate ?? false,
+ canCreate: listFormField?.canCreate ?? false,
+ canExport: listFormField?.canExport ?? false,
+ dataField: i.dataField,
+ name: i.dataField,
+ editorType2: i.editorType2,
+ editorType:
+ i.editorType2 == PlatformEditorTypes.dxGridBox
+ ? 'dxDropDownBox'
+ : i.editorType2,
+ colSpan: i.colSpan,
+ isRequired: i.isRequired,
+ editorOptions,
+ editorScript: i.editorScript,
+ }
+
+ if (i.dataField.indexOf(':') >= 0) {
+ item.label = { text: captionize(i.dataField.split(':')[1]) }
+ }
+
+ if (
+ (mode == 'edit' && !item.canUpdate) ||
+ (mode == 'new' && !item.canCreate)
+ ) {
+ item.editorOptions = {
+ ...item.editorOptions,
+ readOnly: true,
+ }
+ }
+
+ return item
}
- // Set defaultValue for @AUTONUMBER fields
- if (
- typeof listFormField?.defaultValue === 'string' &&
- listFormField?.defaultValue === '@AUTONUMBER' &&
- mode === 'new'
- ) {
- editorOptions = {
- ...editorOptions,
- value: autoNumber(),
- }
- }
+ sortedFormDto.forEach((e: any) => {
+ if (e.itemType !== 'tabbed') {
+ // Backend'den gelen colCount ve colSpan değerlerini kullan
+ const effectiveColCount = e.colCount || 1
+ const effectiveColSpan = e.colSpan || 1
- const item: SimpleItemWithColData = {
- canRead: listFormField?.canRead ?? false,
- canUpdate: listFormField?.canUpdate ?? false,
- canCreate: listFormField?.canCreate ?? false,
- canExport: listFormField?.canExport ?? false,
- dataField: i.dataField,
- name: i.dataField,
- editorType2: i.editorType2,
- editorType:
- i.editorType2 == PlatformEditorTypes.dxGridBox
- ? 'dxDropDownBox'
- : i.editorType2,
- colSpan: i.colSpan,
- isRequired: i.isRequired,
- editorOptions,
- editorScript: i.editorScript,
- }
+ result.push({
+ itemType: e.itemType,
+ colCount: effectiveColCount,
+ colSpan: effectiveColSpan,
+ caption: e.caption, // Group'larda caption olmalı
+ items: e.items
+ ?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
+ .map(mapFormItem)
+ .filter((a: any) => {
+ if (mode === 'view') {
+ return a.canRead
+ } else if (mode === 'new') {
+ return a.canCreate || a.canRead
+ } else if (mode === 'edit') {
+ return a.canUpdate || a.canRead
+ } else {
+ return false
+ }
+ }),
+ })
+ } else if (tabbedItems.length > 0 && e === tabbedItems[0]) {
+ // Tabbed için caption OLMAMALI - sadece tabs array içinde title kullan
+ result.push({
+ itemType: 'tabbed',
+ colCount: 1,
+ colSpan: 1,
+ // caption kullanma! Tabs içindeki title'lar yeterli
+ tabs: tabbedItems.map((tabbedItem: any) => {
+ // Backend'den gelen colCount ve colSpan değerlerini kullan
+ const effectiveColCount = tabbedItem.colCount || 1
- if (i.dataField.indexOf(':') >= 0) {
- item.label = { text: captionize(i.dataField.split(':')[1]) }
- }
-
- if (
- (mode == 'edit' && !item.canUpdate) ||
- (mode == 'new' && !item.canCreate)
- ) {
- item.editorOptions = {
- ...item.editorOptions,
- readOnly: true,
- }
- }
-
- return item
- }
-
- sortedFormDto.forEach((e: any) => {
- if (e.itemType !== 'tabbed') {
- // Backend'den gelen colCount ve colSpan değerlerini kullan
- const effectiveColCount = e.colCount || 1
- const effectiveColSpan = e.colSpan || 1
-
- result.push({
- itemType: e.itemType,
- colCount: effectiveColCount,
- colSpan: effectiveColSpan,
- caption: e.caption, // Group'larda caption olmalı
- items: e.items
- ?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
- .map(mapFormItem)
- .filter((a: any) => {
- if (mode === 'view') {
- return a.canRead
- } else if (mode === 'new') {
- return a.canCreate || a.canRead
- } else if (mode === 'edit') {
- return a.canUpdate || a.canRead
- } else {
- return false
+ return {
+ title: tabbedItem.caption, // Her tab'ın title'ı
+ colCount: effectiveColCount,
+ items: tabbedItem.items
+ ?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
+ .map(mapFormItem)
+ .filter((a: any) => {
+ if (mode === 'view') {
+ return a.canRead
+ } else if (mode === 'new') {
+ return a.canCreate || a.canRead
+ } else if (mode === 'edit') {
+ return a.canUpdate || a.canRead
+ } else {
+ return false
+ }
+ }),
}
}),
- })
- } else if (tabbedItems.length > 0 && e === tabbedItems[0]) {
- // Tabbed için caption OLMAMALI - sadece tabs array içinde title kullan
- result.push({
- itemType: 'tabbed',
- colCount: 1,
- colSpan: 1,
- // caption kullanma! Tabs içindeki title'lar yeterli
- tabs: tabbedItems.map((tabbedItem: any) => {
- // Backend'den gelen colCount ve colSpan değerlerini kullan
- const effectiveColCount = tabbedItem.colCount || 1
+ })
+ }
+ })
- return {
- title: tabbedItem.caption, // Her tab'ın title'ı
- colCount: effectiveColCount,
- items: tabbedItem.items
- ?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
- .map(mapFormItem)
- .filter((a: any) => {
- if (mode === 'view') {
- return a.canRead
- } else if (mode === 'new') {
- return a.canCreate || a.canRead
- } else if (mode === 'edit') {
- return a.canUpdate || a.canRead
- } else {
- return false
- }
- }),
- }
- }),
- })
- }
- })
-
- return result
- })()
- : undefined,
- }}
- >
-
-
-
-
-
- 0 || filterToolbarData.length > 0}>
- {toolbarData.map((item) => (
-
+ {/* burada özel filtre alanını Template ile bağla */}
+ {gridDto?.gridOptions.extraFilterDto?.length ? (
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+a)}
+ showPageSizeSelector={gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector}
+ showInfo={false}
+ showNavigationButtons={
+ gridDto.gridOptions.pagerOptionDto?.showNavigationButtons
+ }
+ displayMode={gridDto.gridOptions.pagerOptionDto?.displayMode}
+ >
+
+
+
+
+
+ {gridDto.columnFormats
+ .filter((x: any) => !!x.columnTotalSummaryDto?.summaryType)
+ .map((x: any) => (
+
+ ))}
+ {gridDto.columnFormats
+ .filter((x: any) => !!x.columnGroupSummaryDto?.summaryType)
+ .map((x: any) => (
+
+ ))}
+
+
- {gridDto?.gridOptions?.subFormsDto?.length > 0 && (
- <>
-
-
-
- )}
+ {gridDto?.gridOptions?.subFormsDto?.length > 0 && (
+ <>
+
+
+
+ )}
-
-