TreeList üzerinde Expand ve Collapse özelliği

This commit is contained in:
Sedat Öztürk 2025-11-08 03:16:55 +03:00
parent 950fbf2a41
commit 50fe2907d1
3 changed files with 82 additions and 15 deletions

View file

@ -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",

View file

@ -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
enabled={true}
defaultPageSize={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
?.split(',')
.map((a: any) => +a)?.[0] ?? 20}
/>
<Paging enabled={true} defaultPageSize={gridDto.gridOptions.pageSize ?? 10} />
<Pager
visible={gridDto.gridOptions.pagerOptionDto?.visible ?? true}
allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
allowedPageSizes={
gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
?.split(',')
.map((a: any) => +a) ?? [10, 20, 50, 100]}
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>

View file

@ -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
@ -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({