1

In Kendo UI, I want to have custom column filter only with a single textbox on each column without any menus, operators and buttons. When the user types something on the textbox I have to execute 'Contains' filter in server side. What is easiest way to do this?

4

6 に答える 6

3

Take a look at this JSBin, I think that it achieves your desired functionality http://jsbin.com/equwes/1/edit

于 2013-02-07T21:59:55.073 に答える
0

You will have hard time to do this in a regular row. Use the Headers instead, you can put AutoComplete or regular input which on change triggers similar logic to the DropDownList in this demo. The DropDownList is in the ToolBar template but the same could be achieved in the column header template.

于 2012-12-21T22:27:34.123 に答える
0

We found Kendo doesn't have any full built in support for this, so customized the kendo grid by extending. We added text box for each column and implemented contains filter.

于 2013-08-24T06:53:32.300 に答える
0

This won't work exactly as you described, but if you want you can add a search box above the grid or in a toolbar template on the grid you can use the following code: 

     $("#txtSearcg").on("keypress blur change", function () {
        var filter = { logic: "or", filters: [] };
        $searchValue = $(this).val();
        if ($searchValue) {
            $.each($("#grid").data("kendoGrid").columns, function( key, column ) {
                if(column.filterable) { 
                    filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});
                }
            });
        }
        $("#grid").data("kendoGrid").dataSource.query({ filter: filter });
    });

Where txtSearch is the ID of the search input you are using. I created this code after I switched from jQuery Datatables plugin to Kendo UI Grid. I love Kendo but really missed the global search textbox offered by DataTables. I include this code on all my Kendo Grids. Again, not exactly what you described, this will be a single search box that will search all columns that are marked as filterable.

于 2013-11-27T21:18:27.640 に答える
0

I've modified G Siry's answer. It doesn't need modification and works for any grid. Just replace #grid with your grid id:

    var tr = $("<tr/>");
    tr.appendTo($("#grid thead"));
    $("#grid thead th").each(function (index) {
        var th = $(this);
        if (th.data("field")) {
            tr.append($("<th data-field='" + th.data("field") + "' class='k-header'><input class='k-textbox' /></th>"));
        }
        else
            tr.append($("<th/>"));
    });
    tr.find("input").keyup(function () {
        grid.dataSource.filter({
            operator: "contains",
            value: $(this).val(),
            field: $(this).parent("th").data("field")
        });
    });
于 2014-02-17T11:39:39.753 に答える
0

It only needs to clear kendoAutoComplete configuration 

columns: [
            {
                field: 'Name', title: 'Name',
                filterable: {
                    cell: {
                        template: function (container) {
                            container.element.kendoAutoComplete()
                        },
                        showOperators: false
                    }
                }
            }
        ]
于 2016-03-09T20:54:53.097 に答える