Is it possible to have two Checkbox columns on the same grid?

[James Carter]

Hi there,

is it possible to achieve having a grid with two checkbox columns so that the user does not have to place the row into edit mode to tick the checkboxes?

I tried adding them as below and the behavior of the grid when ticking items was strange.

I tried the following definition for the columns:

columns: [

                { field: 'IsSelected', type: "checkbox", width: 50 },

                 { field: 'IsSelected2', type: "checkbox", width: 50 },

                { field: 'FullName', headerText: 'FullName' },

            ],

Also on a different matter (JS + Grid again though) If I define a grid column with "width: 100, minWidth: 100, maxWidth:100"

When  the grid initially renders the column width gets set to a default that doesn't respect the minimum and maximum or the specified  width as it gets set to a width proportionate to the width of the grid.

I hope that my explanation of the problems is clear.

Cheers James

[Rajapandiyan Settu]

Hi James, 

Thanks for contacting Syncfusion support. 

Query #1: is it possible to achieve having a grid with two checkbox columns so that the user does not have to place the row into edit mode to tick the checkboxes? 

By analyzing this query, we suspect that you want to edit column by using checkbox control. If so, you can achieve this by using edit type as ‘booleanedit’ and you can show the checkbox in the Grid by setting displayAsCheckbox property as true. 

 

    { 

      field: 'Verified', 

      displayAsCheckBox: true, // render the checkbox in the Column 

      editType: 'booleanedit', // render the checkbox to edit a cell 

      width: 100, 

    } 

 

Sample: https://stackblitz.com/edit/cuto6w 

Query #2: If I define a grid column with "width: 100, minWidth: 100, maxWidth:100" 

When  the grid initially renders the column width gets set to a default that doesn't respect the minimum and maximum or the specified  width as it gets set to a width proportionate to the width of the grid. 

From the provided information we could see that you are using the columns minWidth and maxWidth property for setting a minimum and maximum width to the column. The minWidth and maxWidth column properties are used for restricting the column resize functionality between the specified minimum and maximum width respectively. It does not set minimum and maximum width for the column itself. So you need to set width to the column for it to not go below that value. 

We would like to share the behavior of the Grid structure. If we didn’t provide any width to the grid, then the default value auto is set to the grid width which adapts its parent container’s width.

For example, consider the parent container width or screen width is 1400px. Grid calculates total columns width and compares it with the parent containers width. If the parent container width greater than the total columns width then the remaining parent container width is equally shared to all the Columns like normal html table.

If the Grid’s total columns width exceeds its parent container width then the horizontal scrollbar shown in the Grid.

So, when you increase the window screen size, the parent container’s width equally shared to all the Columns. Since this is the default behavior of html table.

Please let us know if you have any concerns. 

Regards,  

Rajapandiyan S 

[James Carter]

Hi Rajapandiyan,

Query #1: If I use the booleanEdit and displayAsCheckBox then the user will have to put the row into edit mode to change the values of the checkboxes. Is there any way that the checkboxes could be ticked\unticked without having to edit and update? (The same as you can do with a single column of type = checkbox)

Query #2: I am setting the desired width of the column  "width: 100, minWidth: 100, maxWidth:100" so I would have expected that column to be 100px and for the columns that didn't have a width specified to be the ones that adjusted in width.

Cheers James

[Rajapandiyan Settu]

Hi James, 

 

Thanks for contacting Syncfusion support. 

 

Query #1: Is there any way that the checkboxes could be ticked\unticked without having to edit and update? (The same as you can do with a single column of type = checkbox) 

 

Based on your query, we could understood that you want edit a column using checkbox control with moving the Grid into Edit mode. You can achieve this by using updateRow method of Grid. 

 

updateRow: https://ej2.syncfusion.com/angular/documentation/api/grid/#updaterow 

 

In the below code example, we have rendered the checkbox control using columnTemplate feature. In its change event, we dynamically updated the checked value to the Grid by updateRow method. 

 

columnTemplate: https://ej2.syncfusion.com/javascript/documentation/grid/columns/#column-template 

Change: https://ej2.syncfusion.com/javascript/documentation/api/check-box/#change 

 

 

[index.js] 

 

 

var grid = new ej.grids.Grid({ 

  dataSource: data, 

  columns: [ 

    { 

      field: 'OrderID', 

      headerText: 'Order ID', 

      width: 'auto', 

      minWidth: 100, 

      isPrimaryKey: true, 

      textAlign: 'Right', 

    }, 

    { 

      field: 'Verified1', 

      template: '<input class="checkboxfield" type="checkbox">', 

      width: 150, 

    }, 

  ], 

  queryCellInfo: queryCellInfo, 

}); 

grid.appendTo('#Grid'); 

 

function queryCellInfo(args) { 

  if (args.column.field == 'Verified1' || args.column.field == 'Verified2') { 

    var checkbox = new ej.buttons.CheckBox({ 

      checked: args.data[args.column.field], 

      change: checkboxChange, 

    }); 

    // Render initialized CheckBox. 

    checkbox.appendTo(args.cell.querySelector('.checkboxfield')); 

  } 

} 

 

function checkboxChange(args) { 

  var rowInfo = grid.getRowInfo(args.event.target.closest('td')); 

  var updatedData = rowInfo.rowData; 

  updatedData[rowInfo.column.field] = args.checked; // modify the row data 

  grid.updateRow(rowInfo.rowIndex, updatedData); // updateRow(rowIndex,data) 

} 

 

 

 

Sample: https://stackblitz.com/edit/aehdca 

 

Note: The checkbox type column is used to perform the selection in Grid. We are not supposed to use this to edit a column. 

 

Query #2: I am setting the desired width of the column  "width: 100, minWidth: 100, maxWidth:100" so I would have expected that column to be 100px and for the columns that didn't have a width specified to be the ones that adjusted in width. 

 

By default, if the Grid’s parent container width exceeds the Grid columns width, then the remaining width will be equally shared to all the columns. This is the behavior of Grid table. But in your requirement, you want fixed width on some columns in Grid. 

 

If so, you can achieve this by providing any one of the column width as ‘auto’ and minWidth. Find the below sample for your reference. 

 

Sample: https://stackblitz.com/edit/aehdca 

 

In that sample, we have provided the auto width to the OrderID column. 

Please let us know if you have any concerns. 

 

Regards,  

Rajapandiyan S 

[James Carter]

Hi Rajapandiyan,

both suggestions worked a treat :)

Thank you very very much

[Rajapandiyan Settu]

Hi James, 

We are glad that you have achieved your requirement with the provided solution. 

 

Please get back to us if you need further assistance. 

Regards,  

Rajapandiyan S