In this VIDEO TUTORIAL and its upcoming steps, we will learn on how to create a customizable data display in a GridView control by grouping rows belonging into a particular category. The need for customized sorting interface arises due to various reasons. Let us say, we have 100 products in a Beverages category and only 10 products per page are shown at a time, in this scenario, the end user may NOT know, how many more products do exists on other pages in Beverages category and when products from other categories would show up in the display. Under these circumstances, it becomes necessary to have separator rows between categories during the product display in a GridView control on a web page. In this Step 1, a demonstration is made on how to create a standard GridView control that displays product information from the Products table in the database and also has a paging and sorting interface at run time display of CustomSortingUI.aspx. This initial display is necessary to explore on various techniques of injecting separator rows in the upcoming step of this video tutorial. For detailed information and source code for this step, please refer to the original article.

This step of the VIDEO TUTORIAL will zoom in and show case on various techniques for adding separator rows in the GridView control display that was configured in the previous step with standard paging and sorting interfaces. To implement separator rows in the GridView control display, the records are retrieved programmatically and are bound to the GridView control based on its sort expression. Following which, GridView’s product rows are iterated through to find out where the new category begins, once a new category is found a ‘separator record’ of ProductRow instance is injected by assigning the CategoryID equal to ‘-1’ and rows are programmatically bound to the GridView control for display. However, the previous process becomes more complex since the sorting has to be done programmatically before the data is bound. Therefore, a new technique will be implemented where the ‘separator record’ will be injected into GridView control’s hierarchy after the data is bound and will be explained in the next step. For detailed information and source code for this step, please refer to the original article.

This step of the VIDEO TUTORIAL will demonstrate on how to over ride the native ‘Render’ method of CustomSortingUI.aspx web page at run time in the Page_Load event handler. This over riding of ‘Render’ method is necessary to inject separator rows based on a new category in the GridView control’s sortable display interface at run time. A detailed explanation of how the separator records are injected into the GridView’s control hierarchy is explained to accomplish our goal. Finally, the run time display of the CustomSortingUI.aspx web page exhibiting the customized sorting user interface with separator rows for each category is demonstrated to conclude this video tutorial. For detailed information and source code for this step, please refer to the original article.