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

Merge Grid Header

Hi Team,
I want to Merge header and split row in multiple cell  in grid view, So please send me a demo code for merge Grid header in mvc   for you easy understand please find the attached image

1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 26, 2017 04:55 PM UTC

Hi Ritesh, 

Thanks for contacting Syncfusion Support. 

We have checked your query and we suspect that you need to Merge Grid Header  in MVC. We have achieved your requirement merge the Headers using “MergeHeaderCellInfo” event of the Grid. Please refer to the code example:- 

@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.dataSource) 
            .AllowPaging() 
            .AllowSorting() 
            .ClientSideEvents(e => e.MergeHeaderCellInfo("mergeHeaderCellInfo")) 
           .Columns(col => 
          { 
             col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(v => v.AddRule("required",true).AddRule("number", true)).Width(100).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Width(100).Add(); 
            .   .   . 
        }) 
         
    ) 
 
 <script> 
        function mergeHeaderCellInfo(args) { 
            args.headerCellMerge(1, 3); 
        } 
    </script> 


We have provided support for “MergeHeaderCellInfo” event from release version 15.2.0.43.  Please check the release notes :- 


Please refer to the API link :- 


We have prepared the sample Demo in v15.2.0.46 


Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon