Make Bool Column CheckBox and Yes/No

8 posts, 1 answers
  1. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 22 Apr 2020 Link to this post

    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());
                }
     
    ...
  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2151 posts

    Posted 27 Apr 2020 Link to this post

    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.
  3. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 27 Apr 2020 in reply to Ivan Danchev Link to this post

    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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2151 posts

    Posted 30 Apr 2020 Link to this post

    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.
  5. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 30 Apr 2020 in reply to Ivan Danchev Link to this post

    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

  6. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2151 posts

    Posted 05 May 2020 Link to this post

    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.
  7. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 22 May 2020 in reply to Ivan Danchev Link to this post

    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

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2151 posts

    Posted 27 May 2020 Link to this post

    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.
Back to Top