Grid control - Hide Header

[Michael Salzlechner]

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

thanks

Mike

[Seeni Sakthi Kumar Seeni Raj]

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. 

 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

https://help.syncfusion.com/api/js/ejgrid#methods:getheadercontent 

https://help.syncfusion.com/api/js/ejgrid#methods:getcontent 

 

We have prepared a sample that can be referred from the following location. 

 

Sample:  http://jsplayground.syncfusion.com/32htsa2w 

 

Regards, 

Seeni Sakthi Kumar S. 

[Michael Salzlechner]

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]

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. 

 

http://jsplayground.syncfusion.com/eoneswuh 

 

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.