Abstract:
In the year 2005 we published an article about creating master-detail GridView control. JQuery was not a first class citizen during that time and most of the work was performed by either plain old vanilla JavaScript or the server side code. With the advent of JQuery we can now create cool master-detail effects easily in less time and less code. This article explains how to spice up master-detail using JQuery.
Data Source:
For the sake of simplicity we have used collections as the data source instead of the database. The scenario revolves around Category and Product classes. The implementation below is used to populate the categories collection and return it to the user interface.
view sourceprint?
01 public class DataAccess
02 {
03 public static List GetCategories()
04 {
05 var categories = new List();
06
07 for(var i = 1; i<=10;i++)
08 {
09 var category = new Category();
10 category.Name = "Category " + i;
11 category.Description = "Description for Category " + i;
12 category.Products = new List();
13
14 for(var j=1; j<=10;j++)
15 {
16 var product = new Product() {Name = "Product " + j, Price = 10*j};
17 category.Products.Add(product);
18 }
19
20 categories.Add(category);
21 }
22
23 return categories;
24 }
25 }
The above code populates the categories collection with some dummy data and assigns ten products to each category. The DataAccess.GetCategories is triggered from the page code behind as shown in the code below:
view sourceprint?
01 public partial class MasterDetailGridViewUsingJQuery : System.Web.UI.Page
02 {
03 protected void Page_Load(object sender, EventArgs e)
04 {
05 if(!Page.IsPostBack)
06 {
07 BindData();
08 }
09 }
10
11 private void BindData()
12 {
13 gvCategories.DataSource = DataAccess.GetCategories();
14 gvCategories.DataBind();
15 }
16 }
The gvCategories is the name of the GridView control which is being populated using the categories collection returned from the DataAccess.GetCategories method.
Applying JQuery Effect on the GridView Control:
Before applying JQuery effect let's take a look at the ASPX code for the GridView control.
view sourceprint?
01
02
03
04
05
06
07 <%# Eval("Name") %>
08
09
13
14
15
16
17
18
19
20
21
When the page is loaded for the first time only category name is being displayed as shown in the screenshot below:
The JQuery implementation is shown in the code below:
view sourceprint?
01
Basically we are attaching the click function to all the elements on the page whose class name is ".categoryStyle". Inside the click event we use the JQuery siblings function to find the element with the class ".productStyle" and make it show and hide. The effect is shown below:
Conclusion:
In this article we learned how to use JQuery effects to enhance the user experience when implementing master-detail GridView scenarios.
In the year 2005 we published an article about creating master-detail GridView control. JQuery was not a first class citizen during that time and most of the work was performed by either plain old vanilla JavaScript or the server side code. With the advent of JQuery we can now create cool master-detail effects easily in less time and less code. This article explains how to spice up master-detail using JQuery.
Data Source:
For the sake of simplicity we have used collections as the data source instead of the database. The scenario revolves around Category and Product classes. The implementation below is used to populate the categories collection and return it to the user interface.
view sourceprint?
01 public class DataAccess
02 {
03 public static List
04 {
05 var categories = new List
06
07 for(var i = 1; i<=10;i++)
08 {
09 var category = new Category();
10 category.Name = "Category " + i;
11 category.Description = "Description for Category " + i;
12 category.Products = new List
13
14 for(var j=1; j<=10;j++)
15 {
16 var product = new Product() {Name = "Product " + j, Price = 10*j};
17 category.Products.Add(product);
18 }
19
20 categories.Add(category);
21 }
22
23 return categories;
24 }
25 }
The above code populates the categories collection with some dummy data and assigns ten products to each category. The DataAccess.GetCategories is triggered from the page code behind as shown in the code below:
view sourceprint?
01 public partial class MasterDetailGridViewUsingJQuery : System.Web.UI.Page
02 {
03 protected void Page_Load(object sender, EventArgs e)
04 {
05 if(!Page.IsPostBack)
06 {
07 BindData();
08 }
09 }
10
11 private void BindData()
12 {
13 gvCategories.DataSource = DataAccess.GetCategories();
14 gvCategories.DataBind();
15 }
16 }
The gvCategories is the name of the GridView control which is being populated using the categories collection returned from the DataAccess.GetCategories method.
Applying JQuery Effect on the GridView Control:
Before applying JQuery effect let's take a look at the ASPX code for the GridView control.
view sourceprint?
01
02
03
04
05
06
07 <%# Eval("Name") %>
08
09
13
14
15
16
17
18
19
20
21
When the page is loaded for the first time only category name is being displayed as shown in the screenshot below:
The JQuery implementation is shown in the code below:
view sourceprint?
01
Basically we are attaching the click function to all the elements on the page whose class name is ".categoryStyle". Inside the click event we use the JQuery siblings function to find the element with the class ".productStyle" and make it show and hide. The effect is shown below:
Conclusion:
In this article we learned how to use JQuery effects to enhance the user experience when implementing master-detail GridView scenarios.
Comments
Post a Comment