1

I'm making a webapp, that will mostly be used on desktop, is not intended to be used in mobile (at least, the dashboard area) - so that's no problem for me...

Let's say I have some data-model that is like to "territoy subdivision" - Please forgive my way to write English.

To simplify, let's say I have some users and some countries, but countries have states and states have cities!

One user can have a relation with N countries (but not necessarily all).

One countries can have N states (but not necessarily all).

One state can have N cities (but not necessarily all).

So, when I display a user information I got a very big trouble, because, is probably to get that:

e.g.:

Phillip has two countries assigned The first country has only one state that has only one city. The second country has three (3) states and in mean, each state has 30 cities...

My first try was to display the information this way:

COUNTRIES ASSIGEND:

Country1 | State1 | City1 Country2 | State2 | City2 Country2 | State2 | City3 Country2 | State2 | ... Country2 | State2 | City32 Country2 | State3 | City33 Country2 | State3 | City34 Country2 | State3 | ... Country2 | State3 | City63 Country2 | State4 | City64 Country2 | State4 | City65 Country2 | State4 | ... Country2 | State4 | City94 

But this is horrible, in matters of "redundancy" and "order", btw the title says "Countries assigned and instead of showing 2 records, I'm showing almost 100...

My second try was to make nested tables, I will try to ASCCIfy my idea below:

Please note that this one is another example, not related to previes example, to simplify...

|-----------|----------|--------| | | | | | COUNTRY1 | STATE1 | CITY1 | | | | | |-----------|----------|--------| | | | CITY2 | | | STATE2 |--------| | | | CITY3 | | COUNTRY2 |----------|--------| | | | CITY4 | | | STATE3 |--------| | | | CITY5 | |-----------|----------|--------| 

Here looks very pretty, but the problem goes when you got more a considerable number of cities, so you will get lost in which state or country belongs to.

My last try (not implemented) was thinking about accordeon, but I really don't know. I would love to hear the recommendations of expert designers as the people of this community.

Thanks!

Note: Please feel free of re-tag this question.

1 Answer 1

1

How about using Expand(+) and Collapse(-) signs to show the records in a tree such that in the start user can only see Countries and then as he keeps going down a level he can see the relevant state and cities.

https://jsfiddle.net/23nigam/o49gnaaw/

3
  • is a good idea, actually I found a disjunction in my model, is more complex than I described, is differently, but anyway this will work. Did you know some Expand/Collpase tree control for Bootstrap 4? Commented Jan 18, 2018 at 6:13
  • This seems OK: gijgo.com/tree/demos/bootstrap-4-treeview Commented Jan 18, 2018 at 6:25
  • I will accept this answer, but I'm open to hear another alternatives. Commented Jan 18, 2018 at 6:25

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.