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

Hide Columns


I bought javascript controls and I want to use grid control. I filled it from mysql database but I want to hide the ID column. When switch on this function row is hide but the header not. Why?

<link rel='nofollow' href="themes/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="themes/default.css" rel="stylesheet" />
<link rel='nofollow' href="themes/default-responsive.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.globalize.min.js" type="text/javascript"></script>
<script src="js/jsondata.min.js"></script>
<script src="js/jsrender.min.js"></script>
<script src="js/ej.web.all.min.js" type="text/javascript"></script>
<script src="js/properties.js" type="text/javascript"></script>

<div id="Grid"></div>

<script type="text/javascript">
    $(function () {       
        var data = ej.DataManager({
        data.adaptor=new ej.UrlAdaptor();
            dataSource: data,
            toolbarSettings: {
                showToolbar: true,
                toolbarItems: [
                    ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit,
                    ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update,
                    ej.Grid.ToolBarItems.Cancel, ej.Grid.ToolBarItems.PrintGrid
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
            allowPaging: true,
            columns: [
                { field: "id", isPrimaryKey: true, headerText: "col1", width: 80, textAlign: ej.TextAlign.Right },
                { field: "name", headerText: "col2", width: 80, textAlign: ej.TextAlign.Right },
                { field: "weight", headerText: "col3", width: 75, textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
                { field: "volumetric", width: 75, textAlign: ej.TextAlign.Right },
                { field: "def", headerText: "col4", width: 80, editType: ej.Grid.EditingType.Boolean }
        var gridObj = $("#Grid").data("ejGrid");          
        if (gridObj.getVisibleColumnNames().length > 1) {


2 Replies

KI Kovács István November 11, 2014 02:27 PM UTC

This is a picture about the problem.

AS Alan Sangeeth S Syncfusion Team November 12, 2014 02:29 PM UTC

Hi Kovács,



Thanks for using Syncfusion Products.



We have analyzed your code snippets and found that you are hiding column at initial load which is the cause of the issue since the “hideColumns” Grid method is called before complete rendering of Grid. So we suggest you to use “visible” property of Grid Columns to hide the columns at initial rendering of Grid. Please refer the following code snippets.


columns: [

                     { field: "OrderID", isPrimaryKey: true, headerText: "OrderID",visible:false, textAlign: ej.TextAlign.Right, width: 80 },





For your convenience we have created a sample and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/directtrac/130733/EJGrid1865652427.zip



If you need to use “hideColumns” method at initial load then we suggest you to call it in “actionComplete” Grid event. Please refer the following code snippets.



actionComplete: "complete"


    function complete(args) {

        if (hide == false && args.requestType == "refresh") {// We have used hide variable to check this is an initial load

            hide = true;

            var gridObj = $("#Grid").data("ejGrid");





Please let us know if you need any further assistance.

Alan Sangeeth S


Live Chat Icon For mobile
Up arrow icon