Custom bool filter and advanced filter questions

[Giovanni]

Hello,
I'm trying to setup a custom filter for boolean. Is it possible? For the other filter types I have no problem, but for boolean filter I can't set up my UI widget. This is my code for filter set up:

filterable:
{
ui: function(element)
{
element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data: [
{text:"True", value:true},
{text:"False", value:false}
]}),
dataTextField: "text",
dataValueField: "value"
});
}
}

I would like to have a dropdown with the two value, "True" or "False". I don't have any errors, but the custom filter is not displayed.
Moreover I have also another couple of questions:

1) Is it possible to remove the "Or" logical operator from the dropdown? I would like to have only the "And" operator.
2) Is it possible to remove the "extra" field from only one filter? If I setup "extra:true" all the filters have the extra options.

Thanks

[Alexander Valchev]

Hello Giovanni,

Thank you for getting in touch with us. Straight to your questions:

I'm trying to setup a custom filter for boolean. Is it possible?
This is not possible - by design boolean fields does not support filter customization (you can only change the labels of radio buttons). The main obstacle is that this filter menu uses checked binding while the other filter inputs use value binding. Checked binding works with check boxes/radio buttons only, the DropDownList is a select element.

1) Is it possible to remove the "Or" logical operator from the dropdown? I would like to have only the "And" operator
I am afraid that this is currently not possible through the configuration options. The only possible solution is to find the corresponding DropDownList widget and remote the "Or" option from its DataSource.

2) Is it possible to remove the "extra" field from only one filter? If I setup "extra:true" all the filters have the extra options.
Yes, you can set extra: false to a single column only. 

{ field: "name", filterable: { extra: false } },

Regards,
Alexander Valchev
the Telerik team

[Alexander]

" (you can only change the labels of radio buttons)."

Is there documentation on how to do this? I'm trying to get the filter radio button labels to match the template strings applied to my boolean field.

[Nikolajs]

@(Html.Kendo().Grid<EntityName>()

        .Name("GridName")

        .Columns(columns =>

        {

            columns.Bound(c => c.HasEditingRights);

        })

        .Filterable(filterable =>filterable.Messages(m=>m.IsFalse("No"))
           .Messages(m=>m.IsTrue("Yes")))

)

For bool filter's labels try this approach.

[Alexander]

Thanks Nikolajs, I was looking for a way to do it client-side with Kendo UI Web. Your response helped me though! In case anyone else wonders about this, here's how to do it:

$().kendoGrid({
  columns: [
    { 
      field: "FieldName", 
      title: "FieldTitle", 
      template: kendo.template('#= FieldName ? "trueString" : "falseString" #'),
      filterable: { messages: { isTrue: "trueString", isFalse: "falseString" } }
    }
  ]
});

[Stefan]

Hi Alexander,

Just wondering if it is now possible to create a custom filter for boolean? If not, is there a different way to filter nullable booleans? The filter currently defaults to the "is true / is false", but no option for neither (null).

Thanks,
Stefan.

[Alexander Valchev]

Hi Stefan,

Null filtering is not supported at present. This is a top feature request at Kendo UI feedback portal and will be implemented in Q1 2016 release which is due to be published in January 2016.

Regards,
Alexander Valchev
Telerik

 

 

[Stefan]

Awesome, looking forward to it!

Thanks.

[Skip]

It certainly would be helpful if the API documentation mentioned this.

[Skip]

(that's in reference to the earlier comment that filter customization is not supported on Boolean columns --- I clicked "reply" to that message, but it still put my message at the end)

[Skip]

jeez ... apparently the link embedding doesn't work either .... I'm referring to this documentation:
http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#configuration-columns.filterable.ui

[Alexander Valchev]

Hello Skip,

New operators are documented in filterable.operators.[string/number/date/enum] section

• http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#configuration-filterable.operators.string.isnull
• http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#configuration-filterable.operators.string.isnotnull
• http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#configuration-filterable.operators.string.isempty
• http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#configuration-filterable.operators.string.isnotempty
• //etc.

Regards,
Alexander Valchev
Telerik

 

 

[Skip]

Hi Alexander,

My comment was in regard to your response on Feb 7 2013:

I'm trying to setup a custom filter for boolean. Is it possible?
This is not possible - by design boolean fields does not support filter customization

 

When creating a custom filter, you would be utilizing the UI property of the column's filterable setting, as documented here:
http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#configuration-columns.filterable.ui

That documentation makes no mention of the fact that creating a custom filter for a Boolean column is not possible.
When you attempt to do so, it simply does not work.  
There is no error, it simply does not work.

That's why I think it would be helpful if the documentation of the UI property mentioned this.

[Boyan Dimitrov]

Hello Skip,

 

Thank you for your feedback, indeed we will update the article. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Scott Waye]

If you get to the bottom here and are disappointed, you can vote for this feature: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/12477711-bool

[Konrad]

Hello.

Can you combine the "isempty" and the "isnull" filter in a way that offers just 1 filter to the user in the grid header? As a user, I do not want to set up 2 filters linked with OR to simply list all entries, that LOOK empty, which can be undefined, null or an empty string. We need a filter like "looksempty" which performs both, the "isempty" and the "isnull" filtering...

Explanation: Some database null-values are not transmitted with JSON, so they are undefined in the datasource. With a template we display them as an empty string, but this does not affect the filtering, which is performed on the datasource. Filtering those undefined values cannot be performed with "isempty". But filtering empty strings cannot be performed with the "isnull" filter...

In .Net there is something like String.IsNullOrEmpty(), which is great. Something like that would be needed in the filtering here as well.

[Boyan Dimitrov]

Hello,

I am afraid  that adding a custom filter to the Grid's filter menu is currently not supported If you consider that it would be a useful addition to Kendo UI you could post it as a suggestion in our Kendo User Voice portal. If it gets popular among the community we will consider to implement it in future releases of Kendo UI.

Regarding the current scenario, since a custom client side filtering is required, I would suggest you to implement it outside of the Grid and manually filter the dataSource data with the filter method. This approach allows to set a filter expression containing both operators with "OR" logic. 

Regards,

Boyan Dimitrov

Telerik by Progress

[Chris]

In the original Admin response it is indicated that 'Checked binding works with check boxes/radio buttons only'.

Does this mean there is a way to change a bool filter from two Radio Buttons to one Checkbox?

[Boyan Dimitrov]

Hello Chris,

Indeed the checked binding works only with checkbox and radio buttons. More information can be found in the  Checked Binding article. 

The problem is that boolean columns do not allow any customization ( columns.filterable.ui will do nothing for boolean columns). 

Regards,
Boyan Dimitrov
Progress Telerik

[venky]

hiii,

am created a published filed(boolean)for this field filterable property is not working according to page wise ...if i filter on 2nd page it is giving me everytime on first page results only using kendogrid .can anyone help me out from this...

       Thank you.

[Boyan Dimitrov]

Hello venky,

I am afraid that the provided information is insufficient to be able to determine what is causing the described behavior. It will be great if you can send us a sample dojo example that replicates the problem you are facing. 

Regards,
Boyan Dimitrov
Progress Telerik

[venky]

Ya sure,

  Server filtering is not working ..here is my code

<div id="orderitems-grid"></div>
    <script>

 $("#orderitems-grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: "@Html.Raw(Url.Action("OrderItemsList", "Seller"))",
                    type: "POST",
                    dataType: "json"
                },
                update: {
                    url: "@Html.Raw(Url.Action("UpdateOrderItem", "Seller"))",
                    type: "POST",
                    dataType: "json"
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id:"Id",
                    fields: {
                        ProductName: { editable: false,type:"string"},
                        AttributesXml:{ editable:false },
                        SubOrderNumber: { editable: false, type: "number"},
                        PriceInclTax: {editable: false},
                        UnitPriceInclTax: {editable: false},
                        Quantity: {editable: false},
                        SubTotalInclTaxValue: {editable: false},
                        DiscountAmountInclTax: { editable: false },
                        SellerName: { editable: false},
                        OrderItemStatusId: { editable: true },
                        SellerRegisteredCompanyName: { editable: false,type:"string" }
                    }
                }
            },
            requestEnd: function (e) {
                if (e.type == "create" || e.type == "update") {
                    this.read();
                }
                if(e.type=="update" && e.response!="")
                {
                    alert(e.response);
                }
            },
            error: function (e) {
                display_kendoui_grid_error(e);
                // Cancel the changes
                this.cancelChanges();
            },
            pageSize: 25,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        pageable: {
            refresh: true,
            pageSizes: [50, 100, 150, 200],
            buttonCount: 10
        },
        sortable: true,
        resizable: true,
        editable: {
            confirmation: false,
            mode: "inline"
        },
        filterable: {
            extra: false,
            operators: {
                string: {
                    contains: "Contains",
                    eq: "Is equal to",
                    startswith: "Starts with"
                }
            }
        },
        scrollable: false,
        columns: [{
            field: "ProductName",
            title: "Product Name",
            template: '<a href ="@Url.Content("~/Product/Edit/#=ProductId#")">#=ProductName#</a>',
            width: 300
        }, {
            field: "AttributesXml",
            title: "Attributes",
            encoded: false,
            filterable: false,
            width: 150
        }, {
            field: "SubOrderNumber",
            title: "SubOrder No",
            width: 115,
            template: "<a href=\"\" onclick=\"window.open('/Order/GetOrderItemNotes/#=Id#','WindowOrderItemNote','align=center'); return false;\">#=SubOrderNumber#</a>",
        }, {
            field: "UnitPriceInclTax",
            title: "UnitPrice Incl Tax",
            width: 110,
            filterable: false,
            template: '<span style="font-weight:bold;color:\\#0000CD">₹&nbsp;#:UnitPriceInclTax #</span>'
        }, {
            field: "Quantity",
            title: "Qty",
            width: 75,
            filterable: false,
        }, {
            field: "SubTotalInclTaxValue",
            title: "Sub Total",
            width: 100,
            filterable: false,
            template: '<span style="font-weight:bold;color:\\#0000CD">₹&nbsp;#:SubTotalInclTaxValue #</span>'
        },{
            field: "DiscountAmountInclTax",
            title: "Discount",
            width: 100,
            filterable: false,
            template: '<span style="font-weight:bold;color:\\#0000CD">₹&nbsp;#:DiscountAmountInclTax #</span>'
        },{
            field: "PriceInclTax",
            title: "Price Incl Tax",
            width: 110,
            filterable: false,
            template: '<span style="font-weight:bold;color:\\#0000CD">₹&nbsp;#:PriceInclTax #</span>'
        }, {
            field: "SellerRegisteredCompanyName",
            title: "Company Name",
            template: '<a href="Edit/#=SellerId#">#=SellerRegisteredCompanyName#</a>',
            width: 200
        }, {
            field: "OrderItemStatusId",
            title: "Status",
            editor: OrderItemStatusDropDownEditor,
            template: "#=OrderItemStatus#",
            filterable: false,
            width: 250
        }, {
            command: ["edit"],
            title: "Action",
            filterable: false,
            width: 100
        }],

});

</script>

is there anything i missed ??

[Boyan Dimitrov]

Hello venky,

According to our documentation for the type of the Kendo UI DataSource the supported values are: 

    - "odata" which supports the OData v.2 protocol
    - "odata-v4" which partially supports odata version 4
    - "signalr"

The purpose of the Kendo UI DataSource type property is to use a predefined transport and/or schema.

I guess that currently the service does not parse the incoming data (filter expression and so on) so the actual filtering on the server is not performed. In the following https://github.com/telerik/kendo-examples-asp-net you can find examples for communication between Kendo UI Grid and web api, services and etc. 

Regards,

Boyan Dimitrov

Progress Telerik