Make Bool Column CheckBox and Yes/No

[Joel]

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());
            }

...

[Ivan Danchev]

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

[Joel]

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

[Ivan Danchev]

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

[Joel]

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

[Ivan Danchev]

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

[Joel]

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

[Ivan Danchev]

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