Forums Home / Wijmo / General Discussion
Posted by: ibbu432 on 22 January 2021, 2:39 am EST
ibbu432
Posted 22 January 2021, 2:39 am EST - Updated 3 October 2022, 5:36 am EST
Hello Team ,
I am working on List box using .Basically i want to display the user id and email address at single line like below image.
Please give me any refernce for this design.
Thanks,
Ibrahim.
ashwin.saxena
Posted 24 January 2021, 5:32 pm EST
Hi,
You can use the formatItem event of ListBox to format the name and email as a table. Please refer to the sample link below for reference:
https://stackblitz.com/edit/js-yyerhg
Regards,
Ashwin
ashwin.saxena
Posted 25 January 2021, 12:21 am EST
Hi Ibrahim,
Sorry, I forgot that you were using angular. I have created a sample for the same in angular.
https://stackblitz.com/edit/angular-9-0-0-rc-1-edwvzt
Instead of the formatItem event, you can use the wjItemTemplate directive to customize the listbox.
~regards
ibbu432
Posted 25 January 2021, 1:24 am EST - Updated 3 October 2022, 5:36 am EST
Hello Ashwin,
Its almost working fine.But while selecting the list items. its showing like white.
ashwin.saxena
Posted 26 January 2021, 7:31 pm EST
This seems like a CSS issue. Have you added any CSS related to the wj-state-selected class or maybe you have set the background of the td or tr tag due to which the background of the selected state is overriding?
ibbu432
Posted 27 January 2021, 6:08 pm EST - Updated 3 October 2022, 5:37 am EST
Hi,
I have removed the “…/node_modules/@grapecity/wijmo.styles/wijmo.css” from style.css. Then my out put like this.
While selecting the list item able to display the black border to item.How can i display the selected item like blue.
ashwin.saxena
Posted 28 January 2021, 2:52 pm EST
Hi,
Please do not remove the wijmo.css file because it contains the necessary CSS to display wijmo controls.
Instead, look in all of your CSS files that may be causing the issue. You may have applied some background or color setting to the table,tr, or td tags. That is why selecting an item shows blue borders instead of a complete blue color.
You can also use inspect element of the browser’s console to check what CSS is applied to the selected element of ListBox.
~regards
ibbu432
Posted 28 January 2021, 10:59 pm EST
Hello Ashwin,
How can i add the page nation to list box. Give me any reference.
Regards,
Ibrahim.
ashwin.saxena
Posted 31 January 2021, 3:04 pm EST
Hi Ibrahim,
Please refer to the sample link below:
https://stackblitz.com/edit/angular-9-0-0-rc-1-svwrct
While creating a CollectionView for ListBox, set its pageSize property according to your requirements. Then, you can use CollectionViewNavigator to change pages.
~regards
ashwin.saxena
Posted 1 February 2021, 4:31 pm EST
Please refer to the sample link below which demonstrates how to add search:
https://stackblitz.com/edit/angular-9-0-0-rc-1-ketbb7
~regards
