Grid ve Tree için Export düzenlemesi

api/src/Kurs.Platform.Application.Contracts/ListForms/Chart/ChartExportDto.cs

@@ -15,6 +15,9 @@ public class ChartExportDto
     /// <summary> UI bileşeninde istemci tarafında dışa aktarmayı etkinleştirir.
     /// </summary>
     public bool Enabled { get; set; }
+    /// <summary> UI bileşeninde istemci tarafında dışa aktarmayı etkinleştirir.
+    /// </summary>
+    public bool AllowExportSelectedData { get; set; }
     ///// <summary> Dışa aktarma formatı belirtir.
     ///// Desteklenen formatlar: 'GIF' | 'JPEG' | 'PDF' | 'PNG' | 'SVG'
     ///// </summary>

api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/TreeOptionDto.cs

@@ -5,6 +5,10 @@ namespace Kurs.Platform.ListForms;
 /// </summary>
 public class TreeOptionDto
 {
+    /// <summary>
+    /// Parent kaydı belirten field adı (örn: "Id")
+    /// </summary>
+    public string KeyExpr { get; set; }
     /// <summary>
     /// Parent kaydı belirten field adı (örn: "parentId")
     /// </summary>

api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json

@@ -5179,6 +5179,12 @@
             "en": "Visible",
             "tr": "Görünür"
         },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.TreeKeyFieldName",
+            "en": "Key Field Name",
+            "tr": "Anahtar Alanı"
+        },
         {
             "resourceName": "Platform",
             "key": "ListForms.ListFormEdit.ParentIdExpr",

api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs

@@ -2613,7 +2613,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
                     DeleteCommand = DefaultDeleteCommand(nameof(TableNameEnum.Menu)),
                     DeleteFieldsDefaultValueJson = DefaultDeleteFieldsDefaultValueJson,
                     PagerOptionJson = DefaultPagerOptionJson,
-                    TreeOptionJson = DefaultTreeOptionJson("ParentCode", true),
+                    TreeOptionJson = DefaultTreeOptionJson("Code", "ParentCode", true),
                     EditingOptionJson = DefaultEditingOptionJson(AppCodes.Menus.Menu, 600, 600, true, true, true, true, false),
                     EditingFormJson = JsonSerializer.Serialize(new List<EditingFormDto>() {
                         new() { Order=1, ColCount=1, ColSpan=1, ItemType="group", Items=

api/src/Kurs.Platform.DbMigrator/Seeds/SeederDefaults.cs

@@ -77,8 +77,9 @@ public static class SeederDefaults
         Mode = GridOptions.SelectionModeMultiple,
         SelectAllMode = GridOptions.SelectionAllModeAllPages
     });
-    public static string DefaultTreeOptionJson(string ParentIdExpr, bool AutoExpandAll = true) => JsonSerializer.Serialize(new TreeOptionDto
+    public static string DefaultTreeOptionJson(string KeyExpr, string ParentIdExpr, bool AutoExpandAll = true) => JsonSerializer.Serialize(new TreeOptionDto
     {
+        KeyExpr = KeyExpr,
         ParentIdExpr = ParentIdExpr,
         RootValue = null,
         AutoExpandAll = AutoExpandAll

ui/src/proxy/admin/charts/models.ts

@@ -179,70 +179,10 @@ export interface ChartDragBoxStyle {
   opacity: number
 }
 
-// export interface ChartDto extends AuditedEntityDto<string> {
-//   listFormCode?: string
-//   userId?: string
-//   roleId?: string
-//   cultureName?: string
-//   commonJson?: string
-//   commonDto: ChartCommonDto
-//   adaptiveLayoutJson?: string
-//   adaptivelayoutDto: ChartAdaptivelayoutDto
-//   animationJson?: string
-//   animationDto: ChartAnimationDto
-//   annotationsJson?: string
-//   annotationsDto: ChartAnnotationDto[]
-//   argumentAxisJson?: string
-//   argumentAxisDto: ChartArgumentAxisDto
-//   commonAnnotationsSettingsJson?: string
-//   commonAnnotationSettingsDto: ChartCommonAnnotationDto
-//   commonAxisSettingsJson?: string
-//   commonAxisSettingsDto: ChartCommonAxisDto
-//   commonPaneSettingsJson?: string
-//   commonPaneSettingsDto: ChartCommonPaneDto
-//   commonSeriesSettingsJson?: string
-//   commonSeriesSettingsDto: ChartCommonSeriesSettingsDto
-//   crosshairJson?: string
-//   crosshairDto: ChartCrosshairDto
-//   exportJson?: string
-//   exportDto: ChartExportDto
-//   legendJson?: string
-//   legendDto: ChartLegendDto
-//   marginJson?: string
-//   marginDto: ChartMarginDto
-//   panesJson?: string
-//   panesDto: ChartPanesDto[]
-//   scrollBarJson?: string
-//   scrollBarDto: ChartScrollBarDto
-//   seriesJson?: string
-//   seriesDto: ChartSeriesDto[]
-//   sizeJson?: string
-//   sizeDto: ChartSizeDto
-//   titleJson?: string
-//   titleDto: ChartTitleDto
-//   tooltipJson?: string
-//   tooltipDto: ChartTooltipDto
-//   valueAxisJson?: string
-//   valueAxisDto: ChartValueAxisDto[]
-//   zoomAndPanJson?: string
-//   zoomAndPanDto: ChartZoomAndPanDto
-//   permissionJson?: string
-//   permissionDto: PermissionCrudDto
-//   isTenant: boolean
-//   isBranch: boolean
-//   isOrganizationUnit: boolean
-// }
-
-// export interface ChartEditDto extends ChartDto {
-//   editType: string
-//   dataSourceJson?: string
-//   dataSourceDto: ChartDataSourceDto
-//   dataSourceCode?: string
-// }
-
 export interface ChartExportDto {
   backgroundColor?: string
   enabled: boolean
+  allowExportSelectedData: boolean
   margin: number
   printingEnabled: boolean
 }

ui/src/proxy/admin/list-form/options.ts

@@ -119,4 +119,52 @@ export const tabVisibilityConfig: Record<string, string[]> = {
       'widget',
       'subForms',
     ],
-  }
+  }
+
+  export const themeOptions = [
+  { value: 'generic.dark', label: 'Generic Dark' },
+  { value: 'generic.light', label: 'Generic Carmine' },
+  { value: 'generic.contrast', label: 'Generic Contrast' },
+  { value: 'generic.carmine', label: 'Generic Darkmoon' },
+  { value: 'generic.darkmoon', label: 'Generic Darkviolet' },
+  { value: 'generic.darkviolet', label: 'Generic Greenmist' },
+  { value: 'generic.greenmist', label: 'Generic Light' },
+  { value: 'generic.softblue', label: 'Generic Soft Blue' },
+  { value: 'material.blue.light', label: 'Material Blue Light' },
+  { value: 'material.lime.light', label: 'Material Lime Light' },
+  { value: 'material.orange.light', label: 'Material Orange Light' },
+  { value: 'material.purple.light', label: 'Material Purple Light' },
+  { value: 'material.teal.light', label: 'Material Teal Light' },
+]
+
+export const tooltipFormatListOptions = [
+  { value: null, label: 'None' },
+  { value: 'billions', label: 'Billions' },
+  { value: 'currency', label: 'Currency' },
+  { value: 'day', label: 'Day' },
+  { value: 'dayOfWeek', label: 'Day of Week' },
+  { value: 'decimal', label: 'Decimal' },
+  { value: 'exponential', label: 'Exponential' },
+  { value: 'fixedPoint', label: 'Fixed Point' },
+  { value: 'hour', label: 'Hour' },
+  { value: 'largeNumber', label: 'Large Number' },
+  { value: 'longDate', label: 'Long Date' },
+  { value: 'longDateLongTime', label: 'Long Date Long Time' },
+  { value: 'longTime', label: 'Long Time' },
+  { value: 'millions', label: 'Millions' },
+  { value: 'millisecond', label: 'Millisecond' },
+  { value: 'minute', label: 'Minute' },
+  { value: 'month', label: 'Month' },
+  { value: 'monthAndDay', label: 'Month And Day' },
+  { value: 'monthAndYear', label: 'Month And Year' },
+  { value: 'percent', label: 'Percent' },
+  { value: 'quarter', label: 'Quarter' },
+  { value: 'quarterAndYear', label: 'Quarter And Year' },
+  { value: 'second', label: 'Second' },
+  { value: 'shortDate', label: 'Short Date' },
+  { value: 'shortDateShortTime', label: 'Short Date Short Time' },
+  { value: 'shortTime', label: 'ShortTime' },
+  { value: 'thousands', label: 'Thousands' },
+  { value: 'trillions', label: 'Trillions' },
+  { value: 'year', label: 'Year' },
+]

ui/src/proxy/form/models.ts

@@ -378,6 +378,7 @@ export interface GridPivotOptionDto {
 }
 
 export interface TreeOptionDto {
+  keyExpr?: string
   parentIdExpr?: string
   hasItemsExpr?: string
   rootValue?: any

ui/src/shared/options.ts

@@ -1,47 +0,0 @@
-export const themeOptions = [
-  { value: 'generic.dark', label: 'Generic Dark' },
-  { value: 'generic.light', label: 'Generic Carmine' },
-  { value: 'generic.contrast', label: 'Generic Contrast' },
-  { value: 'generic.carmine', label: 'Generic Darkmoon' },
-  { value: 'generic.darkmoon', label: 'Generic Darkviolet' },
-  { value: 'generic.darkviolet', label: 'Generic Greenmist' },
-  { value: 'generic.greenmist', label: 'Generic Light' },
-  { value: 'generic.softblue', label: 'Generic Soft Blue' },
-  { value: 'material.blue.light', label: 'Material Blue Light' },
-  { value: 'material.lime.light', label: 'Material Lime Light' },
-  { value: 'material.orange.light', label: 'Material Orange Light' },
-  { value: 'material.purple.light', label: 'Material Purple Light' },
-  { value: 'material.teal.light', label: 'Material Teal Light' },
-]
-
-export const tooltipFormatListOptions = [
-  { value: null, label: 'None' },
-  { value: 'billions', label: 'Billions' },
-  { value: 'currency', label: 'Currency' },
-  { value: 'day', label: 'Day' },
-  { value: 'dayOfWeek', label: 'Day of Week' },
-  { value: 'decimal', label: 'Decimal' },
-  { value: 'exponential', label: 'Exponential' },
-  { value: 'fixedPoint', label: 'Fixed Point' },
-  { value: 'hour', label: 'Hour' },
-  { value: 'largeNumber', label: 'Large Number' },
-  { value: 'longDate', label: 'Long Date' },
-  { value: 'longDateLongTime', label: 'Long Date Long Time' },
-  { value: 'longTime', label: 'Long Time' },
-  { value: 'millions', label: 'Millions' },
-  { value: 'millisecond', label: 'Millisecond' },
-  { value: 'minute', label: 'Minute' },
-  { value: 'month', label: 'Month' },
-  { value: 'monthAndDay', label: 'Month And Day' },
-  { value: 'monthAndYear', label: 'Month And Year' },
-  { value: 'percent', label: 'Percent' },
-  { value: 'quarter', label: 'Quarter' },
-  { value: 'quarterAndYear', label: 'Quarter And Year' },
-  { value: 'second', label: 'Second' },
-  { value: 'shortDate', label: 'Short Date' },
-  { value: 'shortDateShortTime', label: 'Short Date Short Time' },
-  { value: 'shortTime', label: 'ShortTime' },
-  { value: 'thousands', label: 'Thousands' },
-  { value: 'trillions', label: 'Trillions' },
-  { value: 'year', label: 'Year' },
-]

ui/src/shared/useListFormCustomDataSource.ts

@@ -3,11 +3,12 @@ import PivotGrid from 'devextreme-react/pivot-grid'
 import CustomStore from 'devextreme/data/custom_store'
 import { MutableRefObject, useCallback } from 'react'
 import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
-import { GridOptionsDto } from '../proxy/form/models'
+import { GridOptionsDto, LayoutDto } from '../proxy/form/models'
 import { GridColumnData } from '../views/list/GridColumnData'
 import { dynamicFetch } from '../services/form.service'
 import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
 import { TreeList } from 'devextreme-react'
+import { layoutTypes, ListViewLayoutType } from '@/views/admin/listForm/edit/types'
 
 const filteredGridPanelColor = 'rgba(10, 200, 10, 0.5)' // kullanici tanimli filtre ile filtrelenmis gridin paneline ait renk
 
@@ -25,17 +26,20 @@ const useListFormCustomDataSource = ({
       listFormCode: string,
       searchParams?: URLSearchParams,
       cols?: GridColumnData[],
-      chart?: boolean,
+      layout?: ListViewLayoutType | string,
     ) => {
       const store: any = new CustomStore({
-        key: gridOptions.keyFieldName,
+        key:
+          layout === layoutTypes.tree
+            ? gridOptions.treeOptionDto?.keyExpr
+            : gridOptions.keyFieldName,
         useDefaultSearch: true,
         load: async (loadOptions) => {
           const parameters = getLoadOptions(loadOptions, {
             listFormCode,
             filter: '',
             createDeleteQuery: searchParams?.get('createDeleteQuery'),
-            chart,
+            chart: layout === layoutTypes.chart,
           })
           // 1. Default filter'ı al
           const defaultFilter = searchParams?.get('filter')

ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx

@@ -14,11 +14,10 @@ import TabNav from '@/components/ui/Tabs/TabNav'
 import { IdentityRoleDto } from '@/proxy/admin/models'
 import { SelectBoxOption } from '@/shared/types'
 import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'formik'
-import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
+import { ListFormEditTabs, themeOptions } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import {
   chartPaletteOptions,

ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx

@@ -1,11 +1,10 @@
 import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
-import { tooltipFormatListOptions } from '@/shared/options'
 import { SelectBoxOption } from '@/shared/types'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
+import { ListFormEditTabs, tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import { chartSeriesDashStyleOptions } from './options'
 

ui/src/views/admin/listForm/edit/ChartTabExport.tsx

@@ -27,25 +27,21 @@ function ChartTabExport(props: FormEditProps) {
       {({ touched, errors, resetForm, isSubmitting, values }) => (
         <Form>
           <FormContainer size="sm">
-            <FormItem
+            <FormItem label="Enabled">
-              label="Enabled"
-              invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
-              errorMessage={errors.exportDto?.enabled as string}
-            >
               <Field name="exportDto.enabled" component={Checkbox} />
             </FormItem>
 
-            <FormItem
+            <FormItem label="Allow Export Selected Data">
-              label="Printing Enabled"
+              <Field name="exportDto.allowExportSelectedData" component={Checkbox} />
-              invalid={!!(errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled)}
+            </FormItem>
-              errorMessage={errors.exportDto?.printingEnabled as string}
+
-            >
+            <FormItem label="Printing Enabled">
               <Field name="exportDto.printingEnabled" component={Checkbox} />
             </FormItem>
 
             <FormItem
               label="Background Color"
-              invalid={!!(errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor)}
+              invalid={errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor}
               errorMessage={errors.exportDto?.backgroundColor}
             >
               <Field type="text" name="exportDto.backgroundColor" component={Input} />
@@ -53,11 +49,12 @@ function ChartTabExport(props: FormEditProps) {
 
             <FormItem
               label="Margin"
-              invalid={!!(errors.exportDto?.margin && touched.exportDto?.margin)}
+              invalid={errors.exportDto?.margin && touched.exportDto?.margin}
               errorMessage={errors.exportDto?.margin}
             >
               <Field type="number" name="exportDto.margin" component={Input} />
             </FormItem>
+            
             <div className="mt-4">
               <Button block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

ui/src/views/admin/listForm/edit/FormTabTree.tsx

@@ -82,6 +82,31 @@ function FormTabTree(props: FormEditProps) {
         {({ touched, errors, isSubmitting, values }) => (
           <Form>
             <FormContainer size="sm">
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.TreeKeyFieldName')}
+                invalid={errors.treeOptionDto?.keyExpr && touched.treeOptionDto?.keyExpr}
+                errorMessage={errors.treeOptionDto?.keyExpr}
+              >
+                <Field
+                  type="text"
+                  name="treeOptionDto.keyExpr"
+                  placeholder={translate('::ListForms.ListFormEdit.TreeKeyFieldName')}
+                >
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={fieldList}
+                      value={fieldList?.filter(
+                        (option) => option.value === values.treeOptionDto.keyExpr,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
               <FormItem
                 label={translate('::ListForms.ListFormEdit.ParentIdExpr')}
                 invalid={errors.treeOptionDto?.parentIdExpr && touched.treeOptionDto?.parentIdExpr}
@@ -102,8 +127,6 @@ function FormTabTree(props: FormEditProps) {
                         (option) => option.value === values.treeOptionDto.parentIdExpr,
                       )}
                       onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      menuPlacement="auto"
-                      maxMenuHeight={150}
                     />
                   )}
                 </Field>

ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx

@@ -7,7 +7,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
 import { number, object, string } from 'yup'
 import { dbSourceTypeOptions, listFormAlignmentOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
-import { tooltipFormatListOptions } from '@/shared/options'
+import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   fieldName: string().required().max(100),

ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx

@@ -1,12 +1,12 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
-import { tooltipFormatListOptions } from '@/shared/options'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { bool, object, string } from 'yup'
 import { columnSummaryTypeListOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
+import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   columnGroupingDto: object()

ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx

@@ -11,9 +11,8 @@ import {
   pivotSettingsAreaOptions,
   pivotSettingsGroupIntervalOptions,
   pivotSortDirectionOptions,
-  sortDirectionOptions,
 } from '../options'
-import { tooltipFormatListOptions } from '@/shared/options'
+import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   pivotSettingsDto: object().shape({

ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx

@@ -1,12 +1,12 @@
 import { Container } from '@/components/shared'
 import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
-import { tooltipFormatListOptions } from '@/shared/options'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { bool, object, string } from 'yup'
 import { columnSummaryTypeListOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
+import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   columnTotalSummaryDto: object()

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx

@@ -24,7 +24,6 @@ import {
   postListFormJsonRow,
   putListFormJsonRow,
 } from '@/services/admin/list-form.service'
-import { tooltipFormatListOptions } from '@/shared/options'
 import {
   chartSeriesDashStyleOptions,
   chartSeriesSelectionModeOptions,
@@ -33,6 +32,7 @@ import {
 } from '../options'
 import { ChartPanesDto, ChartValueAxisDto } from '@/proxy/admin/charts/models'
 import CreatableSelect from 'react-select/creatable'
+import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   visible: boolean().notRequired(),
@@ -55,7 +55,12 @@ const schema = object().shape({
     backgroundColor: string().notRequired(),
     customizeText: string().notRequired(),
     format: string().notRequired(),
-    font: object().notRequired(),
+    font: object().shape({
+      color: string().notRequired(),
+      family: string().notRequired(),
+      size: number().notRequired(),
+      weight: number().notRequired(),
+    }),
   }),
 
   barOverlapGroup: string().notRequired(),
@@ -478,31 +483,19 @@ function JsonRowOpDialogSeries({
                       </FormItem>
 
                       <Card className="my-2" header="Font">
-                        <FormItem label="Color" errorMessage={errors.label?.font?.color}>
+                        <FormItem label="Color">
                           <Field name="label.font.color" component={Input} />
                         </FormItem>
 
-                        <FormItem
+                        <FormItem label="Family">
-                          label="Family"
-                          invalid={!!(errors.label?.font?.family && touched.label?.font?.family)}
-                          errorMessage={errors.label?.font?.family}
-                        >
                           <Field name="label.font.family" component={Input} />
                         </FormItem>
 
-                        <FormItem
+                        <FormItem label="Size">
-                          label="Size"
-                          invalid={!!(errors.label?.font?.size && touched.label?.font?.size)}
-                          errorMessage={errors.label?.font?.size}
-                        >
                           <Field type="number" name="label.font.size" component={Input} />
                         </FormItem>
 
-                        <FormItem
+                        <FormItem label="Weight">
-                          label="Weight"
-                          invalid={!!(errors.label?.font?.weight && touched.label?.font?.weight)}
-                          errorMessage={errors.label?.font?.weight}
-                        >
                           <Field type="number" name="label.font.weight" component={Input} />
                         </FormItem>
                       </Card>

ui/src/views/admin/listForm/edit/types.ts

@@ -1,3 +1,11 @@
 export type ChartOperation = '' | 'select' | 'insert' | 'update' | 'delete'
 export type ChartDialogType = '' | 'pane' | 'serie' | 'annotation' | 'axis'
 export type ListViewLayoutType = 'grid' | 'card' | 'pivot' | 'tree' | 'chart'
+
+export const layoutTypes = {
+  grid: 'Grid',
+  card: 'Card',
+  pivot: 'Pivot',
+  tree: 'Tree',
+  chart: 'Chart',
+}

ui/src/views/form/FormButtons.tsx

@@ -21,6 +21,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
 import { usePermission } from '@/utils/hooks/usePermission'
 import { GridExtraFilterState } from '../list/Utils'
 import { usePWA } from '@/utils/hooks/usePWA'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 const FormButtons = (props: {
   isSubForm?: boolean
@@ -67,6 +68,8 @@ const FormButtons = (props: {
 
   const navigate = useNavigate()
   const { translate } = useLocalization()
+  
+  const layout = layoutTypes.grid
   const { toolbarData } = useToolbar({
     gridDto,
     listFormCode,
@@ -74,6 +77,7 @@ const FormButtons = (props: {
     getSelectedRowsData,
     refreshData,
     getFilter,
+    layout,
   })
 
   const handleDelete = async (e: any) => {

ui/src/views/form/FormEdit.tsx

@@ -6,7 +6,7 @@ import FormButtons from './FormButtons'
 import FormDevExpress from './FormDevExpress'
 import SubForms from './SubForms'
 import { FormProps } from './types'
-import { useGridData } from './useGridData'
+import { useGridData } from './useFormData'
 import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 import { Badge } from '@/components/ui'
 import { useState } from 'react'

ui/src/views/form/FormNew.tsx

@@ -8,7 +8,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import FormButtons from './FormButtons'
 import FormDevExpress from './FormDevExpress'
 import { FormProps } from './types'
-import { useGridData } from './useGridData'
+import { useGridData } from './useFormData'
 import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 import { Badge } from '@/components/ui'
 

ui/src/views/form/FormView.tsx

@@ -6,7 +6,7 @@ import FormButtons from './FormButtons'
 import FormDevExpress from './FormDevExpress'
 import SubForms from './SubForms'
 import { FormProps } from './types'
-import { useGridData } from './useGridData'
+import { useGridData } from './useFormData'
 import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 import { Badge } from '@/components/ui'
 import { useState } from 'react'

ui/src/views/form/useFormData.tsx

@@ -16,7 +16,8 @@ import { PermissionResults, RowMode, SimpleItemWithColData } from './types'
 import { EditingFormItemDto, GridDto, PlatformEditorTypes } from '@/proxy/form/models'
 import { getAccessDeniedPath } from '@/utils/routing'
 import { ROUTES_ENUM } from '@/routes/route.constant'
-import { useLookupDataSource } from '../form/useLookupDataSource'
+import { useLookupDataSource } from './useLookupDataSource'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 const useGridData = (props: {
   mode: RowMode
@@ -50,7 +51,7 @@ const useGridData = (props: {
     isSubForm,
     gridRef: undefined,
   })
-  const { createSelectDataSource } = useListFormCustomDataSource({})
+  const { createSelectDataSource } = useListFormCustomDataSource({} as any)
   const { getLookupDataSource } = useLookupDataSource({ listFormCode, isSubForm })
 
   const fetchData = async () => {
@@ -204,6 +205,7 @@ const useGridData = (props: {
       listFormCode,
       searchParams,
       cols,
+      layoutTypes.grid,
     )
     setDataSource(dataSource)
 

ui/src/views/list/Card.tsx

@@ -14,6 +14,7 @@ import { GridExtraFilterState } from './Utils'
 import { useStoreActions, useStoreState } from '@/store/store'
 import { usePWA } from '@/utils/hooks/usePWA'
 import CardItem from './CardItem'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 interface CardProps {
   listFormCode: string
@@ -112,7 +113,13 @@ const Card = (props: CardProps) => {
 
   useEffect(() => {
     if (gridDto) {
-      const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, urlSearchParams)
+      const dataSource = createSelectDataSource(
+        gridDto.gridOptions,
+        listFormCode,
+        urlSearchParams,
+        [],
+        layoutTypes.card,
+      )
       setGridDataSource(dataSource)
 
       //listFormStates

ui/src/views/list/Chart.tsx

@@ -28,6 +28,7 @@ import {
   postListFormJsonRow,
   putListFormJsonRow,
 } from '@/services/admin/list-form.service'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 interface ChartProps extends CommonProps, Meta {
   id: string
@@ -51,7 +52,7 @@ const Chart = (props: ChartProps) => {
 
   const [searchParams] = useSearchParams()
   const [chartOptions, setChartOptions] = useState<any>()
-  const { createSelectDataSource } = useListFormCustomDataSource({})
+  const { createSelectDataSource } = useListFormCustomDataSource({} as any)
 
   const params = useParams()
   const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
@@ -94,7 +95,13 @@ const Chart = (props: ChartProps) => {
       seriesDto,
     }
 
-    const dataSource = createSelectDataSource(gridOptions, listFormCode, urlSearchParams, [], true)
+    const dataSource = createSelectDataSource(
+      gridOptions,
+      listFormCode,
+      urlSearchParams,
+      [],
+      layoutTypes.chart,
+    )
 
     const options = {
       dataSource: dataSource,

ui/src/views/list/Grid.tsx

@@ -67,6 +67,7 @@ import { ImportDashboard } from '@/components/importManager/ImportDashboard'
 import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
 import { GridExtraFilterToolbar } from './GridExtraFilterToolbar'
 import { getList } from '@/services/form.service'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 interface GridProps {
   listFormCode: string
@@ -128,6 +129,7 @@ const Grid = (props: GridProps) => {
     }
   }, [searchParams])
 
+  const layout = layoutTypes.grid
   const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
     gridDto,
     listFormCode,
@@ -135,6 +137,7 @@ const Grid = (props: GridProps) => {
     getSelectedRowsData,
     refreshData,
     getFilter,
+    layout,
   })
 
   const { filterToolbarData, ...filterData } = useFilters({
@@ -503,7 +506,13 @@ const Grid = (props: GridProps) => {
       }
     })
 
-    const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams, cols)
+    const dataSource = createSelectDataSource(
+      gridDto.gridOptions,
+      listFormCode,
+      searchParams,
+      cols,
+      layoutTypes.grid,
+    )
     setGridDataSource(dataSource)
   }, [gridDto, searchParams])
 
@@ -798,8 +807,8 @@ const Grid = (props: GridProps) => {
                 }}
               >
                 <Export
-                  enabled={true}
+                  enabled={gridDto.gridOptions.exportDto?.enabled}
-                  allowExportSelectedData={false}
+                  allowExportSelectedData={gridDto.gridOptions.exportDto?.allowExportSelectedData}
                   formats={['pdf', 'xlsx', 'csv']}
                 />
                 <Editing
@@ -816,7 +825,9 @@ const Grid = (props: GridProps) => {
                   }
                   startEditAction={gridDto.gridOptions.editingOptionDto?.startEditAction}
                   popup={{
-                    title: (mode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + gridDto.gridOptions.editingOptionDto?.popup?.title),
+                    title:
+                      (mode === 'new' ? '✚ ' : '🖊️ ') +
+                      translate('::' + gridDto.gridOptions.editingOptionDto?.popup?.title),
                     showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
                     hideOnOutsideClick:
                       gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
@@ -1109,9 +1120,7 @@ const Grid = (props: GridProps) => {
                   selectAllMode={gridDto.gridOptions.selectionDto?.selectAllMode}
                   showCheckBoxesMode={gridDto.gridOptions.selectionDto?.showCheckBoxesMode}
                 ></Selection>
-                <Paging
+                <Paging defaultPageSize={gridDto.gridOptions.pageSize ?? 20} />
-                  defaultPageSize={gridDto.gridOptions.pageSize ?? 20}
-                />
                 <Pager
                   visible={gridDto.gridOptions.pagerOptionDto?.visible}
                   allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes

ui/src/views/list/Pivot.tsx

@@ -38,6 +38,7 @@ import { FaCog, FaTimes, FaUndo } from 'react-icons/fa'
 import { usePermission } from '@/utils/hooks/usePermission'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { usePWA } from '@/utils/hooks/usePWA'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 interface PivotProps {
   listFormCode: string
@@ -233,6 +234,7 @@ const Pivot = (props: PivotProps) => {
       listFormCode,
       searchParams,
       cols,
+      layoutTypes.pivot,
     )
 
     setGridDataSource(dataSource)

ui/src/views/list/Tree.tsx

@@ -2,7 +2,13 @@
 import Container from '@/components/shared/Container'
 import { Dialog, Notification, toast } from '@/components/ui'
 import { DX_CLASSNAMES } from '@/constants/app.constant'
-import { DbTypeEnum, EditingFormItemDto, GridDto, ListFormCustomizationTypeEnum, PlatformEditorTypes } from '@/proxy/form/models'
+import {
+  DbTypeEnum,
+  EditingFormItemDto,
+  GridDto,
+  ListFormCustomizationTypeEnum,
+  PlatformEditorTypes,
+} from '@/proxy/form/models'
 import {
   getListFormCustomization,
   postListFormCustomization,
@@ -54,6 +60,7 @@ import { useToolbar } from './useToolbar'
 import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
 import { GridExtraFilterToolbar } from './GridExtraFilterToolbar'
 import { getList } from '@/services/form.service'
+import { layoutTypes } from '../admin/listForm/edit/types'
 
 interface TreeProps {
   listFormCode: string
@@ -116,6 +123,7 @@ const Tree = (props: TreeProps) => {
     }
   }, [searchParams])
 
+  const layout = layoutTypes.tree
   const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
     gridDto,
     listFormCode,
@@ -125,7 +133,7 @@ const Tree = (props: TreeProps) => {
     expandAll,
     collapseAll,
     getFilter,
-    isTree: true
+    layout,
   })
 
   const { filterToolbarData, ...filterData } = useFilters({
@@ -473,7 +481,13 @@ const Tree = (props: TreeProps) => {
     const cols = getBandedColumns()
     setColumnData(cols)
 
-    const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams, cols)
+    const dataSource = createSelectDataSource(
+      gridDto.gridOptions,
+      listFormCode,
+      searchParams,
+      cols,
+      layoutTypes.tree,
+    )
     setTreeListDataSource(dataSource)
   }, [gridDto, searchParams])
 
@@ -569,8 +583,8 @@ const Tree = (props: TreeProps) => {
               height={gridDto.gridOptions.height || 'calc(100vh - 150px)'}
               width={gridDto.gridOptions.width || '100%'}
               dataStructure="plain"
-              keyExpr={gridDto.gridOptions.keyFieldName}
+              keyExpr={gridDto.gridOptions.treeOptionDto?.keyExpr}
-              parentIdExpr={gridDto.gridOptions.treeOptionDto?.parentIdExpr || 'parentId'}
+              parentIdExpr={gridDto.gridOptions.treeOptionDto?.parentIdExpr}
               hasItemsExpr={gridDto.gridOptions.treeOptionDto?.hasItemsExpr}
               rootValue={
                 gridDto.gridOptions.treeOptionDto?.rootValue === '' ||
@@ -838,11 +852,10 @@ const Tree = (props: TreeProps) => {
 
                           sortedFormDto.forEach((e: any) => {
                             if (e.itemType !== 'tabbed') {
-
                               result.push({
                                 itemType: e.itemType,
                                 colCount: e.colCount,
-                                colSpan:  e.colSpan,
+                                colSpan: e.colSpan,
                                 caption: e.caption, // Group'larda caption olmalı
                                 items: e.items
                                   ?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))

ui/src/views/list/useToolbar.tsx

@@ -8,6 +8,7 @@ import { ToolbarItem } from 'devextreme/ui/data_grid_types'
 import { useEffect, useState } from 'react'
 import { useDialogContext } from '../shared/DialogContext'
 import { usePWA } from '@/utils/hooks/usePWA'
+import { layoutTypes, ListViewLayoutType } from '../admin/listForm/edit/types'
 
 type ToolbarModalData = {
   open: boolean
@@ -23,9 +24,9 @@ const useToolbar = ({
   getSelectedRowsData,
   refreshData,
   getFilter,
+  layout,
   expandAll,
   collapseAll,
-  isTree = false,
 }: {
   gridDto?: GridDto
   listFormCode: string
@@ -33,9 +34,9 @@ const useToolbar = ({
   getSelectedRowsData: () => any
   refreshData: () => void
   getFilter: () => void
+  layout: ListViewLayoutType | string
   expandAll?: () => void
   collapseAll?: () => void
-  isTree?: boolean
 }): {
   toolbarData: ToolbarItem[]
   toolbarModalData: ToolbarModalData | undefined
@@ -80,7 +81,7 @@ const useToolbar = ({
     })
 
     // Add Expand All button for TreeList
-    if (isTree) {
+    if (layout === layoutTypes.tree && grdOpt.treeOptionDto?.parentIdExpr) {
       items.push({
         widget: 'dxButton',
         name: 'expandAllButton',