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.

Hide Columns

Thread ID:

Created:

Updated:

Platform:

Replies:

117577 Nov 11,2014 09:03 AM Nov 12,2014 09:29 AM JavaScript 2
loading
Tags: ejGrid
Kovács István
Asked On November 11, 2014 09:03 AM

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
Replied On November 11, 2014 09:27 AM

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

Alan Sangeeth S [Syncfusion]
Replied On November 12, 2014 09:29 AM

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

 


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.

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.

;