ejGrid javascript gridObj.hideColumns("Id");

[Stephen Harris]

I am trying to hide a column in an ejGrid using javascript. The best I can get is that it actually hides the Id column and itdoes show the remaining columns names but it does not render the data. It informs that there are 40 records but displays none. The hide column function is being called on the actionComplete event of the ejGrid:actionComplete: "ActionComplete". This runs he following function:

function ActionComplete(args) {

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

if (args.requestType == "refresh") {

gridObj.hideColumns("Id");

}

}

Also, it takes several seconds before it finishes the above, incomplete, process. When I run the grid load process without trying to hide the Id column it takes about a second. The grid is being loaded via a datamanager. I am using Syncfusion.EJ version14.3450.0.52. Any ideas?

[Jayaprakash Kamaraj]

Hi Stephen, 

Thank you for contacting Syncfusion support. 

 

In Grid, we have called refreshContent() in hideColumns method. So, the grid will be refreshed again and also actionComplete event will be triggered with requestType as refresh. To overcome this problem we suggest you to set flag variable and perform the action accordingly. Please refer to the below code example and sample. 

var flag = true; 

        $(function () { 

        

           $("#Grid").ejGrid({ 

                … 

 

               actionComplete : function(args){ 

                            

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

if (args.requestType == "refresh" && flag == true) { 

flag = false; 

gridObj.hideColumns("CustomerID"); 

} 

                           }, 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" }, 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

                columns: [ 

                         { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 

..                ] 

            }); 

 

        }); 

    </script> 

</body> 

</html> 

                           }, 

Sample: https://jsplayground.syncfusion.com/kpmvwk53 

Regards, 

Jayaprakash K.