customFilter

customFilter - Gets a string contains html with inputs or a function which adds custom filter widget for the column. The arguments passed to the function are following:

• cell – thml cell to which the editor will be instantiated

In order to filter by the value of a field with the custom filter widget you need to handle the getCustomFilterValue event and to pass value to its e.value argument. For example:

$(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData,
            schema: {
                fields: {
                    id: { type: Number },
                    name: { type: String },
                    company: { type: String },
                    phone: { type: String },
                    age: { type: Number }
                }
            },
        },
        filtering: {
            enabled: true
        },
        paging: true,
        columns: [
            { field: "id", width: "250px", title: "ID", customFilter: myCustomFilter  },
            { field: "name", title: "Person Name", width: "250px" },
            { field: "company", title: "Company" },
            { field: "phone", title: "Phone", width: "250px" },
            { field: "age", title: "Age" }
        ],
        events: {
            getCustomFilterValue : function (e) {
                e.value = $("#test").swidget().value();
            }
        }      
    });
});

function myCustomFilter(cell) {
    $('<div id="test"/>')
        .appendTo(cell)
        .shieldDropDown({
            dataSource: {
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
            }
        });
}