Blog Post

Getting Started with Outlook GroupBy in jQuery Grid

In 2011 Volume 2, one of the most valued feature added to the grid is the Outlook GroupBy capability. This allows the user to grab a column header and drop it within the group by area, and the grid creates visual grouped rows that the user can then expand and see data relevant for that particular group.

 In this blog I am going to show you how to enable grouping within your Infragistics jQuery Grid control. First, I am going to show you a JavaScript/HTML example, and then the within an ASP.NET MVC Environment.

JavaScript/HTML

In order to show a JavaScript/HTML based example, I am going to first create a JSON array on the client which is what I am going to use as my data source. 

   1: var gridData = { "Records": [{ "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 43659, "OrderQty": 1, "ProductID": 776, "UnitPrice": 2024.9940 }, { "SalesOrderID": 46249, "OrderQty": 1, "ProductID": 774, "UnitPrice": 3399.9900 }, { "SalesOrderID": 46250, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46251, "OrderQty": 1, "ProductID": 777, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46252, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46253, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46254, "OrderQty": 1, "ProductID": 749, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46255, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46256, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46257, "OrderQty": 1, "ProductID": 773, "UnitPrice": 3399.9900 }, { "SalesOrderID": 46258, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46259, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46260, "OrderQty": 1, "ProductID": 749, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46261, "OrderQty": 1, "ProductID": 775, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46262, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46263, "OrderQty": 1, "ProductID": 749, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46264, "OrderQty": 1, "ProductID": 777, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46265, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46266, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46267, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46268, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46269, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46270, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46271, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46272, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46273, "OrderQty": 1, "ProductID": 778, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46274, "OrderQty": 1, "ProductID": 777, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46275, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46276, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46277, "OrderQty": 1, "ProductID": 760, "UnitPrice": 699.0982 }, { "SalesOrderID": 46278, "OrderQty": 1, "ProductID": 762, "UnitPrice": 699.0982 }, { "SalesOrderID": 46279, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46280, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46281, "OrderQty": 1, "ProductID": 774, "UnitPrice": 3399.9900 }, { "SalesOrderID": 46282, "OrderQty": 1, "ProductID": 772, "UnitPrice": 3399.9900 }, { "SalesOrderID": 46283, "OrderQty": 1, "ProductID": 778, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46284, "OrderQty": 1, "ProductID": 763, "UnitPrice": 699.0982 }, { "SalesOrderID": 46285, "OrderQty": 1, "ProductID": 773, "UnitPrice": 3399.9900 }, { "SalesOrderID": 46286, "OrderQty": 1, "ProductID": 768, "UnitPrice": 699.0982 }, { "SalesOrderID": 46287, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46288, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46289, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46290, "OrderQty": 1, "ProductID": 778, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46291, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46292, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46293, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46294, "OrderQty": 1, "ProductID": 772, "UnitPrice": 3399.9900 }, { "SalesOrderID": 46295, "OrderQty": 1, "ProductID": 764, "UnitPrice": 699.0982 }, { "SalesOrderID": 46296, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46297, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46298, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46299, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46300, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46301, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46302, "OrderQty": 1, "ProductID": 749, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46303, "OrderQty": 1, "ProductID": 769, "UnitPrice": 699.0982 }, { "SalesOrderID": 46304, "OrderQty": 1, "ProductID": 777, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46305, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46306, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46307, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46308, "OrderQty": 1, "ProductID": 749, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46309, "OrderQty": 1, "ProductID": 777, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46310, "OrderQty": 1, "ProductID": 767, "UnitPrice": 699.0982 }, { "SalesOrderID": 46311, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46312, "OrderQty": 1, "ProductID": 753, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46313, "OrderQty": 1, "ProductID": 752, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46314, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46315, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46316, "OrderQty": 1, "ProductID": 778, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46317, "OrderQty": 1, "ProductID": 766, "UnitPrice": 699.0982 }, { "SalesOrderID": 46318, "OrderQty": 1, "ProductID": 751, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46319, "OrderQty": 1, "ProductID": 750, "UnitPrice": 3578.2700 }, { "SalesOrderID": 46320, "OrderQty": 1, "ProductID": 778, "UnitPrice": 3374.9900 }, { "SalesOrderID": 46321, "OrderQty": 1, "ProductID": 764, "UnitPrice": 699.0982 }, { "SalesOrderID": 46322, "OrderQty": 1, "ProductID": 722, "UnitPrice": 178.5808 }, { "SalesOrderID": 46323, "OrderQty": 1, "ProductID": 771, "UnitPrice": 849.9975 }, { "SalesOrderID": 46323, "OrderQty": 1, "ProductID": 771, "UnitPrice": 849.9975 }, { "SalesOrderID": 46323, "OrderQty": 1, "ProductID": 771, "UnitPrice": 849.9975 }, { "SalesOrderID": 46323, "OrderQty": 1, "ProductID": 771, "UnitPrice": 849.9975 }, { "SalesOrderID": 46323, "OrderQty": 1, "ProductID": 771, "UnitPrice": 849.9975 }, { "SalesOrderID": 46323, "OrderQty": 1, "ProductID": 771, "UnitPrice": 849.9975 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46324, "OrderQty": 1, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46325, "OrderQty": 2, "ProductID": 733, "UnitPrice": 356.8980 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46326, "OrderQty": 3, "ProductID": 754, "UnitPrice": 874.7940 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46327, "OrderQty": 2, "ProductID": 776, "UnitPrice": 843.7475 }, { "SalesOrderID": 46328, "OrderQty": 1, "ProductID": 742, "UnitPrice": 722.5949 }, { "SalesOrderID": 46329, "OrderQty": 1, "ProductID": 739, "UnitPrice": 722.5949 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46330, "OrderQty": 2, "ProductID": 773, "UnitPrice": 849.9975 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46344, "OrderQty": 3, "ProductID": 762, "UnitPrice": 419.4589 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46345, "OrderQty": 4, "ProductID": 772, "UnitPrice": 849.9975 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46346, "OrderQty": 2, "ProductID": 715, "UnitPrice": 28.8404 }, { "SalesOrderID": 46347, "OrderQty": 1, "ProductID": 726, "UnitPrice": 183.9382 }, { "SalesOrderID": 46347, "OrderQty": 1, "ProductID": 726, "UnitPrice": 183.9382 }, { "SalesOrderID": 46347, "OrderQty": 1, "ProductID": 726, "UnitPrice": 183.9382 }, { "SalesOrderID": 46347, "OrderQty": 1, "ProductID": 726, "UnitPrice": 183.9382 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46348, "OrderQty": 3, "ProductID": 709, "UnitPrice": 5.7000 }, { "SalesOrderID": 46353, "OrderQty": 2, "ProductID": 775, "UnitPrice": 843.7475 }, { "SalesOrderID": 46353, "OrderQty": 2, "ProductID": 775, "UnitPrice": 843.7475 }, { "SalesOrderID": 46353, "OrderQty": 2, "ProductID": 775, "UnitPrice": 843.7475 }, { "SalesOrderID": 46353, "OrderQty": 2, "ProductID": 775, "UnitPrice": 843.7475 }, { "SalesOrderID": 46353, "OrderQty": 2, "ProductID": 775, "UnitPrice": 843.7475 }, { "SalesOrderID": 46354, "OrderQty": 1, "ProductID": 767, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589 }, { "SalesOrderID": 46355, "OrderQty": 1, "ProductID": 768, "UnitPrice": 419.4589}], "TotalRecordsCount": 0 };

Once I have created my datasource, I can now go ahead and create a place holder in my HTML mark-up, which I will then convert over to a jQuery Grid at runtime. I am going to create an HTML table element and specify an id of “igGrid” for it. 

   1: <table id="igGrid"></table>

Finally, I can convert the table element, attach it to the data defined above and convert everything into a jQuery client grid with grouping enabled. In the snippet below you’ll notice that I am using jQuery selector to grab the HTML element, convert it into a igGrid component and then specifying options for it. Within the feature collection, I can add a new feature named group by and add type to local since everything is available to me locally. You will notice in the ASP.NET MVC example below, the type will automatically be set to remote since it will query your model data for grouping the grid. 

   1: $(function () {
   2:    $("#igGrid").igGrid({
   3:        dataSource : gridData.Records,
   4:        height : 500,
   5:        features : [ { name : "GroupBy" , type : "local" } ]
   6:    });
   7: });

Here it is, a fully client side JavaScript & HTML based grid control, connecting to our JSON array and using jQuery to initialize the component and setting default options. Also, enabling the GroupBy feature by adding it to our features collection.

image

ASP.NET MVC

I will use data from my Northwind database, and use Entity Framework as my ORM solution. EF makes the Model part super easy to implement. You query your database using Linq queries to grab your data from the controller and pass it onto your view. Here is what my edmx looks like:

image

Next is to add a controller action for the grid to be able to get it’s data. I am going to define that in my HomeController.cs. It is going to grab all the customers from NorthWind and pass it to my view. 

   1: [GridDataSourceAction]
   2: public ActionResult CustomerList()
   3: {
   4:     NORTHWNDEntities northWindEntities = new NORTHWNDEntities();
   5:  
   6:     var customers = from c in northWindEntities.Customers
   7:                     orderby c.CustomerID
   8:                     select c;
   9:  
  10:     return View(customers.AsQueryable<Customer>());  
  11: }

Finally, I can use the Razor syntax in MVC 3 to define my grid in the view. Razor’s fluid syntax makes it very easy to read and understand the code. You will notice in the code snippet below that the bulk of the code is to setup the grid, display the 5 columns that I want to show up form my table, and some default settings. Line 13 is where I am enabling the groupby feature, if you want to enable more features, you can continue to chain methods and the grid will light up with the features you put in there.

   1: @(Html.Infragistics().Grid<jQuery11._2Blogs.Customer>()
   2:     .AutoGenerateColumns(true)  
   3:     .Columns(column =>  
   4:     {  
   5:         column.For(x => x.CustomerID).DataType("string").HeaderText("Customer ID");  
   6:         column.For(x => x.CompanyName).DataType("string").HeaderText("Company Name");  
   7:         column.For(x => x.ContactTitle).DataType("string").HeaderText("Contact Title");  
   8:         column.For(x => x.ContactName).DataType("string").HeaderText("Contact Name");  
   9:         column.For(x => x.Country).DataType("string").HeaderText("Country");  
  10:     })  
  11:     .Features(features =>  
  12:     {
  13:         features.GroupBy().Type(OpType.Remote);
  14:     })  
  15:     .DataSourceUrl(Url.Action("CustomerList"))              
  16:     .Width("100%")  
  17:     .Height("350px")  
  18:     .DataBind()  
  19:     .Render()
  20: )

Now, when you run the application and group by contact title, everything in the grid will be grouped by Contact Title. You will get grouped rows with a count of data rows with each group. You can customize the grouped rows text to display extra information including summary values.

image

Conclusion

In this post I showed you how to get started with the Groupby feature in the jQuery grid. You can use the grid in a pure jQuery/HTML application, or in the ASP.NET MVC 3 Razor views. This feature let’s the end user group the grid by any column and the entire layout of the grid changes with grouped rows and the data rows underneath them. It also show the count of rows within each grouped row.

To download sample, click here.



Posted 11-04-2011 2:37 PM by [Infragistics] Murtaza Abdeali
Filed under: , , , , , , , ,

Add a Comment


Sign in to post a comment.