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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hide Columns

Thread ID:





117577 Nov 11,2014 02:03 PM UTC Nov 12,2014 02:29 PM UTC JavaScript 2
Tags: ejGrid
Kovács István
Asked On November 11, 2014 02:03 PM UTC


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) {


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

This is a picture about the problem.

Alan Sangeeth S [Syncfusion]
Replied On 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



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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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