Kendo Grid showing Yes or No instead of True or False

[Richard Wilde]

On the kendo grid is it possible to substitute True/False for Yes/No?

My Json returns true or false but I would like the grid to show Yes or No.

Is this possible or should I return the data from the server as Y/N?

[Alexander Valchev]

Hello Richard,

That could be achieved through a column template. Please check the following code snippet:

columns: [

    { field: "BooleanVal", template: "#= BooleanVal ? 'yes' : 'no' #" }

]



Kind regards,
Alexander Valchev
the Telerik team

[Marcel Härry]

Hi Alexander
Works fine
I have my problems with Javascript, so forgive my ignorance.
Whats about this number signs  # is that a telerik specific template marker?
Regards

Marcel

[Alexander Valchev]

Hi Marcel,

Yes, the hash symbols are part of Kendo UI Template syntax. You can read more about them in this help topic:

• http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview

Regards,
Alexander Valchev
Telerik

[Senthilkumar]

How to retain the check box instead of true or false without using client template?

[Alexander Valchev]

Hello Senthilkumar,

It is not possible to include a checkbox in Grid column without template.

Regards,
Alexander Valchev
Telerik

 

 

[HaBo]

Alexander,

This will not work when you group by column, there you will still see value as true or false.

How do you handle over there?

[Alexander Valchev]

Hi HaBo,

Could you please provide code snippets that shows your current configuration so I can examine it and assist you further?

Regards,
Alexander Valchev
Telerik

 

 

[HaBo]

 

var tqColumns = [{
                template: "#= (SendEmails == true ) ? 'Yes' : 'No' #",
                field: "SendEmails",
                title: "Emails"
            }
        ];

 

 $("#Grid").kendoGrid({
            dataSource: tqGridData,
            columns: tqColumns,
            //maxheight: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            detailTemplate: kendo.template($("#queueDetails").html()),
            detailInit: detailInit,
            dataBound: function () {
                // this.expandRow(this.tbody.find("tr.k-master-row").first());
               
            }
        });

 

 

[Lasse]

I used the same template in my grid, but when I added a sub grid using the same template, I got an error "Invalid Template".

After hours and hours of trial and error, I finally found the solution to that problem which was to escape the template hash tags in the subgrid like this:

columns: [
    { field: "BooleanVal", template: "\#= BooleanVal ? 'yes' : 'no' \#" }
]

[Alexander Valchev]

Hi HaBo,

Your code looks OK. I prepared a sample page which works OK on my side. Can you check it and let me know what I am missing?

Regards,
Alexander Valchev
Telerik

 

 

[HaBo]

Alexander,

in your example,group the grid by a Boolean field and and notice the group title.

I have attached a screen shot.

[HaBo]

screen shot did not show up. So adding it again.

[Alexander Valchev]

Hello HaBo,

For this case use the groupHeaderTemplate:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.groupHeaderTemplate
• example: http://dojo.telerik.com/iQoju/3

Regards,
Alexander Valchev
Telerik

 

 

[Jon]

Is there a way to do this with Kendo Grid for Angular?

For example:

<kendo-grid
  [data]="view | async">
  <kendo-grid-column [field]="'logical_field'"></kendo-grid-column>
</kendo-grid>

 

Currently, this outputs a raw 'true' or 'false' to the Grid. How can we change this to show 'Yes' or 'No' in the Angular context?

[Alexander Valchev]

Hello Jon,

Yes, the same approach is applicable for Kendo Grid for Angular.
For more information please refer to the cell template help topic.

Regards,
Alexander Valchev
Progress Telerik

[Jon]

Thank you, Alexander. This works perfectly.

<kendo-grid
  [data]="view | async">
  <kendo-grid-column [field]="'logical_field'">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span>{{dataItem.logical_field? "Yes" : "No"}}</span>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

[Jennifer]

Hi, how can I do that with Angular?

I tried to put the template but it has no effect.

[Jennifer]

I mean not in the proposed way because I'm using columns array

ts file:

{ field: "IsIp", title: "IP", width: "200" }

html file:

<kendo-grid-column [headerClass]="{ 'grid-header': true }" *ngFor="let col of columns" [field]="col.field" [title]="col.title"

      [width]="col.width" [format]="col.format">

</kendo-grid-column>

[Martin]

Hi Jennifer,

Indeed when *ngFor Angular directive is used creating the Grid columns dynamically, different templates for the columns need to be defined. Displaying the correct ones per column requires some configuration options to be set such as *ngIf or *ngSwitch:

    <kendo-grid [data]="gridData">
      <kendo-grid-column
        *ngFor="let col of columnsConfig"
        [field]="col.field"
        [title]="col.title"
        [width]="col.width"
      >
        <ng-template
          *ngIf="col.field === 'Discontinued'"
          kendoGridCellTemplate
          let-dataItem
        >
          <span>{{ dataItem.Discontinued ? "Yes" : "No" }}</span>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>

Please check the following example where the suggested approach is demonstrated:

https://stackblitz.com/edit/angular-tpdqhq-hc596d?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Jennifer]

Thanks Martin, I later figured it out, and it's exactly how I implemented it :)