We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

I want to display grid with default grouping on page load

Technology must be angular js and mvc

I want example of grid view with grouping functionality 

I want to set default group so when page load I want to  gridview with default group.

Waiting for your quick reply

For your better understanding I have share image with this post.

Attachment: grouping_68ef67f5.rar

1 Reply

IR Isuriya Rajan Syncfusion Team September 14, 2015 07:16 AM UTC

Hi Rakesh,
Thanks for contacting Syncfusion support.
Your requirement can be achieved by allowGrouping property in Grid. Using the groupSettings property, we can group the particular column. 

<div id="Grid" ej-grid ="" e-datasource="data"  e-allowpaging="true" e-groupsettings-groupedcolumns="groupcol" e-allowgrouping="true" >

angular.module('listCtrl', ['ejangular'])

        .controller('PhoneListCtrl'function ($scope) {

            $scope.data = obj; 

            $scope.groupcol =["EmployeeID"];//Grouped column


We have created a sample using allowGrouping property in jsPlayground that you can download from the following location, 


Please try the above sample and let us know if it helps. If we misunderstood your query, please provide clear information regarding the requirements. It will help to provide a prompt solution.


Isuriya R

Live Chat Icon For mobile
Up arrow icon