Adding and removing columns

[Jorge Pampin]

Hello,

How to add and remove columns by javascript when I need it?

Thanks!

[Madhu Sudhanan P]

Hi Jorge,

Thanks for contacting Syncfusion support.

The columns method is used to add or remove column dynamically to the grid. Please refer to the below code example.

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

// remove grid column

gridObj.columns("OrderID", "remove");

// Add new column into grid or modified already existing column in the grid.

gridObj.columns("CustomerID", "add");

//update already present column
gridObj.columns([{ field: "OrderID", width: 70, textAlign:"right" }]);

Please refer to the below API link for using columns method.

http://help.syncfusion.com/js/api/ejgrid#methods:columns

Regards,
Madhu Sudhanan. P

[Jorge Pampin]

Hello,

I have two problems when I remove all columns and then I add new columns:

1. The horizontal scroll doesn't move the column's headers.
2. I configure some columns like combobox edit, but it doesn't work:

GridCOFs.columns([{
                field: Columna.Field, headerText: Columna.HeaderText,
                visible: Columna.Visible, allowEditing: Columna.AllowEditing,editType: 5, dataSource: Columna.DataSource
            }]);
Thanks!

[Alisasmith]

Hi,
Use the following code to add and remove the columns in JavaScript:-

Code for adding column in JavaScript

function appendColumn()

{

   var tbl = document.getElementById('my-table'), // table reference

       i;

   // open loop for each row and append cell

   for (i = 0; i < tbl.rows.length; i++)

{

       createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');

   }

}

Code for removing column in Java Script:-

function deleteColumns()

{

   var tbl = document.getElementById('my-table'), // table reference

       lastCol = tbl.rows[0].cells.length - 1,    // set the last column index

       i, j;

   // delete cells with index greater then 0 (for each row)

   for (i = 0; i < tbl.rows.length; i++)

{

       for (j = lastCol; j > 0; j--)

{

           tbl.rows[i].deleteCell(j);

       }

   }

}

Thanks!!

[Gowthami V]

Hi Jorge,

Query 1: The horizontal scroll doesn't move the column's headers.

Before proceeding with your query we need below details,

1.     Share the code example that you have tried to remove and add the columns.

2.     Provide the more details like did you remove the and add the same columns or different columns.

The provided information will help to analyze the issue and provide you the response as early as possible.

Query 2:  I configure some columns like combobox edit, but it doesn't work:

If you want to set the editType as “Dropdownlist” then we need to bind the dataSource to the  column in the form of “value” and “text”. Ensure that you have bound the dataSource as value and text format.

var data = [

                { value: "bk1", text: "Apache RTR" },

                { value: "bk2", text: "CBR 150-R" },

                { value: "bk3", text: "CBZ Xtreme" },

                { value: "bk4", text: "Discover" }, { value: "bk5", text: "Dazzler" }
                ];

GridCOFs.columns([{

                    field: Columna.Field, headerText: Columna.HeaderText,

                    visible: Columna.Visible, allowEditing: Columna.AllowEditing,                                               editType: ej.Grid.EditingType.Dropdown, dataSource: data
                }]);

If you are still facing same issue then please provide more details about the issue and the provided information will help to analyze the issue and provide you the response as early as possible.

Regards,

Gowthami V.