boolean renderer for null-value

[Michael Kornatzki]

In my table i have a column with values of true, false and null.

If i use "displayAsCheckBox" even for the null-value a checkbox is rendered.

How can i get an empty cell instead of a checkbox?

[Seeni Sakthi Kumar Seeni Raj]

Hi Michael, 

Using the queryCellInfo event, any cell can be customized. In your case, if the respective column data is null (instead of the true/false), just empty the args.cell value (args.cell.innerHTML = ‘’).  

https://ej2.syncfusion.com/vue/documentation/grid/cell/#customize-cell-styles 

Regards,  

Seeni Sakthi Kumar S 

[Michael Kornatzki]

Hi Seeni,

is there also another way like a column-renderer?

Otherwise if i have many columns and rows i have to check all the time if it was a cell of a boolean rendered column.

Kind regards,

michael

[Seeni Sakthi Kumar Seeni Raj]

Hi Michael,  

We can understand your concern about the performance lag over the continuous triggering of the Grid’s queryCellInfo. So we suggest to use the rowDataBound event of the Grid. Refer to the following code example.  

https://codesandbox.io/s/vue-template-ty4nd 

Regards,  

Seeni Sakthi Kumar S 

[Michael Kornatzki]

Hi Seeni,

is there any other way?

For all of our tables cells with boolean null should not show a checkbox.

I need something universally like

      if (args.column.type === "boolean") {

        if (isNullOrUndefined(args.cell.value)) {

          args.cell.innerHTML = "";

        }

      }

Is this somehow possible?

Kind regards

michael

[Seeni Sakthi Kumar Seeni Raj]

Hi Michael,  

Using the queryCellInfo event, you can check the column-wise or cell-wise data whereas the rowDataBound event cannot make this happen. However you can loop through the cells of the row in the rowdDataBound event and programmatically collect the data related to the columns. Refer to the following code example.  

  methods: { 

    rowDataBound: function(args) { 

      var cols = this.$refs.grid.getColumns().filter((e)=>e.type==='boolean'); 

      for(var c = 0; c < cols.length; c++) { 

        if (isNullOrUndefined(args.data[cols[c].field])) { 

          var inx = this.$refs.grid.getColumnIndexByUid(cols[c].uid); 

          args.row.querySelector("td[aria-colindex='"+ inx +"']").innerHTML = null; 

        } 

      } 

    } 

  } 

Demo: https://codesandbox.io/s/vue-template-5lq4s 

Regards,  

Seeni Sakthi Kumar S