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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid control - Hide Header

Thread ID:

Created:

Updated:

Platform:

Replies:

127640 Nov 29,2016 11:46 PM UTC Dec 1,2016 12:11 PM UTC JavaScript 3
loading
Tags: ejGrid
Michael Salzlechner
Asked On November 29, 2016 11:46 PM UTC

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

thanks

Mike

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


Michael Salzlechner
Replied On 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
 

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;