How can user enter a single condition when grid filterable extra=true

[Bill]

I have the following bit of configuration on a grid:

<filterable enabled="true" extra="true">
    <operators>
        <date isnotnull="Is set" isnull="Is not set" lt="Before" gte="On or after" />
    </operators>
</filterable>

which results in the filter menu in the attached image.  The problem is there is no obvious way for a user to select a single criteria.  The And/Or dropdown doesn't have a "Just The Above" option.  From looking at what is sent to the server side in the debugger, I found that if the user picks a second condition which requires an argument (such as equal, not equal, before, after, etc.) but doesn't provide the argument then the filter menu logic will only include the top condition.  But that's not particularly intuitive to users.  And given that the first condition in the list on my date columns (and hence the default) is "Is Not Set", then users would have to explicitly change the bottom condition in order to only have a single condition.

 

 

[Mihaela]

Hello Bill,

You can customize the filter menu of the date column by adding a Swtich component that will toggle the visibility of the second filter condition. For example:

• Handle the FilterMenuInit event of the Grid.
• Select the filter menu container and append an <input> element before the "And"/"Or" DropDownList.
• Initialize a Switch control with jQuery and handle its "change" event.
• Within the "change" event handler, select the respective elements with jQuery and show or hide them based on the state of the Switch.

<kendo-grid name="grid" on-filter-menu-init="onFilterMenuInit">
        ...
</kendo-grid>

<script>
function onFilterMenuInit(e) {
    if(e.field == "OrderDate") { // if the user opens the filter menu of column "OrderDate"
    $('<input id="switchCondition"/>').insertAfter('.k-datepicker:first').kendoSwitch({
        messages: {
            checked: "Show",
            unchecked: "Hide"
        },
        checked: true,
        change: function(e) {
            if(!e.checked) { // if the Switch is unchecked
                $("span[title='Filters logic']").find("select").data("kendoDropDownList").value("or"); // reset the filter logic to "or"
                $("span[title='Filters logic']").find("select").data("kendoDropDownList").trigger("change");
                $("span[title='Filters logic']").hide(); // hide the dropdown for the filter logic
                $("span[title='Additional operator']").hide(); // hide the second operator dropdown
                $('.k-datepicker').eq(1).find("input").data("kendoDatePicker").value(""); // reset the value of the second DatePicker
                $('.k-datepicker').eq(1).find("input").data("kendoDatePicker").trigger("change"); // trigger its "change" event (it is required when updating the value at runtime)
                $('.k-datepicker').eq(1).hide(); // hide the DatePicker
            } else {
                $("span[title='Filters logic']").show();
                $("span[title='Additional operator']").show();
                $('.k-datepicker').eq(1).show();
            }
        }
    });
    }
}
</script>

Here is a REPL sample where you can test this example (open the filter menu of column "OrderDate"):

https://netcorerepl.telerik.com/GIEZvvOj35yXhlXs49

I hope that helps.

Regards,
Mihaela
Progress Telerik