Hide Columns

[Kovács István]

Hi,

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({
            url:"?action=get_Data",
            insertUrl:"?action=insert_Data",
            updateUrl:"?action=update_Data",
            removeUrl:"?action=delrec",               
        });
        data.adaptor=new ej.UrlAdaptor();
        $("#Grid").ejGrid({
            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) {
            gridObj.hideColumns("col1");
        }
    });
</script>

[url=http://kepfeltoltes.hu/view/141111/pic_www.kepfeltoltes.hu_.png][img]http://kepfeltoltes.hu/thumb/141111/pic_www.kepfeltoltes.hu_.png[/img][/url]

[Kovács István]

This is a picture about the problem.
http://kepfeltoltes.hu/view/141111/pic_www.kepfeltoltes.hu_.png

[Alan Sangeeth S]

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.

$("#Grid").ejGrid({
...

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.

$("#Grid").ejGrid({

...

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");

            gridObj.hideColumns("OrderID");

        }

    }

 

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S