Display 'Yes' instead of 'true' for Boolean values

1 Answer 4657 Views
Grid
Richard
Top achievements
Rank 1
Richard asked on 30 Jun 2014, 09:32 AM
I cannot seem to find out how to do this from the documentation.

My model has a Boolean field which displays as 'true' or 'false'.

How can I set the grid to display as 'Yes' or 'No' respectively.

Thanks,

Richard

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 30 Jun 2014, 10:19 AM
Hello Richard,


You could use a template to achieve this. Here is a sample implementation, assuming that an Ajax dataSource is used in the current case.
E.g.
columns.Bound(p => p.MyBool).ClientTemplate("#= MyBool ? 'Yes' : 'No' #")

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Kathirvel
Top achievements
Rank 1
commented on 14 Jan 2015, 06:45 AM

Hi I am using the same for an editable column and and am not able to see Yes/No in the bool column. But am able to the check box on clicking the cell(in edit mode.)

 columns.Bound(m => m.IsTrue).Title("Auto WO").Width(50).ClientTemplate("<#=IsTrue? 'Yes' : 'No' #>");

Regards,
Kathir
Dimiter Madjarov
Telerik team
commented on 14 Jan 2015, 10:11 AM

Hello Kathir,

The reason for the issue are the added < and > signs. The rendered template results in <no> or <yes> which is interpreted as a tag from the browser. As a solution, you could define the template the following way.
E.g.

columns.Bound(p => p.IsTrue).ClientTemplate("#: IsTrue ? '<Yes>' : '<No>' #")

Note that the #: # syntax is used, which uses HTML encoding to display the values.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Ross
Top achievements
Rank 1
commented on 02 Dec 2015, 03:20 AM

Hi I'm trying to do this in a hierarchy grid, but any solution tried I received the message Deducible is not defined, Deducible is the bool field I' trying to display as yes or no values. 

 columns.Bound(f => f.Deducible)
    .Width(80).ClientTemplate("#: Deducible ? '<Yes>' : '<No>' #");

 and with this

 columns.Bound(f => f.Deducible)
    .Width(80).ClientTemplate("#= Deducible ? 'Yes' : 'No' #");

 

Can you help me? In editable mode the checkbox is displayed but if the grid is not editable it doesn't work

 

Dimiter Madjarov
Telerik team
commented on 02 Dec 2015, 11:38 AM

Hello Ross,

The provided sample code is correct and is working as expected on my end. Make sure that the property name is spelled correctly in the template.

Regards,
Dimiter Madjarov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Lasse
Top achievements
Rank 1
commented on 05 Apr 2016, 01:02 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.Bound(p => p.MyBool).ClientTemplate("\#= MyBool ? 'Yes' : 'No' \#")
Cristina
Top achievements
Rank 1
commented on 29 Jun 2016, 04:21 PM

I've tried this but any time I add the ClientTemplate, my view throws and an HTTP Exception citing "invalid filename for file monitoring" on the EditorTemplates folder (I'm guessing this is because there is an error with my value so it is trying to find a template file...?).  Otherwise, everything works well, I'm just trying to display my true/false as yes/no.  My grid is inside a detail template, so could this possibly be a syntax error.  Here is my detail template (the grid is ajax bound based on a report ID passed to the template):

<script id="template" type="text/x-kendo-tmpl">
    @(Html.Kendo().Grid<RV_GroupViewModel>()
          .Name("gridReportGroup")
          .Columns(columns =>
          {
              columns.Bound(rg => rg.IsSelected).Title("Has Access?").ClientTemplate("#= IsSelected ? 'Yes' : 'No' #");
              columns.Bound(rg => rg.GroupName);
              columns.Bound(rg => rg.GroupIdentity);
          })
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .HtmlAttributes(new { style = "height:200px;" })
          .DataSource(dataSource => dataSource
              .Ajax()
              .Batch(true)
              .PageSize(10)
              .Model(model =>
              {
                  model.Id((g => g.GroupId));
                  model.Field(g => g.GroupIdentity).Editable(false);
                  model.Field(g => g.GroupName).Editable(false);
              })
              .Read(read => read.Action("ReportGroup_Read", "ReportViewer",new{reportId = "#=ReportId#"}))
              .Update(update => update.Action("ReportGroup_Update", "ReportViewer", new { reportId = "#=ReportId#" })))
          .ToClientTemplate())
 
</script>

Dimiter Madjarov
Telerik team
commented on 01 Jul 2016, 12:17 PM

Hello Cristina,

When a template is used in a detail template, the # symbols should be escaped, so that the template is skipped by the master Grid and evaluated by the child instead.
E.g.

columns.Bound(rg => rg.IsSelected).Title("Has Access?").ClientTemplate("\\#= IsSelected ? 'Yes' : 'No' \\#");

Please let me know if this was the reason for the problem.

Regards,
Dimiter Madjarov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Magnus
Top achievements
Rank 1
commented on 25 Aug 2016, 10:36 PM

Hi, just a quick update. I'm using MVC Core 1.0 (rc1-final) in Visual Studio 2015 update 2 with Telerik Kendo.MVC 2016.1.301, and I did not have to quote the # characters:

columns.Bound(col => col.MadeChoicePresets1IsSelected).Title(MadeChoicePresets1Title).ClientTemplate("#=MadeChoicePresets1IsSelected ? '&#x2611;' : '&#x2610;' #");
columns.Bound(col => col.MadeChoicePresets2IsSelected).Title(MadeChoicePresets2Title).ClientTemplate("<input type='checkbox' disabled='disabled' #=MadeChoicePresets2IsSelected ? checked='checked' : '' # />");

Don't know which version this happened or how, but man this has caused me many hours...

In the first column above I use some Unicode characters instead of 'Yes' or 'No', just to show both techniques.

Khanh
Top achievements
Rank 1
commented on 24 Jul 2018, 07:00 AM

Dear admins,
When users hover on Yes/No radio buttons, I would like to have a tooltip "Show items with value that: Yes (if users hover Yes button) or No (if users hover No button)". How can I do that ? Please refer the attachment for more details and give me your suggestions. Thanks.

This is my code:
$("#grid").kendoGrid({
  columns: [
    { 
      field: "Value",
      title: "Option", 
      template: kendo.template('#= Value ? "Yes" : "No" #')      
    }
  ],
  dataSource: {
    data: [
      { Value: true },
      { Value: false }
    ],
    schema: {
      model: {
        fields: {
          Value: { type: "boolean" }
        }
      }
    }
  },
  filterable: {
    messages: 
      { 
        isTrue: "Yes", 
        isFalse: "No"
      }
  }
});

Alex Hajigeorgieva
Telerik team
commented on 25 Jul 2018, 06:18 PM

Hello, Khanh,

The Kendo UI Grid boolean filter menu already has a title which the browser shows, however, you may initialize a Kendo UI Tooltip and use the labels of the options as a filter. You can initialize the tooltip by adding a filterMenuInit event handler (be sure to check for which field it is triggered in case there are more filter columns):

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/filtermenuinit

I tested this suggestion and I found the result too crowded with both the browser's title attribute generating a tooltip and the Kendo UI Tooltip as well, so I removed the title attribute of the form:

filterMenuInit: function(e){
  e.container.removeAttr("title");
  e.container.kendoTooltip({
    filter:"label",
    content: function(e){
     return "Show Items with value that: " + $(e.target).text();         
    }
  });
}

Here is a sample Dojo for your reference:

http://dojo.telerik.com/@bubblemaster/OcIVasoB

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Khanh
Top achievements
Rank 1
commented on 17 Aug 2018, 07:38 AM

Hi Alex,

I run demo that you sent me and it works well, but when I try to apply that code into my application, it does not work, I don't know why. Image below is my app, when I hover on Yes or No radio, the tooltips are always: "Show items with value that:". My expectation:

- When I hover Yes radio -> The tooltip is "Show items with value that: Yes"

- When I hover No radio -> The tooltip is "Show items with value that: No"

Thanks.

 

Konstantin Dikov
Telerik team
commented on 21 Aug 2018, 07:08 AM

Hi Khanh,

With enabled columnMenu, the columnMenuInit event should be used instead of the filterMenuInit event:
Hope this helps.


Regards,
Konstantin Dikov
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.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or