R
Refine

ask-any-question

How to customize useSelect hooks optionLabel with multiple value?

Ssolid-orange11/3/2022
I have implemented useSelect hook on create form and which is working fine. But now there is an requirement to show the label with combining multiple field. For eg: I have a data as
{
[
{
id: 1,
title: "E-business",
code: "3234",
},
{
id: 2,
title: "Virtual Invoice Avon",
code: "4232",
},
{
id: 3,
title: "Unbranded",
code: "4232",
},
];
}
{
[
{
id: 1,
title: "E-business",
code: "3234",
},
{
id: 2,
title: "Virtual Invoice Avon",
code: "4232",
},
{
id: 3,
title: "Unbranded",
code: "4232",
},
];
}
Now I want my optionLabel to be the combination of title and code as E-business (3234), Virtual Invoice Avon (4232), and Unbranded (4232). Is there a way to achieve this? And also maybe if there is a possibility to pass a react node with custom design layout then that would be amazing 😍
OOmer11/3/2022
Hey @dipbazz 👋 , I hope you are very well. Can you check this thread? https://discord.com/channels/837692625737613362/940873134020640788/940877337237528608
Ssolid-orange11/4/2022
Thank you @Omer. It worked as I expected.
Fforeign-sapphire7/19/2023
@Omer do you remember the actual thread you posted here? It's no longer visible and I have the exact same requirement 😅
OOmer7/19/2023
Hey @bastianwegge 👋 , We're happy to see you! Unfortunately there isn't a very cool way but I created a CodeSandbox for you. https://codesandbox.io/s/refine-use-select-example-forked-s55ne?file=/src/pages/posts/create.tsx
const {
selectProps,
queryResult,
defaultValueQueryResult
} = useSelect();

const allOptions = [
...(queryResult.data?.data || []),
...(defaultValueQueryResult.data?.data || [])
];
const {
selectProps,
queryResult,
defaultValueQueryResult
} = useSelect();

const allOptions = [
...(queryResult.data?.data || []),
...(defaultValueQueryResult.data?.data || [])
];
<Select
{...categorySelectProps}
options={allOptions.map((p) => ({
label: `${p.title}-${p.id}`,
value: p.id
}))}
/>
<Select
{...categorySelectProps}
options={allOptions.map((p) => ({
label: `${p.title}-${p.id}`,
value: p.id
}))}
/>
Fforeign-sapphire7/20/2023
@Omer thanks for the sollution! It's much nicer than what I have right now! I don't know if I should open a new thread for this but: Since you posted a way to display the ID of an entity. Is it possible to search by the title OR the id via filters? Ah I got it:
onSearch: (userInput: string) => {
const filters: CrudFilters = [];
filters.push({
field: 'fullname',
operator: 'contains',
value: userInput,
});
if (Number.isInteger(Number(userInput))) {
filters.push({
field: 'id',
operator: 'eq',
value: Number(userInput),
});
}

return filters;
},
onSearch: (userInput: string) => {
const filters: CrudFilters = [];
filters.push({
field: 'fullname',
operator: 'contains',
value: userInput,
});
if (Number.isInteger(Number(userInput))) {
filters.push({
field: 'id',
operator: 'eq',
value: Number(userInput),
});
}

return filters;
},
it's basically working like this! 🎉
OOmer7/20/2023
useSelect | refine
useSelect hook allows you to manage any select (like a Html `` tag, React Select, etc...) component. Since it is designed as headless, It expects you to handle the UI.
Fforeign-sapphire7/20/2023
What's your comment referring to?

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Dependent query on table filters.I am trying to filter table data and create a form to filter, It is working fine as expected.But nowSort, filter, paginationHi! Currently, the default sorter, filter, and pagination is performed using query parameters. Two qNested ResourcesThe API that I am integrating with has a lot of nested resources. As an example (i.e not actual api Update Table items asynchronouslyHello! I am experimenting with refine and I have a couple locations where I populate a table by: 1)refine reporting toolHi, Are there any packages for generating dynamic reports? I can't find a free package and I'm not Help with task managerI am planning to build a task manager for our company i started following example give in blog > HoToast notification recommendation?Hey Guys, would anyone like to recommend their favorite toast notification to use with Refine?Webpack returning errors from the libHello, I updated refine packages to the latest version, and now is printing errors related to the liMigrate from version 2 to 3.I've run the command `npx pankodrefine-codemod refine2-to-refine3` but I'm receiving the following eError - DockerHello, after deploying in docker, it is returning this error when accessing the login page. Do you How to select RangePickerHello, I need to use TimePicker.RangePicker that Ant Design provides and I can see that there is a Display list of data from API response that has a different format.I am trying to display a list of data from API response with a response value as below: ``` { counHow to implement jwt authentication in authProvider?I have followed this link https://refine.dev/docs/api-reference/core/providers/auth-provider/#settinCustom Graphql query inputsHello, Can someone please explain to me how to write custom Graphql queries? We are using the PothAuzure AD B2C for Authentication and AuthorizationHi All, I am trying to set up auth with Azure AD. After a successful login on Azure AD B2C, I am redqueryOptionsI want to hit an Api with a specific route, for exampe, lets say api/user-directories/ for example Add smooth scroll effect in iconsHey everyone I want to made some changes in footer section of the this website but I'm not able to fHide *Button for forbidden actionsHi! Is there a way to avoid the disabled button for actions an user cannot do (because unauthorized)difference between importing from refinecore and refineantdfor example i have a component useSelect so if i import it from refinecore it dont have same props cI am getting 301 status using refine-simple-rest although there is not any error on postman.I am using refine-simple-rest as my data provider to connect with the django rest API but I get back