CODEWITHSUNDEEP
javascriptjquerydata-bindingkendo-uikendo-grid
Anupheaus
Anupheaus

Reputation: 3801

Kendo UI grid custom filter using data-binding on checkbox

Here's what I want to achieve in a nutshell:

The ability to add a custom filter using checkboxes that when checked applies a custom filter value to the Kendo UI grid other than true or false.

Here's my custom filter template:

<div id="orderNumberFilterTemplate">
    <input type="hidden" data-bind="value:logic" value="or" />
        <label for="customerOrders" title="Show only orders going directly to the customer.">
            <input type="checkbox" class="k-checkbox" id="customerOrders" data-bind="checked:filters[1].value" name="orderTypes" value="6" />Direct to customer
        </label><br />
        <label for="galleryOrders" title="Show only orders going back to the store.">
            <input type="checkbox" class="k-checkbox" id="storeOrders" data-bind="checked:filters[2].value" name="orderTypes" value="5" />Direct to store
        </label><br />
        <label for="stockOrders" title="Show only restocking orders.">
            <input type="checkbox" class="k-checkbox" id="stockOrders" data-bind="checked:filters[3].value" name="orderTypes" value="3" />Stock orders
        </label><br />
</div>

Here is my custom filter function:

function orderNumberFilter(element) {           
        element.after('<div>' + $('#orderNumberFilterTemplate').html() + '</div>');
};

And here is my application of the filter function to the grid:

columns: [
    { 
        field: 'orderNumber', 
        title: 'Order Number', 
        filterable: {
            ui: orderNumberFilter,
        }
    }
]

What I am after here is that when someone ticks a checkbox, I want the filters to be updated with { field: 'myfield', operator: 'startswith', value: 6 } but being a checkbox, it is automatically updating them with value: true when checked. Is there any way to create a custom filter than specifies values rather than a checkbox true or false to the filter.

Also, is it possible to apply a binding attribute that specifies what kind of operator is used, as I'd really like to have the standard textbox filter from kendo work as normal but also have these checkboxes below use a different operator than the one applied to the textbox.

Upvotes: 0

Views: 3319

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Yes, check boxes values are true or false but you can add some extra information to them adding data-xyz attribute and then ask for xyz.

Example:

<label for="customerOrders" title="Show only orders going directly to the customer.">
    <input type="checkbox" class="k-checkbox" id="customerOrders" data-bind="checked:filters[1].value" name="orderTypes" data-value="6" />
    Direct to customer
</label>

I've replaced your value by a data-value. Now, I can do:

function orderNumberFilter(element) {           
    var value = $(element).data("value");
    ...
};

Example here : http://jsfiddle.net/OnaBai/cY9Wg/

Upvotes: 2

Related Questions