TreeList üzerinde Expand ve Collapse özelliği
This commit is contained in:
parent
950fbf2a41
commit
50fe2907d1
3 changed files with 82 additions and 15 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue