Column selection in EJ2 JavaScript Grid control

1 Mar 202424 minutes to read

Column selection in grid control allows you to select one or more columns using mouse interactions or arrow keys. This feature is useful when you want to highlight, manipulate, or perform actions on specific columns within the Grid.

To enable column selection in the Grid, you need to set the selectionSettings->allowColumnSelection property to true.

Here’s an example of how to enable column selection using allowColumnSelection property in the Grid control:

var grid = new ej.grids.Grid({
    dataSource: data,
    selectionSettings: { type: 'Multiple' },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 }
    ],
    height: 315
});
grid.appendTo('#Grid');

var toggle = new ej.buttons.Switch({
    change: onSwitchChange,
    checked: false
});
toggle.appendTo('#switch');

function onSwitchChange() {
    grid.selectionSettings.allowColumnSelection = toggle.checked; 
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div>
            <label style="padding: 0px 0px 20px 0px"> Enable/Disable column selection</label>
            <input type="checkbox"  id="switch">
        </div>
        <div style="padding: 20px 0px 0px 0px" id="Grid"></div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Single column selection

The EJ2 JavaScript Grid allows you to select a single column within the Grid. This feature is particularly useful when you want to focus on specific columns or perform actions on the data within a particular column.

To enable single column selection, set the selectionSettings->allowColumnSelection property to true. This property enables column selection and set the selectionSettings->type property to Single. This configuration allows you to select a single column at a time within the grid.

Here’s an example of how to enable single column selection using allowColumnSelection and type property :

var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  selectionSettings: { allowColumnSelection: true, type: 'Single' },
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer Name', width: 150 },
    { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
    { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
    { field: 'ShippedDate', headerText: 'Shipped Date', width: 130, format: 'yMd', textAlign: 'Right' },
    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
  ],
  height: 315
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

Multiple column selection

The EJ2 JavaScript Grid allows you to select multiple columns within the Grid. This feature is particularly useful when you need to focus on or perform actions on several columns simultaneously.

To enable multiple column selection, set the selectionSettings->allowColumnSelection property to true. This property enables column selection and set the selectionSettings->type property to Multiple. This configuration allows you to select a multiple column at a time within the grid.

Here’s an example of how to enable multiple column selection using allowColumnSelection and type property :

var grid = new ej.grids.Grid({
    dataSource: data,
    allowPaging: true,
    selectionSettings: { allowColumnSelection: true, type: 'Multiple'  },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
        { field: 'CustomerID', headerText: 'Customer Name', width: 150 },
        { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
        { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
        { field: 'ShippedDate', headerText: 'Shipped Date', width: 130, format: 'yMd', textAlign: 'Right' },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
    ],
    height: 315
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

Select columns externally

You can perform single column selection, multiple column selection, and range of column selection externally in a Grid using built-in methods. This feature allows you to interact with specific columns within the Grid. The following topic demonstrates how you can achieve these selections using methods.

Single column selection

The EJ2 JavaScript grid allows you to select a single column within the Grid. This feature is particularly useful when you want to focus on specific columns or perform actions on the data within a particular column.

To achieve single column selection, you can use the selectColumn method. This method selects the column by passing the column index as a parameter.

Column selection requires the selectionSettings->allowColumnSelection property to true and type should be Single.

The following example, demonstrates how to select a single column within the Grid by obtaining the selected column index through a textbox control and passing these column index as argument to the selectColumn method. When the button event is triggered by clicking the Select Column button, a single column is selected within the Grid:

var grid = new ej.grids.Grid({
    dataSource: data,
    selectionSettings: { allowColumnSelection: true, type: 'Single' },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
        { field: 'Freight', headerText: 'Freight', width: 100, format: 'C2'} 
    ],
    height: 315
});
grid.appendTo('#Grid');

var textbox = new ej.inputs.TextBox({
    width: 140,
});
textbox.appendTo('#textboxvalue');

var button = new ej.buttons.Button({
    content: 'Select Column',
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function () {
    columnIndex = parseInt(textbox.element.value, 10);
    if (!isNaN(columnIndex)) {
        grid.selectionModule.selectColumn(columnIndex);
    }
};
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div>
            <label style="padding: 30px 17px 0 0">Enter the column index:</label>
            <input type="text" id="textboxvalue" />
        </div>
        <div style="padding: 10px 0 0px 11%">
            <div id='buttons'></div>
        </div>
        <div style="padding: 20px 0px 0px 0px" id="Grid">
        </div>
    </div>
<script>
    var ele = document.getElementById('container');
    if (ele) {
        ele.style.visibility = "visible";
    }   
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

Multiple column selection

The EJ2 JavaScript Grid allows you to select multiple columns within the Grid. This feature is particularly useful when you need to focus on or perform actions on several columns simultaneously.

To achieve multiple column selection, you can use the selectColumns method. This method selects the columns by passing an array of column indexes as a parameter.

Column selection requires the selectionSettings->allowColumnSelection property to true and type should be Multiple.

The following example demonstrates how to select multiple columns in the Grid by calling the selectColumns method within the button click event and passing an array of column indexes as arguments.

var grid = new ej.grids.Grid({
    dataSource: data,
    selectionSettings: { type: 'Multiple', allowColumnSelection: true },
    pageSettings: { pageSize: 8 },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
        { field: 'Freight', headerText: 'Freight', width: 100, format:'C2', textAlign: 'Right' },
        { field: 'OrderDate', headerText: 'Order Date', width: 100, format:'yMd', textAlign: 'Right' },
        { field: 'ShipCity', headerText: 'Ship City', width: 100 },
        { field: 'ShipName', headerText: 'Ship Name', width: 100 }
    ],
    height: 315
});
grid.appendTo('#Grid');

var button1 = new ej.buttons.Button({content: 'Select [1, 2]'});
button1.appendTo('#selectColumns1');
document.getElementById('selectColumns1').addEventListener('click', function () {
    selectColumns([1, 2]);
});

var button2 = new ej.buttons.Button({content: 'Select [0, 2]'});
button2.appendTo('#selectColumns2');  
document.getElementById('selectColumns2').addEventListener('click', function () {
    selectColumns([0, 2]);
});
  
var button3 = new ej.buttons.Button({content: 'Select [1, 3]'});
button3.appendTo('#selectColumns3');  
document.getElementById('selectColumns3').addEventListener('click', function () {
    selectColumns([1, 3]);
});
  
var button4 = new ej.buttons.Button({content: 'Select [0, 5]'});
button4.appendTo('#selectColumns4');    
document.getElementById('selectColumns4').addEventListener('click', function () {
  selectColumns([0, 5]);
});
 
var button5 = new ej.buttons.Button({content: 'Select [1, 6]'});
button5.appendTo('#selectColumns5');
document.getElementById('selectColumns5').addEventListener('click', function () {
  selectColumns([1, 6]);
});
 
var button6 = new ej.buttons.Button({content: 'Select [0, 2, 5]'});
button6.appendTo('#selectColumns6');
document.getElementById('selectColumns6').addEventListener('click', function () {
  selectColumns([0, 2, 5]);
});

var button7 = new ej.buttons.Button({content: 'Select [1, 3, 6]'});
button7.appendTo('#selectColumns7');
document.getElementById('selectColumns7').addEventListener('click', function () {
  selectColumns([1, 3, 6]);
});
  
var button8 = new ej.buttons.Button({content: 'Select [2, 4, 6]'});
button8.appendTo('#selectColumns8');
document.getElementById('selectColumns8').addEventListener('click', function () {
  selectColumns([2, 4, 6]);
});

var button9 = new ej.buttons.Button({content: 'Select [0, 3, 5]',});
button9.appendTo('#selectColumns9');
document.getElementById('selectColumns9').addEventListener('click', function () {
  selectColumns([0, 3, 5]);
});

function selectColumns(columns) {
  grid.selectionModule.clearColumnSelection();
  grid.selectionModule.selectColumns(columns);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div style="padding: 10px 0px 20px 0px">
            <button  id="selectColumns1"></button>
            <button  id="selectColumns2"></button>
            <button  id="selectColumns3"></button>
            <button  id="selectColumns4"></button>
            <button  id="selectColumns5"></button>
          </div>
          <div style="padding: 10px 0px 20px 0px">
            <button  id="selectColumns6"></button>
            <button  id="selectColumns7"></button>
            <button  id="selectColumns8"></button>
            <button  id="selectColumns9"></button>
          </div>
        <div style="padding: 20px 0px 0px 0px">
        <div id="Grid">
    </div>
<script>
    var ele = document.getElementById('container');
    if (ele) {
        ele.style.visibility = "visible";
    }   
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

Range of column selection

Range of column selection allows you to select a group of columns within the Grid. This feature is particularly useful when you need to perform actions on a consecutive set of columns or focus on specific column ranges.

To achieve range of column selection, you can use the selectColumnsByRange method. This method selects the columns by specifying the start and end column indexes.

The following example demonstrates how to select a range of columns within the Grid by obtaining the selected column’s start index and end index through textbox controls. Then, pass these start index and end index as arguments to the selectColumnsByRange method. When you trigger the button event by clicking the Select Columns button, a range of columns is selected within the Grid.

var grid = new ej.grids.Grid({
    dataSource: data,
    selectionSettings: {  allowColumnSelection: true, type: 'Multiple'  },
    pageSettings: { pageSize: 8 },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
        { field: 'Freight', headerText: 'Freight', width: 100, format: 'C2'} 
    ],
    height: 315
});
grid.appendTo('#Grid');

var textbox1 = new ej.inputs.TextBox({
  width: 140,
});
textbox1.appendTo('#textboxvalue1');

var textbox2 = new ej.inputs.TextBox({
  width: 140,
});
textbox2.appendTo('#textboxvalue2');

var button = new ej.buttons.Button({
  content: 'Select Columns',
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function (args) {
  startIndex = parseInt(textbox1.value, 10); 
  endIndex = parseInt(textbox2.value, 10); 
  grid.selectionModule.clearRowSelection();
  if (!isNaN(startIndex) && !isNaN(endIndex)) {
    grid.selectionModule.selectColumnsByRange(startIndex, endIndex);
  }
};
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div style="padding-bottom: 10px">
            <label style="padding: 30px 17px 0 0">Enter the start column index: </label>
            <input type="text" id="textboxvalue1" />
        </div>
        <div style="padding-bottom: 10px">
            <label style="padding: 30px 17px 0 0">Enter the end column index: </label>
            <input type="text" id="textboxvalue2" />
        </div>
        <div style="padding-bottom: 10px">
            <div id='buttons'></div>
        </div>
        <div id="Grid">
        </div>
    </div>
<script>
    var ele = document.getElementById('container');
    if (ele) {
        ele.style.visibility = "visible";
    }   
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

Select with existing column

Select with existing column allows you to add a column to the current selection without clearing the existing column selection in the Grid control. This feature is valuable when you want to expand your selection to include additional columns while preserving previously selected columns.

To achieve this, you can use the selectColumnWithExisting method. This method selects a column along with an existing column by specifying the column index as a parameter.

The following example demonstrates how to select a column with an existing column by obtaining the selected column index through a textbox control and passing this column index as an argument to the selectColumnWithExisting method. When you trigger the button event by clicking the Select Columns button, it selects the specified column along with any existing selections within the Grid.

var grid = new ej.grids.Grid({
    dataSource: data,
    selectionSettings: { allowColumnSelection: true, type: 'Multiple' },
    pageSettings: { pageSize: 8 },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
        { field: 'Freight', headerText: 'Freight', width: 100, format: 'C2'} 
    ],
    height: 315
});
grid.appendTo('#Grid');

var textbox = new ej.inputs.TextBox({
    width: 140,
});
textbox.appendTo('#textboxvalue1');

var button = new ej.buttons.Button({
    content: 'Select Column',
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function (args) {
    var startIndex = parseInt(textbox.value, 10); 
    if (!isNaN(startIndex) ) {
      grid.selectionModule.selectColumnWithExisting(startIndex);
    }
};
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div>
            <label style="padding: 30px 17px 0 0">Enter the Column index:</label>
            <input type="text" id="textboxvalue1" />
        </div>
        <div style="padding: 10px 0 0px 11%">
            <div id='buttons'></div>
        </div>
        <div style="padding: 20px 0px 0px 0px" id="Grid">
        </div>
    </div>
<script>
    var ele = document.getElementById('container');
    if (ele) {
        ele.style.visibility = "visible";
    }   
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

Clear column selection programmatically

Clearing column selection programmatically in the Grid control is a useful feature when you want to remove any existing column selections. To achieve this, you can use the clearColumnSelection method.

The clearColumnSelection method is applicable when the selection type is set to Multiple or Single.

In the following example, it demonstrates how to clear column selection by calling the clearColumnSelection method in the button click event.

var grid = new ej.grids.Grid({
    dataSource: data,
    allowPaging:true,
    pageSettings:{pageSize:5},
    selectionSettings: { allowColumnSelection: true },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
        { field: 'Freight', headerText: 'Freight', width: 100, format: 'C2'} 
    ],
});
grid.appendTo('#Grid');

var button = new ej.buttons.Button({
    content: 'Clear Column Selection',
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function () {
    grid.selectionModule.clearColumnSelection()
};
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div style="padding: 20px 0px 0px 0px">
            <div id='buttons'></div>
        </div>
        <div style="padding: 20px 0px 0px 0px" id="Grid">
        </div>
    </div>
<script>
    var ele = document.getElementById('container');
    if (ele) {
        ele.style.visibility = "visible";
    }   
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

Column selection events

The Grid provides several events related to column selection that allow you to respond to and customize the behavior of column selection. Here are the available column selection events:

columnSelecting: This event is triggered before any column selection occurs. It provides an opportunity to implement custom logic or validation before a column is selected, allowing you to control the selection process.

columnSelected: This event is triggered after a column is successfully selected. You can use this event to perform actions or updates when a column is selected.

columnDeselecting: This event is triggered just before a selected column is deselected. It allows you to perform custom logic or validation to decide whether the column should be deselected or not.

columnDeselected: This event is triggered when a particular selected column is deselected. You can use this event to perform actions or validations when a column is no longer selected.

In the following example, column selection is canceled when the value of field is equal to CustomerID within the columnSelecting event. The headerCell background color changes to green when the columnSelected event is triggered, and it changes to red when the columnDeselecting event is triggered. Furthermore, column selection is canceled when the value of field is equal to CustomerID within the columnDeselected event is triggered. A notification message is displayed to indicate which event was triggered whenever a column is selected.

var grid = new ej.grids.Grid({
    dataSource: data,
    columnSelected: columnSelected,
    columnSelecting: columnSelecting,
    columnDeselected: columnDeselected,
    columnDeselecting: columnDeselecting,
    selectionSettings: { allowColumnSelection: true },
    pageSettings: { pageSize: 8 },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
        { field: 'Freight', headerText: 'Freight', width: 100, format: 'C2' }
    ],
    height: 315
});
grid.appendTo('#Grid');

var message = document.getElementById('message');

function columnSelected(args) {
    message.textContent = `Trigger columnSelected`;
    args.headerCell.style.backgroundColor = 'rgb(96, 158, 101)';
}

function columnSelecting(args) {
    message.textContent = `Trigger columnSelecting`;
    if (args.column.field == "CustomerID")
        args.cancel = true;
}

function columnDeselected(args) {
    message.textContent = `Trigger columnDeselected`;
    args.headerCell.style.backgroundColor = 'rgb(245, 69, 69)';
}

function columnDeselecting(args) {
    message.textContent = `Triggercolumn Deselecting`;
    if (args.column.field == "Freight")
        args.cancel = true;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div style="text-align: center;"><p style="color:red;" id="message"></p></div></br>
        <div id="Grid">
        </div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>