Kendo Grid showing Yes or No instead of True or False

1 Answer 2646 Views
Grid
Richard Wilde
Top achievements
Rank 1
Richard Wilde asked on 06 Mar 2012, 04:19 PM

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?

1 Answer, 1 is accepted

Sort by
2
Alexander Valchev
Telerik team
answered on 07 Mar 2012, 10:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Marcel Härry
Top achievements
Rank 1
commented on 16 Feb 2014, 01:43 AM

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
Telerik team
commented on 17 Feb 2014, 10:22 AM

Hi Marcel,

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

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Senthilkumar
Top achievements
Rank 1
commented on 27 Jun 2015, 10:19 AM

How to retain the check box instead of true or false without using client template?
Alexander Valchev
Telerik team
commented on 01 Jul 2015, 03:56 PM

Hello Senthilkumar,

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

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
HaBo
Top achievements
Rank 1
commented on 31 Mar 2016, 10:39 PM

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
Telerik team
commented on 05 Apr 2016, 09:19 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
HaBo
Top achievements
Rank 1
commented on 05 Apr 2016, 10:31 AM

 

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
Top achievements
Rank 1
commented on 05 Apr 2016, 01:01 PM

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
Telerik team
commented on 08 Apr 2016, 08:40 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
HaBo
Top achievements
Rank 1
commented on 08 Apr 2016, 08:47 AM

Alexander,

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

I have attached a screen shot.

HaBo
Top achievements
Rank 1
commented on 08 Apr 2016, 10:07 AM

screen shot did not show up. So adding it again.
Alexander Valchev
Telerik team
commented on 13 Apr 2016, 07:41 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Jon
Top achievements
Rank 1
commented on 15 Apr 2019, 07:41 PM

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
Telerik team
commented on 18 Apr 2019, 07:58 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Jon
Top achievements
Rank 1
commented on 18 Apr 2019, 11:45 AM

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
Top achievements
Rank 1
commented on 23 Mar 2020, 03:23 PM

Hi, how can I do that with Angular?

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

Jennifer
Top achievements
Rank 1
commented on 23 Mar 2020, 03:32 PM

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
Telerik team
commented on 26 Mar 2020, 07:27 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Jennifer
Top achievements
Rank 1
commented on 26 Mar 2020, 10:40 AM

Thanks Martin, I later figured it out, and it's exactly how I implemented it :)
Tags
Grid
Asked by
Richard Wilde
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or