In this video you’ll learn about the basics of customizing the ASP.NET MVC TreeList extension:
starting from adding the extension into the project and binding it to data to diving deeper
into an overview of its settings.
I have an MVC project here with a HomeController and an empty Index view.
Let`s run this and see what it looks like in the browser.
Alright, Here you can see, that the content area is empty so Let`s return to Visual Studio.
The TreeList extension can function in either bound or unbound mode.
Since the TreeList is designed to display information in a tree structure, its data
source needs two additional fields to build a tree structure.
The first is a "Key Field" that must contain unique values.
And the second is a "Parent Field" that must contain values that indicate parent nodes
for the current node.
Let's take a look at the structure of the "Threads" table.
The ID and ParentID fields of the table are great for a treelist because they are necessary
to build a tree hierarchy.
Let's take a look at the table data.
The ID column contains key fields, the ParentID contains the values that indicate parent nodes
for the current node.
That's exactly what we need.
The other columns can contain various types of data.
Next, Let's create a data model.
I return to the solution explorer, and add the ADO.NET Entity Data Model to the "Models"
folder.
I follow the wizard steps and the Entity Framework generates a data model for me.
I save the model, build the solution and close the model designer.
In the View file, I right click on the required position and in the context menu I select
the "Insert DevExpress MVC Extension" item.
The "Insert Extension Wizard" appears.
In the "Data" tab I select the TreeList.
I leave the default extension name and its partial view name.
In the "Data Model" section I define that the TreeList should function in bound mode,
select the model type, model context, the columns I want to display, the key field and
the parent key field.
Then I can enable editing/inserting or deleting and click the "Insert" button.
The Insert Extension Wizard generates all the necessary code for me and you can see
that the view code has been changed.
In the output window I can see what files have been changed or created.
Here you can see that the result in the browser is a stunning TreeList.
It allows you to create, edit, and delete nodes.
I can also expand several nodes.
Pay attention to the ID and ParentID columns.
For example, the 4th node is a child of the 3rd node, and the 3rd node is a child of the
1st node.
Now, Let's return to Visual Studio and see what the wizard generated for me.
In the output window, I select the output from the DevExpress extension integrator.
Here, I see the View code has been modified by the wizard.
It has inserted a link to the PartialView.
I can double click the output item and navigate to the changed code and you can see that the
actions have been added to the controller class.
Here you can see that the wizard has already added the code that handles the create, update
and delete operations via the Entity Framework.
Let's take a look at the partial view code and the controller code at the same time side
by side.
The callback route values are handled by the "TreeListPartial" action.
The callback route values for the create, update, and delete operations are handled
by the corresponding actions.
Note, that the wizard inserted all this code automatically, so I don`t need to type this
code manually.
And, if an error in the create/update or delete action occurs, then the error text will be
passed to the view using the ViewData dictionary.
Now Let`s look at the settings for the TreeList the wizard generated.
Here are the settings for the command column.
These settings allow you to define the visibility of the add/edit and delete buttons.
The KeyFieldName and the ParentFieldName properties allow you to define the names of key and parent
fields.
This is the code that populates the collection of columns.
Here are the settings that enable the pager and allow node selection.
The treelist provides you several settings for items like the TreeList's behavior, display,
cookies, editing, exporting, popups, and more.
Let's hide the ID and ParentID columns by deleting the corresponding code.
OK, We have the column that displays DateTime values and We can choose the appropriate editor
to edit this column's values.
To do this, we should specify the Column Type.
Intellisense shows me a list of possible column types and I'll select the DateEdit type.
There are two columns that show boolean values.
The CheckBox is the best choice for displaying and editing boolean values.
Next, Let's show a summary item within the TreeList.
I can add a new summary by specifying its type and the name of the column within which
the summary should be calculated.
Again, IntelliSence displays a list of possible summary item types.
I want to show the count of the nodes under the "Subject" field.
Summaries can be shown in the footer of the TreeList, so, let’s enable footer rendering.
Plus, I can enable sorting for the column values.
Let's take a look at the result in browser.
Here you can see the amount of nodes under the "Subject" column.
Boolean values are displayed conveniently as checkboxes as we can see in the last 2
columns.
I can click the column header and the nodes will be sorted in ascending or descending
order.
I can add a new node.
Here you see that I can edit DateTime values with the Date Editor and the boolean values
can be edited with the checkboxes.
I click the "Update" button and the new node is saved within the database.
Note, that the summary item has automatically updated its value.
Another great feature is that I can reorder the columns by dragging and dropping them
at the required position.
And I can select the required nodes.
Let’s return to Visual Studio and define the pager displaying mode, then define its
position and the page size.
I don't want to expand the nodes manually, so I enable their automatic expanding.
Now you can see that the pager appears and all the nodes are expanded.
I can use the pager to navigate between them.
Thanks for watching and thank you for choosing DevExpress.