This is a migrated thread and some comments may be shown as answers.

Make Bool Column CheckBox and Yes/No

7 Answers 340 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 22 Apr 2020, 01:53 PM

Can you tell me how to template my IsActive column to a CheckBox column.  I also want the option of having it show text Yes/No instead of True/False.

        @(Html.Kendo().Grid<Person>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Command(command => command
                          .Custom("Detail")
                          .Click("goDetail"))
                          .Width(Glossary.Portal.ButtonWidth);
                        columns.Bound(p => p.FirstName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.LastName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.IsActive);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                    .HtmlAttributes(new { style = "height:550px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data("getData"))
              ))
 
        <script type="text/javascript">
 
            function getData() {
                return @Html.Raw(Model.GetIndexData());
            }
 
...

7 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 27 Apr 2020, 12:10 PM

Hello Joel,

Here's how the column's template can be set, so that it displays Yes/No instead of the default True/False:

columns.Bound(p => p.IsActive).ClientTemplate("<span> #= IsActive ? 'Yes' : 'No' # </span>");

Regards,
Ivan Danchev
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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 27 Apr 2020, 01:47 PM

Yes, this works for me.  However, the filter column header still says "is true; is false.  

 

First, why is there a filter header here?  My column is not defined to have a filter.

Second, how can I filter looking for true/false.

 

Thanks for your help,

Joel

0
Ivan Danchev
Telerik team
answered on 30 Apr 2020, 11:16 AM

Joel,

The column has a filter header because Filterable is enabled at the Grid level:

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

If filtering is not needed for a specific column, it can be disabled:

columns.Bound(p => p.IsActive).ClientTemplate("<span> #= IsActive ? 'Yes' : 'No' # </span>").Filterable(false);

As for changing the labels, if filtering is enabled, this can be done like this:

columns.Bound(p => p.IsActive).ClientTemplate("<span> #= IsActive ? 'Yes' : 'No' # </span>").Filterable(filterable => filterable.Messages(m => m.IsFalse("No")).Messages(m => m.IsTrue("Yes")));

Regards,
Ivan Danchev
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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 30 Apr 2020, 03:25 PM

This worked.  The last follow-up question is... instead of an option group, is there a way to have the filter be a checkbox?

Thanks for your help,

Joel

0
Accepted
Ivan Danchev
Telerik team
answered on 05 May 2020, 03:40 PM

Joel,

A the filter can be customized through Filterable.Cell.Template:

.Filterable(filterable => filterable.Cell(c => c.Template("cellTemplate"))

In the cellTemplate function, the attributes of the input from which the radio buttons are rendered can be modified, so that a checkbox is rendered instead:

function cellTemplate(e) {
    e.element.attr({
      "type": "checkbox",
      "data-bind": "checked: value"
    });
};

Regards,
Ivan Danchev
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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 22 May 2020, 02:58 PM

My users don't like the checkbox.  This represents 3 states:  Yes, No and Unfiltered.  So, when the form loads and the state is Unfiltered it shows the checkbox as unchecked.  In this state, there is some confusion as to if this is actually No because it is unchecked.

So, now we want to have a combobox there with all 3 states.  Unfiltered (default), Yes, No.  Can you show me how to use a combobox as the filtering mechanism?

 

Thanks again, Joel

0
Ivan Danchev
Telerik team
answered on 27 May 2020, 11:37 AM

Hello Joel,

To show a ComboBox as a column filter, initialize a ComboBox in the the previously suggested cellTemplate function, as demonstrated below:

function cellTemplate(e) {
	e.element.kendoComboBox({
        dataSource: {
            data: [
            { text: "Yes", value: true },
            { text: "No", value: false }
            ]
        },
        dataTextField: "text",
        dataValueField: "value",
        valuePrimitive: true,
        placeholder: "Unfiltered"
        });
};


Regards,
Ivan Danchev
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.
Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Ivan Danchev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or