Display a string for a boolean type column.

[alex]

Hello,

I have a grid

        <ej-grid e-data-source.bind="customerDtos"

                 e-columns.bind="columns"

                 e-allow-paging=true

                 e-page-settings.bind="pageSettings"

                 e-toolbar-settings.bind="toolbarSettings"

                 e-allow-sorting=true>

        </ej-grid>

 and the columns property is,

  this.columns = [

      { field: "name", headerText: "Name", textAlign: "center", priority:1 }, // priority = what should be taken precedence to displayed in responsive

      { field: "code", headerText: "Code", textAlign: "center" },

      { field: "attention", headerText: "Attention", textAlign: "center" },

      { template: "address1 " + "address2 " + "city " + "state " + "zip", headerText: "Address", textAlign: "center" },

      { field: "classValue", headerText: "Class", textAlign: "center" },

      { field: "notes", headerText: "Notes", textAlign: "center" },

      { field:"status",  headerText: "Active", textAlign: "center", }

    ];

How do I display either the string Active or Inactive for the column "status". 

"status" is a boolean type and as of now it is not displaying any value.

When I set type="boolean" a checkbox is displayed but it never gets checked.

Thank you.

[Vignesh Natarajan]

Hi Alex, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query and we have achieve your requirement by the displayAsCheckbox and Locale feature of the Grid. Refer the below code snippet 

 

Grid.js 

 

this.columns = [ 

      { field: "OrderID", headerText: "OrderID", textAlign: "center", priority:1 }, // priority = what should be taken precedence to displayed in responsive 

      { field: "CustomerID", headerText: "CustomerID", textAlign: "center" }, 

      { field: "EmployeeID", headerText: "EmployeeID", textAlign: "center" }, 

     { field: "Freight", headerText: "Freight", textAlign: "center" }, 

      { field: "OrderDate", headerText: "OrderDate", textAlign: "center" }, 

      { field:"Verfied",  headerText: "Active",displayAsCheckbox: false, textAlign: "center"}   ]; 

export class Grid { 

  constructor(templatingEngine) { 

     ej.Grid.Locale['en-US'] = { 

       True: "Active", 

                 False: "Inactive" 

      }; 

 

 

 

Refer the below code snippet for the output 

 

 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/133635/ze/syncfusion-template-repository-466386165  

 

Refer our help documentation for you reference 

 

https://help.syncfusion.com/api/js/ejgrid#members:columns-displayascheckbox  

 

Regards, 

Vignesh Natarajan