Filter, Sorting ve Row tanımlamaları yapıldı.

2025-10-08 23:35:47 +03:00 · 2025-10-08 23:35:47 +03:00 · cc63d222d1
commit cc63d222d1
parent 3d66c26873
20 changed files with 379 additions and 126 deletions
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs
@ -11,7 +11,7 @@ public class GridColumnOptionDto
    /// <summary> kullanicinin kolonlarin yerini degistirebilmesi
    /// </summary>
    public bool AllowColumnReordering { get; set; } = false;
-    public bool AllowColumnResizing { get; set; }
+    public bool AllowColumnResizing { get; set; } = true;
    /// <summary> alabilecegi degerler: 'nextColumn', 'widget'
    /// </summary>
    public string ColumnResizingMode { get; set; } = "nextColumn";
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs
@ -41,6 +41,20 @@ public class GridOptionsDto : AuditedEntityDto<Guid>
        set { FilterRowJson = JsonSerializer.Serialize(value); }
    }

+    [JsonIgnore]
+    public string RowJson { get; set; }               // Filtreleme yapilabilir mi?
+    public GridRowDto RowDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(RowJson))
+                return JsonSerializer.Deserialize<GridRowDto>(RowJson);
+
+            return new GridRowDto();
+        }
+        set { RowJson = JsonSerializer.Serialize(value); }
+    }
+
    [JsonIgnore]
    public string HeaderFilterJson { get; set; }            // header ile Filtreleme yapilabilir mi?
    public GridHeaderFilterDto HeaderFilterDto
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridRowDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridRowDto.cs
@ -0,0 +1,8 @@
+namespace Kurs.Platform.ListForms;
+
+public class GridRowDto
+{
+    public string RowHeight { get; set; } = "auto";
+    public string WhiteSpace { get; set; } = "normal";
+    public string OverflowWrap { get; set; } = "break-word";
+}
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
@ -38,7 +38,9 @@ public class ListFormEditTabs
        public const string EditForm = "edit.form";
        public const string EditingFormFieldsJsonRow = "edit.formFields";
    }
+    public const string SortingForm = "sorting";
    public const string FilterForm = "filter";
+    public const string RowForm = "row";
    public const string SearchForm = "search";
    public const string GroupForm = "group";
    public const string SelectForm = "select";
--- a/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs
@ -111,13 +111,20 @@ public class ListFormsAppService : CrudAppService<
        {
            item.EditingOptionJson = JsonSerializer.Serialize(input.EditingOptionDto);
        }
-        else if (input.EditType == ListFormEditTabs.FilterForm)
+        else if (input.EditType == ListFormEditTabs.SortingForm)
        {
            item.SortMode = input.SortMode;
+        }
+        else if (input.EditType == ListFormEditTabs.FilterForm)
+        {
            item.FilterRowJson = JsonSerializer.Serialize(input.FilterRowDto);
            item.HeaderFilterJson = JsonSerializer.Serialize(input.HeaderFilterDto);
            item.FilterPanelJson = JsonSerializer.Serialize(input.FilterPanelDto);
        }
+        else if (input.EditType == ListFormEditTabs.RowForm)
+        {
+            item.RowJson = JsonSerializer.Serialize(input.RowDto);
+        }
        else if (input.EditType == ListFormEditTabs.SearchForm)
        {
            item.SearchPanelJson = JsonSerializer.Serialize(input.SearchPanelDto);
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/TenantData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/TenantData.json
@ -4945,9 +4945,21 @@
        },
        {
            "resourceName": "Platform",
-            "key": "ListForms.ListFormEdit.TabFilteringSorting",
-            "en": "Filtering & Sorting",
-            "tr": "Filtreleme & Sıralama"
+            "key": "ListForms.ListFormEdit.TabSorting",
+            "en": "Sorting",
+            "tr": "Sıralama"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.TabFiltering",
+            "en": "Filtering",
+            "tr": "Filtreleme"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.TabRow",
+            "en": "Row",
+            "tr": "Satır"
        },
        {
            "resourceName": "Platform",
@ -6017,6 +6029,30 @@
            "en": "Filter Panel",
            "tr": "Filter Panel"
        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.FilteringSortingRowProps",
+            "en": "Row",
+            "tr": "Satır"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.FilteringSortingRowHeight",
+            "en": "Row Height",
+            "tr": "Satır Yüksekliği"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.FilteringSortingRowWhiteSpace",
+            "en": "White Space",
+            "tr": "Beyaz Alan"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.FilteringSortingRowOverflowWrap",
+            "en": "Overflow Wrap",
+            "tr": "Taşma Sarma"
+        },
        {
            "resourceName": "Platform",
            "key": "ListForms.ListFormEdit.FilteringSortingFilterPanelFilterEnabled",
--- a/api/src/Kurs.Platform.Domain/Entities/Host/ListForm/ListForm.cs
+++ b/api/src/Kurs.Platform.Domain/Entities/Host/ListForm/ListForm.cs
@ -33,6 +33,7 @@ public class ListForm : FullAuditedEntity<Guid>
    public string ColumnOptionJson { get; set; }
    public string PivotOptionJson { get; set; }
    public string FilterRowJson { get; set; }               // Filtre ayarlari, Json olarak tutulur, donus sinifi FilterRowDto
+    public string RowJson { get; set; }                     // Row ayarları, Json olarak tutulur, donus sinifi FilterRowDto
    public string HeaderFilterJson { get; set; }            // Header filtreleme ayarlari, Json olarak tutulur
    public string FilterPanelJson { get; set; }             // Filtre paneli Json verileri
    public string SearchPanelJson { get; set; }             // Arama paneli Json verileri
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251008192259_Initial.Designer.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251008192259_Initial.Designer.cs
@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
 namespace Kurs.Platform.Migrations
 {
    [DbContext(typeof(PlatformDbContext))]
-    [Migration("20251008124621_Initial")]
+    [Migration("20251008192259_Initial")]
    partial class Initial
    {
        /// <inheritdoc />
@ -3815,6 +3815,9 @@ namespace Kurs.Platform.Migrations
                        .HasMaxLength(256)
                        .HasColumnType("nvarchar(256)");

+                    b.Property<string>("RowJson")
+                        .HasColumnType("nvarchar(max)");
+
                    b.Property<string>("ScrollBarJson")
                        .HasColumnType("text");

--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251008192259_Initial.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20251008192259_Initial.cs
@ -1580,6 +1580,7 @@ namespace Kurs.Platform.Migrations
                    ColumnOptionJson = table.Column<string>(type: "text", nullable: true),
                    PivotOptionJson = table.Column<string>(type: "text", nullable: true),
                    FilterRowJson = table.Column<string>(type: "text", nullable: true),
+                    RowJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                    HeaderFilterJson = table.Column<string>(type: "text", nullable: true),
                    FilterPanelJson = table.Column<string>(type: "text", nullable: true),
                    SearchPanelJson = table.Column<string>(type: "text", nullable: true),
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
@ -3812,6 +3812,9 @@ namespace Kurs.Platform.Migrations
                        .HasMaxLength(256)
                        .HasColumnType("nvarchar(256)");

+                    b.Property<string>("RowJson")
+                        .HasColumnType("nvarchar(max)");
+
                    b.Property<string>("ScrollBarJson")
                        .HasColumnType("text");

--- a/ui/src/components/ui/Alert/Alert.tsx
+++ b/ui/src/components/ui/Alert/Alert.tsx
@ -119,7 +119,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
        )
    }

-    const alertDefaultClass = 'p-4 relative flex'
+    const alertDefaultClass = 'p-2 relative flex'

    const alertClass = classNames(
        'alert',
--- a/ui/src/proxy/admin/list-form/options.ts
+++ b/ui/src/proxy/admin/list-form/options.ts
@ -31,7 +31,9 @@ export const ListFormEditTabs = {
    EditForm: 'edit.form',
    EditingFormFieldsJsonRow: 'edit.formFields',
  },
+  SortingForm: 'sorting',
  FilterForm: 'filter',
+  RowForm: 'row',
  SearchForm: 'search',
  GroupForm: 'group',
  SelectForm: 'select',
@ -76,7 +78,9 @@ export const tabVisibilityConfig: Record<string, string[]> = {
      'permissions',
      'commands',
      'edit',
+      'sortingForm',
      'filterRow',
+      'rowForm',
      'search',
      'group',
      'select',
--- a/ui/src/proxy/form/models.ts
+++ b/ui/src/proxy/form/models.ts
@ -326,6 +326,12 @@ export interface TagBoxOptionsDto {
  acceptCustomValue: boolean
 }

+export interface RowDto {
+  rowHeight: string
+  whiteSpace: string
+  overflowWrap: string
+}
+
 export interface FilterPanelDto {
  visible: boolean
  texts: FilterPanelTextsDto
@ -453,6 +459,8 @@ export interface GridOptionsDto extends AuditedEntityDto<string> {
  headerFilterDto: GridHeaderFilterDto
  filterPanelJson?: string
  filterPanelDto: FilterPanelDto
+  rowJson?: string
+  rowDto: RowDto
  searchPanelJson?: string
  searchPanelDto: SearchPanelDto
  groupPanelJson?: string
--- a/ui/src/views/admin/listForm/edit/FormEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormEdit.tsx
@ -47,6 +47,8 @@ import ChartTabSeries from './ChartTabSeries'
 import ChartTabAxis from './ChartTabAxis'
 import ChartTabPanes from './ChartTabPanes'
 import { tabVisibilityConfig } from '@/proxy/admin/list-form/options'
+import FormTabSorting from './FormTabSorting'
+import FormTabRow from './FormTabRow'

 export interface FormEditProps {
  onSubmit: (
@ -180,7 +182,7 @@ const FormEdit = () => {
            </Link>
          </h4>
          {listFormValues.isTenant && (
-            <Alert showIcon className="mb-4" type="warning">
+            <Alert showIcon className="my-2" type="warning">
              Bu bir MULTI TENANT form'dur, veri kaybı olmaması için, sorgularda TENANTID
              parametresini kullanmayı unutmayınız.
            </Alert>
@ -206,10 +208,14 @@ const FormEdit = () => {
          {visibleTabs.includes('edit') && (
            <TabNav value="edit">{translate('::ListForms.ListFormEdit.TabEditing')}</TabNav>
          )}
+          {visibleTabs.includes('sortingForm') && (
+            <TabNav value="sortingForm">{translate('::ListForms.ListFormEdit.TabSorting')}</TabNav>
+          )}
          {visibleTabs.includes('filterRow') && (
-            <TabNav value="filterRow">
-              {translate('::ListForms.ListFormEdit.TabFilteringSorting')}
-            </TabNav>
+            <TabNav value="filterRow">{translate('::ListForms.ListFormEdit.TabFiltering')}</TabNav>
+          )}
+          {visibleTabs.includes('rowForm') && (
+            <TabNav value="rowForm">{translate('::ListForms.ListFormEdit.TabRow')}</TabNav>
          )}
          {visibleTabs.includes('search') && (
            <TabNav value="search">{translate('::ListForms.ListFormEdit.TabSearch')}</TabNav>
@ -302,58 +308,7 @@ const FormEdit = () => {
          )}
        </TabList>

-        {/* <TabList className="flex-wrap border-b mb-2 bg-slate-50">
-          <TabNav value="details">{translate('::ListForms.ListFormEdit.TabDetails')}</TabNav>
-          <TabNav value="database">{translate('::ListForms.ListFormEdit.TabDatabase')}</TabNav>
-          <TabNav value="permissions">
-            {translate('::ListForms.ListFormEdit.TabPermissions')}
-          </TabNav>
-          <TabNav value="commands">{translate('::ListForms.ListFormEdit.TabCommands')}</TabNav>
-          <TabNav value="edit">{translate('::ListForms.ListFormEdit.TabEditing')}</TabNav>
-          <TabNav value="filterRow">
-            {translate('::ListForms.ListFormEdit.TabFilteringSorting')}
-          </TabNav>
-          <TabNav value="search">{translate('::ListForms.ListFormEdit.TabSearch')}</TabNav>
-          <TabNav value="group">{translate('::ListForms.ListFormEdit.TabGrouping')}</TabNav>
-          <TabNav value="select">{translate('::ListForms.ListFormEdit.TabSelection')}</TabNav>
-          <TabNav value="columns">{translate('::ListForms.ListFormEdit.TabColumns')}</TabNav>
-          <TabNav value="pivots">{translate('::ListForms.ListFormEdit.TabPivots')}</TabNav>
-          <TabNav value="pager">{translate('::ListForms.ListFormEdit.TabPaging')}</TabNav>
-          <TabNav value="state">{translate('::ListForms.ListFormEdit.TabState')}</TabNav>
-          <TabNav value="extrafilter">{translate('::ListForms.ListFormEdit.ExtraFilters')}</TabNav>
-          <TabNav value="fields">{translate('::ListForms.ListFormEdit.TabFields')}</TabNav>
-          <TabNav value="customization">
-            {translate('::ListForms.ListFormEdit.TabCustomization')}
-          </TabNav>
-          <TabNav value="editForm">{translate('::ListForms.ListFormEdit.EditingForm')}</TabNav>
-          <TabNav value="subForms">{translate('::ListForms.ListFormEdit.TabSubForms')}</TabNav>
-          <TabNav value="widget">{translate('::ListForms.ListFormEdit.TabWidgets')}</TabNav>
-          <TabNav value="commonSettings">
-            {translate('::ListForms.ListFormEdit.TabChartCommon')}
-          </TabNav>
-          <TabNav value="series">{translate('::ListForms.ListFormEdit.TabChartSeries')}</TabNav>
-          <TabNav value="axis">{translate('::ListForms.ListFormEdit.TabChartAxis')}</TabNav>
-          <TabNav value="panes">{translate('::ListForms.ListFormEdit.TabChartPanes')}</TabNav>
-          <TabNav value="animationsOptions">
-            {translate('::ListForms.ListFormEdit.TabChartAnimation')}
-          </TabNav>
-          <TabNav value="annotations">
-            {translate('::ListForms.ListFormEdit.TabChartAnnotations')}
-          </TabNav>
-          <TabNav value="zoomAndPanSettings">
-            {translate('::ListForms.ListFormEdit.TabChartZoomAndPan')}
-          </TabNav>
-          <TabNav value="legendSettings">
-            {translate('::ListForms.ListFormEdit.TabChartLegend')}
-          </TabNav>
-          <TabNav value="exportSettings">
-            {translate('::ListForms.ListFormEdit.TabChartExport')}
-          </TabNav>
-          <TabNav value="crosshairOptions">
-            {translate('::ListForms.ListFormEdit.TabChartCrosshair')}
-          </TabNav>
-        </TabList> */}
-        <TabContent value="details">
+        <TabContent value="details" className="px-2">
          <FormTabDetails
            onSubmit={onSubmit}
            roleList={roleList}
@ -361,52 +316,58 @@ const FormEdit = () => {
            onFormTypeChange={setActiveFormType}
          />
        </TabContent>
-        <TabContent value="database">
+        <TabContent value="database" className="px-2">
          <FormTabDatabase onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="permissions">
+        <TabContent value="permissions" className="px-2">
          <FormTabPermissions onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="commands">
+        <TabContent value="commands" className="px-2">
          <FormTabCommands />
        </TabContent>
-        <TabContent value="edit">
+        <TabContent value="edit" className="px-2">
          <FormTabEdit listFormCode={listFormCode} onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="editForm">
+        <TabContent value="editForm" className="px-2">
          <FormTabEditForm listFormCode={listFormCode} />
        </TabContent>
-        <TabContent value="filterRow">
+        <TabContent value="sortingForm" className="px-2">
+          <FormTabSorting onSubmit={onSubmit} />
+        </TabContent>
+        <TabContent value="filterRow" className="px-2">
          <FormTabFilters onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="search">
+        <TabContent value="rowForm" className="px-2">
+          <FormTabRow onSubmit={onSubmit} />
+        </TabContent>
+        <TabContent value="search" className="px-2">
          <FormTabSearch onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="group">
+        <TabContent value="group" className="px-2">
          <FormTabGroup onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="select">
+        <TabContent value="select" className="px-2">
          <FormTabSelect onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="columns">
+        <TabContent value="columns" className="px-2">
          <FormTabColumns onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="pivots">
+        <TabContent value="pivots" className="px-2">
          <FormTabPivots onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="pager">
+        <TabContent value="pager" className="px-2">
          <FormTabPager onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="state">
+        <TabContent value="state" className="px-2">
          <FormTabState onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="subForms">
+        <TabContent value="subForms" className="px-2">
          <FormTabSubForm />
        </TabContent>
-        <TabContent value="widget">
+        <TabContent value="widget" className="px-2">
          <FormTabWidgets listFormCode={listFormCode} />
        </TabContent>
-        <TabContent value="fields">
+        <TabContent value="fields" className="px-2">
          <FormFields
            listFormCode={listFormCode}
            langOptions={langOptions}
@ -414,7 +375,7 @@ const FormEdit = () => {
            userList={userList}
          ></FormFields>
        </TabContent>
-        <TabContent value="customization">
+        <TabContent value="customization" className="px-2">
          <FormCustomization
            listFormCode={listFormCode}
            items={customizations}
@ -423,37 +384,37 @@ const FormEdit = () => {
            getListFormCustomizations={getCustomizations}
          ></FormCustomization>
        </TabContent>
-        <TabContent value="extrafilter">
+        <TabContent value="extrafilter" className="px-2">
          <FormTabExtraFilters listFormCode={listFormCode} />
        </TabContent>
-        <TabContent value="commonSettings">
+        <TabContent value="commonSettings" className="px-2">
          <ChartTabCommonSettings onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="series">
+        <TabContent value="series" className="px-2">
          <ChartTabSeries onSubmit={onSubmit} listFormCode={listFormCode} />
        </TabContent>
-        <TabContent value="panes">
+        <TabContent value="panes" className="px-2">
          <ChartTabPanes onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="animationsOptions">
+        <TabContent value="animationsOptions" className="px-2">
          <ChartTabAnimation onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="annotations">
+        <TabContent value="annotations" className="px-2">
          <ChartTabAnnotations onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="axis">
+        <TabContent value="axis" className="px-2">
          <ChartTabAxis onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="zoomAndPanSettings">
+        <TabContent value="zoomAndPanSettings" className="px-2">
          <ChartTabZoomAndPan onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="legendSettings">
+        <TabContent value="legendSettings" className="px-2">
          <ChartTabLegend onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="exportSettings">
+        <TabContent value="exportSettings" className="px-2">
          <ChartTabExport onSubmit={onSubmit} />
        </TabContent>
-        <TabContent value="crosshairOptions">
+        <TabContent value="crosshairOptions" className="px-2">
          <ChartTabCrosshair onSubmit={onSubmit} />
        </TabContent>
      </Tabs>
--- a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
@ -7,7 +7,6 @@ import {
  FormItem,
  Input,
  Select,
-  Tabs,
 } from '@/components/ui'
 import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
 import { useStoreState } from '@/store'
--- a/ui/src/views/admin/listForm/edit/FormTabFilters.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabFilters.tsx
@ -16,11 +16,17 @@ import { ApplyFilterMode } from 'devextreme/common/grids'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import * as Yup from 'yup'
 import { FormEditProps } from './FormEdit'
-import { applyFilterOptions, sortModeOptions } from './options'
+import {
+  applyFilterOptions,
+  overflowWrapOptions,
+  sortModeOptions,
+  whiteSpaceOptions,
+} from './options'
 import TabList from '@/components/ui/Tabs/TabList'
 import TabNav from '@/components/ui/Tabs/TabNav'
 import TabContent from '@/components/ui/Tabs/TabContent'
 import { GridOptionsSortModeEnum } from '@/proxy/form/models'
+import { SelectBoxOption } from '@/shared/types'

 const validationSchema = Yup.object().shape({})

@ -33,7 +39,7 @@ function FormTabFilters(props: FormEditProps) {
  }

  return (
-    <Container className="grid xl:grid-cols-3">
+    <Container className="grid xl:grid-cols-2">
      <Formik
        initialValues={listFormValues}
        validationSchema={validationSchema}
@ -44,11 +50,8 @@ function FormTabFilters(props: FormEditProps) {
        {({ touched, errors, isSubmitting, values }) => (
          <Form>
            <FormContainer size="sm">
-              <Tabs defaultValue="tabSorting">
+              <Tabs defaultValue="tabRowFilter">
                <TabList className="flex-wrap my-3">
-                  <TabNav value="tabSorting">
-                    {translate('::ListForms.ListFormEdit.FilteringSorting')}
-                  </TabNav>
                  <TabNav value="tabRowFilter">
                    {translate('::ListForms.ListFormEdit.FilteringSortingFilterRow')}
                  </TabNav>
@ -59,33 +62,6 @@ function FormTabFilters(props: FormEditProps) {
                    {translate('::ListForms.ListFormEdit.FilteringSortingFilterPanel')}
                  </TabNav>
                </TabList>
-                <TabContent value="tabSorting">
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.FilteringSortingSortMode')}
-                    invalid={errors.sortMode && touched.sortMode}
-                    errorMessage={errors.sortMode}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="sortMode"
-                      placeholder={translate('::ListForms.ListFormEdit.FilteringSortingSortMode')}
-                    >
-                      {({ field, form }: FieldProps<GridOptionsSortModeEnum>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={sortModeOptions}
-                          value={sortModeOptions?.filter(
-                            (option) => option.value === values.sortMode,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                </TabContent>
                <TabContent value="tabRowFilter">
                  <FormItem
                    label={translate('::ListForms.ListFormEdit.FilteringSortingFilterRowVisible')}
--- a/ui/src/views/admin/listForm/edit/FormTabRow.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabRow.tsx
@ -0,0 +1,119 @@
+import { Container } from '@/components/shared'
+import { Button, Checkbox, FormContainer, FormItem, Input, Select, Tabs } from '@/components/ui'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
+import { useStoreState } from '@/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { ApplyFilterMode } from 'devextreme/common/grids'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import * as Yup from 'yup'
+import { FormEditProps } from './FormEdit'
+import {
+  applyFilterOptions,
+  overflowWrapOptions,
+  sortModeOptions,
+  whiteSpaceOptions,
+} from './options'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import { GridOptionsSortModeEnum } from '@/proxy/form/models'
+import { SelectBoxOption } from '@/shared/types'
+
+const validationSchema = Yup.object().shape({})
+
+function FormTabRow(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.lists.values)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Container className="grid xl:grid-cols-2">
+      <Formik
+        initialValues={listFormValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, formikHelpers) => {
+          await props.onSubmit(ListFormEditTabs.RowForm, values, formikHelpers)
+        }}
+      >
+        {({ touched, errors, isSubmitting, values }) => (
+          <Form>
+            <FormContainer size="sm">
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.FilteringSortingRowHeight')}
+                invalid={errors.rowDto?.rowHeight && touched.rowDto?.rowHeight}
+                errorMessage={errors.rowDto?.rowHeight}
+              >
+                <Field
+                  name="rowDto.rowHeight"
+                  placeholder={translate('::ListForms.ListFormEdit.FilteringSortingRowHeight')}
+                  component={Input}
+                />
+              </FormItem>
+
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.FilteringSortingRowWhiteSpace')}
+                invalid={errors.rowDto?.whiteSpace && touched.rowDto?.whiteSpace}
+                errorMessage={errors.rowDto?.whiteSpace}
+              >
+                <Field
+                  type="text"
+                  name="rowDto.whiteSpace"
+                  placeholder={translate('::ListForms.ListFormEdit.FilteringSortingRowWhiteSpace')}
+                >
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={whiteSpaceOptions}
+                      value={whiteSpaceOptions?.filter(
+                        (option) => option.value === values.rowDto.whiteSpace,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.FilteringSortingRowOverflowWrap')}
+                invalid={errors.rowDto?.overflowWrap && touched.rowDto?.overflowWrap}
+                errorMessage={errors.rowDto?.overflowWrap}
+              >
+                <Field
+                  type="text"
+                  name="rowDto.overflowWrap"
+                  placeholder={translate(
+                    '::ListForms.ListFormEdit.FilteringSortingRowOverflowWrap',
+                  )}
+                >
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={overflowWrapOptions}
+                      value={overflowWrapOptions?.filter(
+                        (option) => option.value === values.rowDto.overflowWrap,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </FormContainer>
+          </Form>
+        )}
+      </Formik>
+    </Container>
+  )
+}
+
+export default FormTabRow
--- a/ui/src/views/admin/listForm/edit/FormTabSorting.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabSorting.tsx
@ -0,0 +1,88 @@
+import { Container } from '@/components/shared'
+import {
+  Button,
+  Card,
+  Checkbox,
+  FormContainer,
+  FormItem,
+  Input,
+  Select,
+  Tabs,
+} from '@/components/ui'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
+import { useStoreState } from '@/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { ApplyFilterMode } from 'devextreme/common/grids'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import * as Yup from 'yup'
+import { FormEditProps } from './FormEdit'
+import {
+  applyFilterOptions,
+  overflowWrapOptions,
+  sortModeOptions,
+  whiteSpaceOptions,
+} from './options'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import { GridOptionsSortModeEnum } from '@/proxy/form/models'
+import { SelectBoxOption } from '@/shared/types'
+
+const validationSchema = Yup.object().shape({})
+
+function FormTabSorting(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.lists.values)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Container className="grid xl:grid-cols-2">
+      <Formik
+        initialValues={listFormValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, formikHelpers) => {
+          await props.onSubmit(ListFormEditTabs.SortingForm, values, formikHelpers)
+        }}
+      >
+        {({ touched, errors, isSubmitting, values }) => (
+          <Form>
+            <FormContainer size="sm">
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.FilteringSortingSortMode')}
+                invalid={errors.sortMode && touched.sortMode}
+                errorMessage={errors.sortMode}
+              >
+                <Field
+                  type="text"
+                  autoComplete="off"
+                  name="sortMode"
+                  placeholder={translate('::ListForms.ListFormEdit.FilteringSortingSortMode')}
+                >
+                  {({ field, form }: FieldProps<GridOptionsSortModeEnum>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={sortModeOptions}
+                      value={sortModeOptions?.filter((option) => option.value === values.sortMode)}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <Button block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </FormContainer>
+          </Form>
+        )}
+      </Formik>
+    </Container>
+  )
+}
+
+export default FormTabSorting
--- a/ui/src/views/admin/listForm/edit/options.ts
+++ b/ui/src/views/admin/listForm/edit/options.ts
@ -27,6 +27,23 @@ import {
 import { enumToList } from '../../../../utils/enumUtils'
 import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'

+export const overflowWrapOptions = [
+  { value: 'normal', label: 'Normal' },
+  { value: 'break-word', label: 'Break Word' },
+  { value: 'none', label: 'None' },
+  { value: 'break-all', label: 'Break All' },
+  { value: 'keep-all', label: 'Keep All' },
+]
+
+export const whiteSpaceOptions = [
+  { value: 'normal', label: 'Normal' },
+  { value: 'nowrap', label: 'No Wrap' },
+  { value: 'pre', label: 'Pre' },
+  { value: 'pre-line', label: 'Pre Line' },
+  { value: 'pre-wrap', label: 'Pre Wrap' },
+  { value: 'break-word', label: 'Break Word' },
+]
+
 export const sortModeOptions = [
  { value: 'none', label: 'None' },
  { value: 'single', label: 'Single' },
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@ -639,6 +639,13 @@ const Grid = (props: GridProps) => {
                columnAutoWidth={gridDto.gridOptions.columnOptionDto?.columnAutoWidth}
                rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
                rowAlternationEnabled={gridDto.gridOptions.columnOptionDto?.rowAlternationEnabled}
+                onRowPrepared={(e) => {
+                  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
+                  }
+                }}
                hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
                columnHidingEnabled={gridDto.gridOptions.columnOptionDto?.columnHidingEnabled}
                focusedRowEnabled={gridDto.gridOptions.columnOptionDto?.focusedRowEnabled}
@ -714,7 +721,6 @@ const Grid = (props: GridProps) => {
                      }
                    }

-                    // 🔥 Butonların onClick eventlerini wrap et
                    if (editor.editorOptions?.buttons) {
                      editor.editorOptions.buttons = editor.editorOptions.buttons.map(
                        (btn: any) => {