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

[Richard]

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

[Dimiter Madjarov]

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

 

 

[Kathirvel]

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]

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

 

 

[Ross]

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]

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

[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.Bound(p => p.MyBool).ClientTemplate("\#= MyBool ? 'Yes' : 'No' \#")

[Cristina]

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]

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

[Magnus]

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 ? '☑' : '☐' #");
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]

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]

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

[Khanh]

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]

Hi Khanh,

With enabled columnMenu, the columnMenuInit event should be used instead of the filterMenuInit event:

• http://dojo.telerik.com/UmevIRos/2

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik