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

Grid control - Hide Header

Trying to figure out how to completely hide the grid header on a grid

thanks

Mike

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 30, 2016 11:39 AM UTC

Hi Mike,  
 
You can hide the Grid header in the dataBound event of the Grid as shown in the following code example. 
 
    <div id="Grid"></div> 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                dataSource: window.gridData, 
                allowPaging: true, 
                dataBound: function (args) { 
                    //hide Grid header 
                    this.getHeaderContent().addClass("e-hide"); 
                    //add border to the content at the top 
                    this.getContent().css("border-top", "1px solid #c8c8c8"); 
                }, 
                      . ..   
                           ...  
            }); 
        }); 
    </script> 
 
Refer to the following API Reference Sections. 
 
 
We have prepared a sample that can be referred from the following location. 
 
 
Regards, 
Seeni Sakthi Kumar S. 



MS Michael Salzlechner November 30, 2016 02:54 PM UTC

thanks

when i do this and also resize the grid control it gets messed up though

   <div id="OuterDiv" Style="Height:200px; Width:300px;">
   <div id="Grid"></div>
    </div>
  
    <script type="text/javascript">
        $(function () {
          var ds = [];
            $("#Grid").ejGrid({
             
                dataSource: ds,
                allowPaging: true,
                dataBound: function (args) {
                    this.getHeaderContent().addClass("e-hide");
                    this.getContent().css("border-top", "1px solid #c8c8c8");
                },
                columns: [
                         { field: "OrderID" },
                         { field: "CustomerID" },
                         { field: "EmployeeID" },
                         { field: "Freight", format: "{0:C}" },
                         { field: "OrderDate", format: "{0:MM/dd/yyyy}" },
                         { field: "ShipCity" }
                ]
            });
            
var mygrid = $("#Grid").data("ejGrid"); 
        mygrid.setDimension(200, 300);

mygrid.dataSource(window.gridData);
          
        mygrid.setDimension(200, 300);
        });
      
      window.onresize = function(event) {
   var mygrid = $("#Grid").data("ejGrid"); 
        myGrid.setDimension(200, 300);
};
    </script>

just to make sure this does only happens when i run it with the 14.3.0.49 that i have locally not when run online with your 14.4.0.15 when run using jsplayground

not sure if it will work locally with a newer version of your controls
 


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 1, 2016 12:11 PM UTC

Hi Mike,  
 
We are unable to reproduce any issue with the provided code example. We have prepared a sample in the 14.3.0.49 that can be referred from the following jsPlayground. 
 
 
We could see the Page of the of the Grid is aligned in two lines while rendering the Grid in constraint width which is the default behavior of the pager. Do you say it as an issue? 
 
If you would like to achieve responsiveness over the Grid while resizing the browser window or else, you would like to achieve anything similar to that please get back to us with the details on that. It would be helpful to analyze the issue and provide you solution as early possible.  
 
Regards, 
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon