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.

Adding and removing columns

Thread ID:

Created:

Updated:

Platform:

Replies:

121332 Dec 2,2015 06:51 AM Dec 14,2015 07:49 AM ASP.NET Web Forms 4
loading
Tags: Grid
Jorge Pampin
Asked On December 2, 2015 06:51 AM

Hello,

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

Thanks!

Madhu Sudhanan P [Syncfusion]
Replied On December 7, 2015 12:27 AM

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
Replied On December 11, 2015 06:55 AM

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
Replied On December 14, 2015 01:03 AM

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 [Syncfusion]
Replied On December 14, 2015 07:49 AM

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.

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.

;