TreeList üzerinde Expand ve Collapse özelliği

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

@@ -5203,6 +5203,18 @@
             "en": "Recursive Selection",
             "tr": "Özyinelemeli Seçim"
         },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.CollapseAll",
+            "en": "Collapse All",
+            "tr": "Tümünü Daralt"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListFormEdit.ExpandAll",
+            "en": "Expand All",
+            "tr": "Tümünü Genişlet"
+        },
         {
             "resourceName": "Platform",
             "key": "ListForms.ListFormEdit.AutoExpandAll",

ui/src/views/list/Tree.tsx

@@ -109,6 +109,8 @@ const Tree = (props: TreeProps) => {
     getSelectedRowKeys,
     getSelectedRowsData,
     refreshData,
+    expandAll,
+    collapseAll,
     getFilter,
   })
 
@@ -154,6 +156,26 @@ const Tree = (props: TreeProps) => {
     return tree.getSelectedRowsData()
   }
 
+  function expandAll() {
+    const tree = gridRef.current?.instance
+    if (!tree) return
+    tree.forEachNode((node: any) => {
+      if (node.hasChildren) {
+        tree.expandRow(node.key)
+      }
+    })
+  }
+
+  function collapseAll() {
+    const tree = gridRef.current?.instance
+    if (!tree) return
+    tree.forEachNode((node: any) => {
+      if (node.hasChildren) {
+        tree.collapseRow(node.key)
+      }
+    })
+  }
+
   function refreshData() {
     gridRef.current?.instance.refresh()
   }
@@ -645,7 +667,9 @@ const Tree = (props: TreeProps) => {
                   setExtraFilters={setExtraFilters}
                 />
               </Template>
-              <Toolbar visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0}>
+              <Toolbar
+                visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0}
+              >
                 {toolbarData?.map((item) => (
                   <Item key={item.name} {...item}></Item>
                 ))}
@@ -672,20 +696,21 @@ const Tree = (props: TreeProps) => {
                 mode={gridDto.gridOptions.selectionDto?.mode}
                 recursive={gridDto.gridOptions.treeOptionDto?.recursiveSelection || false}
               ></Selection>
-              <Paging
+              <Paging enabled={true} defaultPageSize={gridDto.gridOptions.pageSize ?? 10} />
-                enabled={true}
-                defaultPageSize={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
-                  ?.split(',')
-                  .map((a: any) => +a)?.[0] ?? 20}
-              />
               <Pager
                 visible={gridDto.gridOptions.pagerOptionDto?.visible ?? true}
-                allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
+                allowedPageSizes={
-                  ?.split(',')
+                  gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
-                  .map((a: any) => +a) ?? [10, 20, 50, 100]}
+                    ?.split(',')
-                showPageSizeSelector={gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector ?? true}
+                    .map((a: any) => +a) ?? [10, 20, 50, 100]
+                }
+                showPageSizeSelector={
+                  gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector ?? true
+                }
                 showInfo={gridDto.gridOptions.pagerOptionDto?.showInfo ?? true}
-                showNavigationButtons={gridDto.gridOptions.pagerOptionDto?.showNavigationButtons ?? true}
+                showNavigationButtons={
+                  gridDto.gridOptions.pagerOptionDto?.showNavigationButtons ?? true
+                }
                 infoText={gridDto.gridOptions.pagerOptionDto?.infoText}
                 displayMode={gridDto.gridOptions.pagerOptionDto?.displayMode ?? 'full'}
               ></Pager>
@@ -696,7 +721,7 @@ const Tree = (props: TreeProps) => {
               <ColumnFixing
                 enabled={gridDto.gridOptions.columnOptionDto?.columnFixingEnabled}
               ></ColumnFixing>
-              <Scrolling 
+              <Scrolling
                 mode="virtual"
                 rowRenderingMode="virtual"
                 showScrollbar="always"

ui/src/views/list/useToolbar.tsx

@@ -24,6 +24,8 @@ const useToolbar = ({
   getSelectedRowsData,
   refreshData,
   getFilter,
+  expandAll,
+  collapseAll,
 }: {
   gridDto?: GridDto
   listFormCode: string
@@ -31,6 +33,8 @@ const useToolbar = ({
   getSelectedRowsData: () => any
   refreshData: () => void
   getFilter: () => void
+  expandAll?: () => void
+  collapseAll?: () => void
 }): {
   toolbarData: ToolbarItem[]
   toolbarModalData: ToolbarModalData | undefined
@@ -54,7 +58,7 @@ const useToolbar = ({
       return
     }
 
-        // Add searchPanel
+    // Add searchPanel
     if (grdOpt.searchPanelDto?.visible) {
       items.push({
         locateInMenu: 'auto',
@@ -62,7 +66,7 @@ const useToolbar = ({
         name: 'searchPanel',
       })
     }
-    
+
     items.push({
       widget: 'dxButton',
       name: 'refreshButton',
@@ -74,6 +78,32 @@ const useToolbar = ({
       location: 'after',
     })
 
+    // Add Expand All button for TreeList
+    if (gridDto?.gridOptions.layoutDto.defaultLayout === 'tree') {
+      items.push({
+        widget: 'dxButton',
+        name: 'expandAllButton',
+        options: {
+          icon: 'plus',
+          text: translate('::ListForms.ListFormEdit.ExpandAll'),
+          onClick: expandAll,
+        },
+        location: 'after',
+      })
+
+      // Add Collapse All button for TreeList
+      items.push({
+        widget: 'dxButton',
+        name: 'collapseAllButton',
+        options: {
+          icon: 'minus',
+          text: translate('::ListForms.ListFormEdit.CollapseAll'),
+          onClick: collapseAll,
+        },
+        location: 'after',
+      })
+    }
+
     // field chooser panel
     if (grdOpt.columnOptionDto?.columnChooserEnabled) {
       items.push({