ListView and Templates

ListView is a fantastic control when you want to render the tabular data in a customized way. It gives you a lot of templates to work with. These templates will improve the most used functionalities. This article explains about one of them, which is GroupTemplate.

What is not covered?

The basic functionalities of ListView and how to bind the data to DataSource from SQL database are not covered in this article. Please refer to the ASP.Net Data Controls section for that.

LayoutTemplate

This template is used mainly for determining the basic layout the control supposed to render. So in our case this will hold the groups. Further groups hold their respective items. Hence we need to specify the GroupPlaceholderID to the layout template not to the GroupTemplate.  I have placed a silver colored (as a background) box to contain all group boxes.

GroupTemplate

As I already mentioned in the previous paragraph, we sup ...

A Customized DataList Paging

If you ever worked in GridView, you will be amazed with the native functionalities that GridView offers. But DataList is not loaded with that many features. It is basically meant for binding data in a tabular format.  If there is a need of sorting, paging then we need to write our own code to cater those needs.

Note:
1) As it is already explained in earlier articles several times, I am not going to explain again how to get the data and how to bind the data from database. So please refer to the Asp.net DataControls section or GridView section for that matter

2) This sample is written to explain how to rollout a paging support for DataList. It may not suit your real-time situation as it is.  You may need to code to make it better for real time situations.

Limitations on DataList Paging

1) There is no native paging support for the DataList.
2) There is no DataPager support, (those ...

GridView inside a ListView

ListView is a very flexible control for rendering custom formatted outputs. I have already managed it to get a horizontal menu with liquid layout. Its fantastic set of templates allows most of the rendering to be easily done. With a little bit of CSS knowledge we can avoid rendering tables for most of the lists. It is not only flexible in rendering, but also very good in handling controls inside its template. To explain this i have placed a GridView inside ItemTemplate to load in all cells.

Asp.net ListView ItemDataBound to load GridView

For explaining the usage of listview ItemDataBound, I have chosen a GridView to be placed in a template (fetched using findcontrol). So based on the ListView‘s values the GridView will be populated. As usual, I have taken Northwind as a sample db. Further Category and products tables are selected for ListView and GridView respectively. Initially categories will be loaded into the ListView, and then P ...

DataBind GridView with Entities and LINQ

A simple article for understanding LINQ with Entities for data binding a GridView. While the main objective is not about the GridView data binding, the goal is to find how we can use the LINQ effectively along with Entities to bind data. Why I have not decided not to use DataTable with LINQ to bind is, because I would like to stay away from SQL queries completely.

Adding ADO.NET Entity Data Model

As we planned to go for entity based approach, the model has to be created. To be simpler I always prefer to work with Northwind Database. This time we select the Category table for our sample.
1) Right Click the website and add new Item
2) Select the Categories as Data in the left side pane
3) Select the ADO.NET Entity Data Model.
4) Name the Model appropriately and click Add.

Configuring the Created Entity Model

As we know the Data model has to be configured along ...

Asp .Net Listview Checkbox DataBinding

To display list data, we can use several controls like ListView, DataList, Repeater, GridView, DropDownList, etc... Since we have a variety of controls to choose from, the control can be selected based on the requirements. If it is a single column single selection, then DropDownList is the right choice. If paging, sorting, and editing is required then GridView is the right choice.  There is no built in Paging support for listview. So we need to use DataPager to get paging support.

GridView like DataBinding

As we bind the data in the GridView, we can easily do in ListView also. There is not much difference in terms of binding data. But one important information to be noted is to have a ItemPlaceHolder. By default the name of the Item Place Holder is itemPlaceholder. ASP.Net allows it to be ...

ListView Paging Asp.net

To display list data, we can use several controls like Repeater, GridView, Dropdownlist, etc... Since we have a variety of controls to choose from, the control can be selected based on the requirements like if it is a single column single selection the Dropdownlist is the right choice. If paging, sorting, edit is required then GridView is the right choice. 

No native paging support for ListView

The paging support is not available in the ListView out of the box. So you can not just enable the paging as we do in the GridView natively. Since the ListView and repeater are bit advanced controls, they are having a good control in rendering. To repeate items based on a designed pattern, we can use itemPlaceholder in the Layout Template. Then what ever in the ItemTemplate will be replaced the itemPlaceholder in the layout template. Likewise we can use ...

Asp.net Repeater Example

To display list data, we can use several controls like Repeater, GridView, Dropdownlist, etc... Since we have a variety of controls to choose from, the control can be selected based on the requirements like if it is a single column single selection the Dropdownlist is the right choice. If paging, sorting, edit is required then GridView is the right choice. 

But repeater allows listing data which can be flowed based on the way it is designed. It can be used to list the data horizontally or vertically. And can be formed as a table or can be formed as a HTML List (li). For displaying tabular data still we can use the repeater to form the HTML Table. However when the repeater is used as a container for controls we can always design the templates such a way that result can be rendered with <div> s and <li> s.

Templates in Repeater

There are few templates that will be much helpful in repeater. If you ever worke ...

TreeView DataBinding in Asp.Net

I liked DataBinding much when I have upgraded from Classic VB to Asp.Net. Treeview Asp.net Selectednode can be used to fetch the respective node. Especially on DataGrid (No GridView in 1.0, 1.1), DropDownList, etc... When ever I see a control in Asp.Net more are less it can be bound to various source basically a Datatable and Array list.

The first time I disappointed is to bind a TreeView to a relational data. I thought I can get some support for at least self referenced table. But practically TreeView does not accept any flat DataSource. That means it accepts only HierarchicalDataSource.

TreeView DataBinding Procedure

1) Fetch the database tables to DataTable
2) Find the relation between the tables
3) Establish the relation with DataRelation.
4) Mark the relation as nested
5) Mark all columns mapping as at ...

ASP.Net Menu And CSS to format

Without a menu the asp.net web application is hard to navigate. We can even bind to a hierarchical data. Or with little additional work the database tables can be bound easily.

Format Base Menu

Base menu can be formatted using some simple format options(similar like anyother controls in asp.net shown as below). But the important item to be noted is the section where this is applied for. To format base menu use LevelMenuItemStyles section(BackColor="Silver" BorderStyle="Dashed" BorderWidth="1"). If  the menu has to be displayed horizontally, the orientation attribute has to be changed accordingly(Orientation="Horizontal") which is availabel in the <asp:Menu section itself

Sample grey background style will look like
<LevelMenuItemStyles >
<asp:MenuItemStyle BackColor="Silver" BorderStyle="Solid" Font-Bold="true" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
</LevelMenuItemStyl ...