In that tutorial we filled datagridview combobox column with unbound data from array. Here we do the opposite,we fill DataGridView ComboBox Column with data from database. In short this is what we do. Jul 31, 2008 The TreeGridView by Mark Rideout (here's the link) is a great control. It allows us to display related data in a hierarchical form (a tree!), but I needed it to be sortable and support data binding. The HierarchicalGrid does that, the quick and dirty way. It displays the table relations in a.
- Live Help
- Components
Component Categories
Component Types
- .NET Components
Component Environments
Component Publishers
- Applications
Application Categories
Application Types
Application Publishers
- Add-ins
Add-in Categories
Add-in Types
Add-in Publishers
- Cloud Services If you have a Cloud Service / API relevant to our global audience of Application Developers and IT Professionals, then get in touch. Every day, customers are searching our web site for software solutions to solve specific IT problems.Join Our Program and start working with us today!
- Brands
Bestselling Brands
21 Feb 2015CPOL
How to drilldown hierarchical data using GridView control
Introduction
In our day to day work, we need to display hierarchical data to user and allow user to drilldown data for detail information. In my earlier topic “Drilldown Hierarchical Data Using MVC and JQuery”, I showed how to drilldown data for MVC application. However, there are still need to display hierarchal data in ASP.NET Web Form based application.
In this topic, I will walk you through how to create a drill down tabular data using GridView control for ASP .NET Web Form application. Please, note that I am concentrating on the functionality instead of making it nice. In this demonstration, I am going to use Student object for student information. Student object will contain Course object for course description.
1.0 Create ASP.NET Web Application
Using Visual Studio 2010, create a new ASP.NET Web Application. By default, Visual Studio creates several files for the application. In this demo we are going to display Student information in StudentView.aspx page. When user click on a Student record, we will load data for the Course and insert it into the StudentView.aspx under the selected record. To display Course data, we will need to create a separate page CourseView.aspx. You will find the detail of loading the CourseView.aspx into the StudentView.aspx in later sections.
Add a new “Web Form using Master Page” and name it StudentView.aspx. As the CourseView.aspx will be inserted into the StudentView.aspx page, we don’t need to display any information from Site.Master page. Hence add a new “Web Form” and name it CourseView.aspx.
Right click on the StudentView.aspx page and from the context menu select “Set as Start Page”.
2.0 Add JQuery scripts to project
Open Site.Master and add the following JQuery references inside the Head section.
By default, ASP.NET adds older version of JQuery libraries into the project. You will need the new version into the Scripts folder of the application and add those files into the project. You can find those files fromwww.JQuery.com or from the attached demo application.
3.0 Create Data Model (Student and Course)
From the Solution Explorer, right click on the Project and add a new folder. Name the folder Model. Under the Model folder add a Class and name it Student. Now, the Model folder should have the Student.cs class. Similarly, create another class and name it Course.
Open Student.cs and add fields.
Open Course.cs and add fields
4.0 Data for Students and Courses
For this demo application, we are going to use static data. Create new folder and name it Data. Under the Data folder, add a class StudentData. This static class will have a list of student objects and each student object will have list of course objects. Open StudentData.cs file and add following data.
Also this static class, needs two methods. GetStudentData method will return list of Students and GetCourseData method will return the list of Course for a particular student.
5.0 Modify Pages
5.1 Modify StudentView.aspx
Open StudentView.aspx in Design mode. From the Toolbox, drag “ObjectDataSource” and drop into the page. Set the ID of the ObjectDataSeource1 to a meaningful one. For example, StudentODS. Now you need to configure the StudentODS so that it can retrieve data for Students. Click on the context menu of the StudentODS and select “Configure Data Source…” Configuration wizard will open. From the “Choose your business object” dropdown list, select “DrilldownDemo.Data.StudentData”. If you don’t find it in the list, then do a build of the application, which will compile the project and the StudentData object will be available in the list.
Click on the Next button. Select “GetStudentData” method from the “Choose a method” dropdown list for the Select option (tab). And click on the Finish button.
Now drag and drop the GridView from the Toolbox. Select StudentODS for the Data Source of the GridView. Give a meaningful name to the GridView. For example, StudentGridView.
Either using Design or Source mode of the StudentView.aspx page, add a TemplateField as a first column of the StudentGridView. For the ItemTemplate of the TemplateFiled, add two hyperlink as following code
First hyperlink shows the “+” image (Expand) so that user can click on this and see Course information. Other one collapses the Course information.
There are two classes in each class attribute of those hyperlinks. For example, ‘+’ (Expand) link has “collapse” and “expand-btn”. These two classes will be used to control the drill down. We don’t need to define those as a style (css file). These will be used by JQuery method to find the proper Student row to display or hide the content and also for handling click event. More detail will be described in the JQuery section.
5.2 Modify CourseView.aspx
Open CourseView.aspx in Design mode. From the Toolbox, drag and drop a Panel. Name the Panel CoursePanel. Set the Height property of the Panel to 100px. Set the ScrollBars property of the Panel to Auto. This will allow to setup horizontal and/or vertical scroll bar depending on the number of records of course.
From the Toolbox, drag “ObjectDataSource” and drop into the page. Set the ID of the ObjectDataSeource1 to a meaningful one. For example, CourseODS. Now you need to configure the CourseODS so that it can retrieve data for Courses. Click on the context menu of the CourseODS and select “Configure Data Source…” Configuration wizard will open. From the “Choose your business object” dropdown list, select “DrilldownDemo.Data.CourseData”. If you don’t find it in the list, then please do a build of the application, which will compile the project and the CourseData object will be available in the list.
Click on the Next button. Select “GetCourseData” method from the “Choose a method” dropdown list for the Select option (tab).
Click on the Next button to setup the parameter. From the “Parameter Source”, select QueryString and in the QueryStringField enter ID. Then click on the Finish button.
Now drag and drop the GridView from the Toolbox. Select CourseODS for the Data Source of the GridView. Give a meaningful name to the GridView. For example, CourseGridView.
5.3 Adding JQuery Methods
We are going to use JQuery to control the Drilldown by loading CourseView.aspx Information into StudenView.aspx. Open StudenView.aspx in Source mode. After end of GridView tag, add a <script> section as following
The first statement $('.expand').hide(); find all of the tags in the document which has class attribute “expand” and hide them. This will hide the ‘-‘ (Collapse) image from Student record. Because, if you look back at the StudentView’s code, you can see the ‘-‘ (Collapse) image action and table row in the Student table have class attribute “expand”.
Next, we need to define a function which will be activated when user click on ‘+’ (Expand) under the Action column of Student record. In this method, it finds the Student row of the clicked Action (Expand or Collapse image). Under that row, we need to insert a row which will contain the Course information. So, we first find the total number of columns for the existing table. In this demo, we don’t want to show the course information under the action column, so we subtract 1 from the total number of columns in the table.
Next, we insert a row using JQuery’s “after” function. Then we toggle the Expand and Collapse. As we need to pass the StudentID to CourseView.aspx, in the next statement, we found the StudentID. Now, we need to call CourseView.aspx with StudentID and reload the DIV section. Hence, we used the JQuery’s Load function with CourseView.aspx parameter. From the CourseView.aspx, we need to only load data which is under the CoursePanel. So, we pass the Panel ID (CoursePanel) to the Load method as a second parameter.
Next, we need to define a function which will be activated when user click on ‘-‘ (Collapse) image under the Action column of Student record. In this method, it finds the Student row of the clicked Action (Collapse image) and toggles the Action text.
6.0 Conclusion
JQuery makes easy to implement Drilldown hierarchical data using GridView.