Grid Filter bool Column custom filter

[Akhil]

I have a bool column

public bool isValid {set;get}

I have defined a custom template and filter.

 columns.Bound(c => c.isValid).Filterable(f => f
            .Cell(c => c.Template("MyBooleanCellTemplate"))
            ).ClientTemplateId("isValid").Title("Valid").Width(75);

<script>
    function MyBooleanCellTemplate(args) {
        var radioInput = $("<input type='radio'/>"); // Get the radio input element.
        var wrapper = args.element.parent(); // Obtain the parent container of the radio buttons.
        var inputName = kendo.guid(); // Specfify an unique element.

        args.element.remove(); // Remove the element.

        var labelTrue = $("<label/>")
            .text("")
            .append("<i style='color:green; font-size: 20px;' class='k-icon k-i-check'></i>")
            .append(radioInput); // Create a label that will contain the icon and add it to the radio input.

        radioInput.attr(kendo.attr("bind"), "checked:value") // Add the "bind" attribute, specify the unique and, and set a value.
            .attr("name", inputName)
            .val("true");

        var labelFalse = labelTrue.clone() // Create a label for the second radioInput that will contain an icon.
            .text("")
            .append("<i style='color:red; font-size: 20px;' class='k-icon k-i-x'></i>");

        radioInput.clone() // Clone the previously obtained radio button, set its value and append to the previously created label.
            .val("false")
            .appendTo(labelFalse);


        wrapper.append([labelTrue, labelFalse]); // Append both of the created labels.
    };
</script>

 

Also I have set default true on pageload.

 

I only want to see true or false value not both,

How remove the filter clear icon.

[Aleksandar]

Hello Akhil,

A possible approach could be to add a class to the container of the boolean template and hide the Clear Filters button using CSS:

wrapper.addClass("myClass")

<style>
        .myClass > button{
            display:none;
        }
</style>

Here is a sample REPL demonstrating the above.

Regards,
Aleksandar
Progress Telerik