Skip to main content

BusinessTreeSelect

Provides the same functionality as BusinessSelect, but works with tree data instead of flat lists.

Define once, use conveniently across your entire application.

Here's the component initialization example:

import { BusinessTreeSelectBuilder } from 'react-admin-kit';

// Define type for code hinting
type TreeSelectType = 'org';

const BusinessTreeSelect = BusinessTreeSelectBuilder<TreeSelectType>(
{
apis: [
{
type: 'org',
api: queryOrgFunction,
},
],
})

// Usage in pages
<BusinessTreeSelect type="org" />;

Since it processes tree data, pagination is not needed. The API should return an array of objects directly, with name as display text and id as value by default.

Basic Usage​

BusinessTreeSelect is a wrapper around Antd TreeSelect, so it accepts all Antd TreeSelect properties.

Cascading​

  • This example shows department options cascading based on company selection.

  • Use queryParams to pass parameters to the API.

Clear Cache​

Use clearTreeSelectCache(type: string) to clear cache. Omitting type clears all type caches.

onLoad Event​

Triggered when dropdown data finishes loading. This event is useful for certain scenarios, such as auto-selecting the first item.

API​

BusinessTreeSelectBuilder​

PropertyDescriptionTypeDefault
apisdefine the business tree select[]
defaultPropsdefault props{}

ApiType​

PropertyDescriptionTypeDefault
apiapi request for options data(params: { [key: string]: any; }) => Promise<any>'-'
typebusiness tree select typestring'-'
defaultPropsdefault props (higher priority than Builder-level settings)'-'

BusinessTreeSelect​

BusinessTreeSelect type is a combination of BusinessTreeSelectSelfType and TreeSelectProps.

BusinessTreeSelectSelfType​

PropertyDescriptionTypeDefault
typebusiness tree select typestringRequired
nodeDisableddisable option.((node: any) => boolean)--
queryParamspass params to api request. see demo.Record<string, any>--
noCachedisable cache (higher priority)booleanfalse
onLoadcallback after options data finish request((options: any) => void)-