Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Continuing with learning how to change the way your fields appear on the detail view in the Django Admin site, in this video you’ll learn how to replace a drop-down menu with radio buttons. You’ll also learn how to use TabularInline.
Now that we know how to group
fields together into field sets,
0:00
let's learn a new way to change the way
the fields look on the admin site.
0:04
Let's replace a drop down menu
with a selection of radio buttons.
0:08
And then change some fields from stacking
on top of each other to being in
0:13
a more tabular format.
0:17
First, let's replace
the drop down menu for
0:19
Quizzes in the questions model
with some radio buttons.
0:22
So what we're doing is replacing this drop
down menu right here with a couple of
0:26
radio buttons instead.
0:31
And doing that is actually really simple.
0:33
So, all we do is scroll down
here to our QuestionAdmin,
0:36
and we add this field called radio_fields.
0:42
And then we set it equal to a dictionary.
0:46
Now, the key is the name of the field
in our model that we want to change,
0:49
in this case, quiz.
0:54
And then the value is going to
be admin.HORIZONTAL in all caps.
0:55
This displays the options
horizontally instead of vertically or
1:02
stacked on top of each other.
1:06
Since the user can only select one,
1:08
that means the options get
displayed as radio buttons.
1:10
So now, whenever we go over here and
1:14
refresh, you can see those
radio buttons instead.
1:16
This is especially handy if you have
a field in your model that should only
1:21
have a few answer choices.
1:25
For us, those fields are which quiz
a question should go with, and,
1:27
which course a quiz should go with.
1:31
The number of selections we have to
choose from will grow over time, so
1:34
we might wanna stick with
the drop down menu for now, but
1:38
this way you know about the option.
1:42
Now, let's go back to the list view.
1:44
Notice that the horizontal
select option also affects
1:47
the list view if that field
is editable in the list view.
1:51
For our last trick in this video,
let's talk about tabular inline.
1:56
Tabular inline is an alternative
to stacked inline.
2:01
You've already seen stacked inline.
2:05
It's how the text inline, quiz inline,
and answer inline classes are set up.
2:07
So, for example, if we go into these true,
false questions, you can see
2:13
that the Order, Text and then the Correct
are all stacked on top of each other.
2:18
That's stacked inline.
2:24
Now, this is fine for
a model like text, but for answers,
2:26
this one, it might be better to have
things lined up across like a table.
2:30
Hence the name, tabular inline.
2:35
Can you guess where we're going with this?
2:38
That's right.
2:41
All we need to do,
is make answer inline inherit from
2:42
admin.TabularInline instead
of admin.StackedInline.
2:47
So we just change this to Tabular.
2:53
Refresh our page, awesome.
2:57
Now you can easily see all of the answers
you've got for this question and
3:01
which one is correct.
3:05
It's much more readable.
3:07
Great work.
3:09
Now you know how to change
the layout of the detail page,
3:10
including how to introduce a horizontal
select as opposed to a drop down menu.
3:13
And how to change the presentation
to stackedInline to tabularInline.
3:18
This will make changing information
in your model much more intuitive.
3:23
Before you go on to the next video, can
you think of any other models that might
3:28
benefit from some of the changes
you've learned to make?
3:31
You need to sign up for Treehouse in order to download course files.
Sign up