Hi Folks,
I would like to make the perspective dropdown menu always expanded
@pturmel We can continue discussion here if you like
Then why do you even want a dropdown ?
If it's always expended, it's pretty much just a stack of buttons...
1 Like
The problem is addressed here:
1 Like
I need the search function. Too many items. I made the drop down take 100% of the page with a custom CSS but I need it expanded all the time
Or recommend me another component that takes the same shape and support search function
I want to make a list like the great one done by @nader.chinichian
I though of that method of doing it
(drop down menu > make it 100% of the page (done) > make it always expanded)
@nader.chinichian if the image contains any copyrights or you don't like it to be shared let me know and I will remove it instantly
1 Like
Table again.
enableHeader : false
pager.top : false
pager.bottom : false
rows.striped.enabled : false
filter.enabled : true <<<<----------
4 Likes
It is not dropdown lost. It is combination of text input field and tree components that work together
What ever you type in text field cause a trigger on tree binding to generate new tree base on that filter area from database. As I use database filtering is very easy.
6 Likes
text field + table/flex repeater, use the text field to filter the table/flex repeater.
Don't hack built-in components to do something that can be done so simply by combining other built-in bricks.
json
{
"custom": {},
"params": {},
"propConfig": {
"custom.foo": {
"persistent": false
}
},
"props": {
"defaultSize": {
"height": 750,
"width": 280
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "TextField"
},
"position": {
"grow": 1
},
"props": {
"deferUpdates": false,
"style": {
"background": "none",
"border": "none",
"color": "--neutral-20"
}
},
"type": "ia.input.text-field"
},
{
"meta": {
"name": "Button"
},
"position": {
"basis": "24px"
},
"props": {
"image": {
"icon": {
"path": "material/refresh"
}
},
"style": {
"background": "none",
"border": "none"
},
"text": ""
},
"type": "ia.input.button"
}
],
"meta": {
"name": "search_field"
},
"position": {
"basis": "32px",
"shrink": 0
},
"props": {
"style": {
"border": "solid 1px lightblue",
"border-radius": 5
}
},
"type": "ia.container.flex"
},
{
"custom": {
"data": [
{
"city": "Folsom",
"country": "United States",
"population": 77271
},
{
"city": "Helsinki",
"country": "Finland",
"population": 635591
},
{
"city": "Jakarta",
"country": "Indonesia",
"population": 10187595
},
{
"city": "Madrid",
"country": "Spain",
"population": 3233527
},
{
"city": "Prague",
"country": "Czech Republic",
"population": 1241664
},
{
"city": "San Diego",
"country": "United States",
"population": 1406630
},
{
"city": "San Francisco",
"country": "United States",
"population": 884363
},
{
"city": "Shanghai",
"country": "China",
"population": 24153000
},
{
"city": "Tokyo",
"country": "Japan",
"population": 13617000
},
{
"city": "Washington, DC",
"country": "United States",
"population": 658893
},
{
"city": "Wellington",
"country": "New Zealand",
"population": 405000
},
{
"city": "Delhi",
"country": "India",
"population": 11034555
},
{
"city": "Dhaka",
"country": "Bangladesh",
"population": 14399000
},
{
"city": "Lagos",
"country": "Nigeria",
"population": 16060303
},
{
"city": "Karachi",
"country": "Pakistan",
"population": 14910352
},
{
"city": "Istanbul",
"country": "Turkey",
"population": 14025000
},
{
"city": "Cairo",
"country": "Egypt",
"population": 10230350
},
{
"city": "Mexico City",
"country": "Mexico",
"population": 8974724
},
{
"city": "London",
"country": "United Kingdom",
"population": 8825001
},
{
"city": "New York City",
"country": "United States",
"population": 8622698
},
{
"city": "Tehran",
"country": "Iran",
"population": 8154051
},
{
"city": "Bogota",
"country": "Colombia",
"population": 7878783
},
{
"city": "Rio de Janeiro",
"country": "Brazil",
"population": 6429923
},
{
"city": "Riyadh",
"country": "Saudi Arabia",
"population": 5676621
},
{
"city": "Singapore",
"country": "Singapore",
"population": 5535000
},
{
"city": "Saint Petersburg",
"country": "Russia",
"population": 5191690
},
{
"city": "Sydney",
"country": "Australia",
"population": 208374
},
{
"city": "Abidjan",
"country": "Ivory Coast",
"population": 4765000
},
{
"city": "Dar es Salaam",
"country": "Tanzania",
"population": 4364541
},
{
"city": "Wellington",
"country": "New Zealand",
"population": 405000
},
{
"city": "Los Angeles",
"country": "United States",
"population": 3884307
},
{
"city": "Berlin",
"country": "Germany",
"population": 3517424
},
{
"city": "Jeddah",
"country": "Saudi Arabia",
"population": 3456259
},
{
"city": "Kabul",
"country": "Afghanistan",
"population": 3414100
},
{
"city": "Mashhad",
"country": "Iran",
"population": 3001184
},
{
"city": "Milan",
"country": "Italy",
"population": 1359905
},
{
"city": "Kiev",
"country": "Ukraine",
"population": 2908703
},
{
"city": "Rome",
"country": "Italy",
"population": 2877215
},
{
"city": "Chicago",
"country": "United States",
"population": 2695598
},
{
"city": "Osaka",
"country": "Japan",
"population": 2691742
},
{
"city": "Bandung",
"country": "Indonesia",
"population": 2575478
},
{
"city": "Managua",
"country": "Nicaragua",
"population": 2560789
},
{
"city": "Paris",
"country": "France",
"population": 2229621
},
{
"city": "Shiraz",
"country": "Iran",
"population": 1869001
},
{
"city": "Manila",
"country": "Philippines",
"population": 1780148
},
{
"city": "Montreal",
"country": "Canada",
"population": 1649519
},
{
"city": "Guadalajara",
"country": "Mexico",
"population": 1495189
},
{
"city": "Dallas",
"country": "United States",
"population": 1317929
},
{
"city": "Yerevan",
"country": "Armenia",
"population": 1060138
},
{
"city": "Tunis",
"country": "Tunisia",
"population": 1056247
}
]
},
"meta": {
"name": "Table"
},
"position": {
"grow": 1
},
"propConfig": {
"props.data": {
"binding": {
"config": {
"struct": {
"data": "{this.custom.data}",
"filter": "{../search_field/TextField.props.text}"
},
"waitOnAll": true
},
"transforms": [
{
"code": "\treturn filter(lambda x: value.filter in x[\u0027city\u0027], value.data)",
"type": "script"
}
],
"type": "expr-struct"
}
}
},
"props": {
"bodyStyle": {
"background-color": "--neutral-90",
"color": "--neutral-20"
},
"columns": [
{
"align": "center",
"boolean": "checkbox",
"dateFormat": "MM/DD/YYYY",
"editable": false,
"field": "city",
"footer": {
"align": "center",
"justify": "left",
"style": {
"classes": ""
},
"title": ""
},
"header": {
"align": "center",
"justify": "left",
"style": {
"classes": ""
},
"title": ""
},
"justify": "auto",
"number": "value",
"numberFormat": "0,0.##",
"progressBar": {
"bar": {
"color": "",
"style": {
"classes": ""
}
},
"max": 100,
"min": 0,
"track": {
"color": "",
"style": {
"classes": ""
}
},
"value": {
"enabled": true,
"format": "0,0.##",
"justify": "center",
"style": {
"classes": ""
}
}
},
"render": "auto",
"resizable": true,
"sort": "none",
"sortable": true,
"strictWidth": false,
"style": {
"classes": ""
},
"toggleSwitch": {
"color": {
"selected": "",
"unselected": ""
}
},
"viewParams": {},
"viewPath": "",
"visible": true,
"width": ""
}
],
"emptyMessage": {
"style": {
"background-color": "--neutral-90"
}
},
"enableHeader": false,
"pager": {
"bottom": false
},
"rows": {
"striped": {
"enabled": false
}
},
"style": {
"border": "none"
}
},
"type": "ia.display.table"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"style": {
"background-color": "--neutral-90",
"padding": "3px"
}
},
"type": "ia.container.flex"
}
}
1 Like
@nader.chinichian
@Transistor
@pascal.fragnoud
@pturmel
I really appreciate your help a lot. Thank you 
2 Likes