milannankov/custom-filter.js

## custom-filter.js
$(function (window) {

    window.onFilterMenuInit = function (e) {

        // Create custom filtering for the "url" columns only.
        if (e.field === "url") {
            initUrlFilter(e, this);
        }
    };

    function initUrlFilter(e, kendoGrid) {

        var filterContext = {
            container: e.container,
            popup: e.container.data("kendoPopup"),
            dataSource: kendoGrid.dataSource,
            field: e.field
        };

        // Remove default filtering UI and create custom UI.
        initUrlFilterUI(filterContext);
    };

    function initUrlFilterUI(filterContext) {

        // Remove default filter UI
        filterContext.container.off();
        filterContext.container.empty();

        // Create custom filter UI using a template
        var template = kendo.template($("#filterMenuTemplate").html());
        var result = template({});
        filterContext.container.html(result);

        filterContext.container
            .on('submit', $.proxy(onSubmit, filterContext))
            .on('reset', $.proxy(onReset, filterContext));
    };

    function onSubmit(e) {

        // the context here is the filteringContext
        e.preventDefault();
        e.stopPropagation();

        var regExString = this.container.find('.regExInput').val();
        removeFilterForField(this.dataSource, this.field);
        applyRegExFilter(this.dataSource, this.field, regExString);
        this.popup.close();
    };

    function onReset(e) {

        // the context here is the filteringContext
        e.preventDefault();
        e.stopPropagation();

        removeFilterForField(this.dataSource, this.field);
        this.popup.close();
    };

    function applyRegExFilter(dataSource, field, regExString) {

        // Create custom filter
        var newFilter = {
            field: field,
            operator: filterByRegEx,
            value: regExString
        };

        var masterFilter = dataSource.filter() || { logic: "and", filters: [] };
        masterFilter.filters.push(newFilter);
        dataSource.filter(masterFilter);
    };

    function removeFilterForField(dataSource, field) {

        var masterFilter = dataSource.filter();

        if(!masterFilter) {
            return;
        }

        // Get existing filters for the field
        var existingFilters = jQuery.grep(masterFilter.filters, function (item, index) {
            return item.field === field;
        });

        jQuery.each(existingFilters, function(item) {
            var index = masterFilter.filters.indexOf(item);
            masterFilter.filters.splice(index, 1);
        });

        dataSource.filter(masterFilter);
    };

    function filterByRegEx(columnValue, value) {

        var regEx = new RegExp(value, "i");
        return regEx.test(columnValue);
    };

} (window));

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Kendo UI Grid Custom Filtering - RegEx Column Filter</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/custom-filter.css" rel="stylesheet" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.js"></script>
    <script src="js/custom-filter.js"></script>
</head>

<body>
    <div id="grid"></div>

    <script>

    var pages = [
        { name: "Home page", url: 'http://www.mypage.com/' },
        { name: "Products", url: 'http://www.mypage.com/products' },
        { name: "Product 1", url: 'http://www.mypage.com/products/product1' },
        { name: "Product 2", url: 'http://www.mypage.com/products/product2' },
    ];

    var localDataSource = new kendo.data.DataSource({
        data: pages,
        schema: {
            model: {
                id: "url",
                fields: {
                    name: { editable: true, type: "string" },
                    url: { editable: true, type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: localDataSource,
        filterMenuInit: onFilterMenuInit,
        filterable: true,
        columns: [
            { field: "url", title: "Page Url", width: "350px" },
            { field: "name", title: "Page name" }
        ],
        editable: true
    });

    </script>

    <!-- Custom filtering UI template -->
    <script id="filterMenuTemplate" type="text/x-kendo-template">
            <div>
                <div class="k-filter-help-text">Show items that match the following RegEx:</div>
                <input class="k-textbox regExInput" type="text"/>
                <div style="white-space: nowrap">
                    <button type="submit" class="k-button k-primary">Filter</button>
                    <button type="reset" class="k-button">Clear</button>
                </div>
            </div>
    </script>

</body>
</html>

## sample-filter.js
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Movie1", category: "Comedy" },
    { name: "Movie2", category: "Comedy" },
    { name: "Movie3", category: "Action" }
  ],
  filter: [
    // leave data items which are "Comedy"
    { field: "category", operator: "eq", value: "Comedy" }
  ]
});
	$(function (window) {

	window.onFilterMenuInit = function (e) {

	// Create custom filtering for the "url" columns only.
	if (e.field === "url") {
	initUrlFilter(e, this);
	}
	};

	function initUrlFilter(e, kendoGrid) {

	var filterContext = {
	container: e.container,
	popup: e.container.data("kendoPopup"),
	dataSource: kendoGrid.dataSource,
	field: e.field
	};

	// Remove default filtering UI and create custom UI.
	initUrlFilterUI(filterContext);
	};

	function initUrlFilterUI(filterContext) {

	// Remove default filter UI
	filterContext.container.off();
	filterContext.container.empty();

	// Create custom filter UI using a template
	var template = kendo.template($("#filterMenuTemplate").html());
	var result = template({});
	filterContext.container.html(result);

	filterContext.container
	.on('submit', $.proxy(onSubmit, filterContext))
	.on('reset', $.proxy(onReset, filterContext));
	};

	function onSubmit(e) {

	// the context here is the filteringContext
	e.preventDefault();
	e.stopPropagation();

	var regExString = this.container.find('.regExInput').val();
	removeFilterForField(this.dataSource, this.field);
	applyRegExFilter(this.dataSource, this.field, regExString);
	this.popup.close();
	};

	function onReset(e) {

	// the context here is the filteringContext
	e.preventDefault();
	e.stopPropagation();

	removeFilterForField(this.dataSource, this.field);
	this.popup.close();
	};

	function applyRegExFilter(dataSource, field, regExString) {

	// Create custom filter
	var newFilter = {
	field: field,
	operator: filterByRegEx,
	value: regExString
	};

	var masterFilter = dataSource.filter() \|\| { logic: "and", filters: [] };
	masterFilter.filters.push(newFilter);
	dataSource.filter(masterFilter);
	};

	function removeFilterForField(dataSource, field) {

	var masterFilter = dataSource.filter();

	if(!masterFilter) {
	return;
	}

	// Get existing filters for the field
	var existingFilters = jQuery.grep(masterFilter.filters, function (item, index) {
	return item.field === field;
	});

	jQuery.each(existingFilters, function(item) {
	var index = masterFilter.filters.indexOf(item);
	masterFilter.filters.splice(index, 1);
	});

	dataSource.filter(masterFilter);
	};

	function filterByRegEx(columnValue, value) {

	var regEx = new RegExp(value, "i");
	return regEx.test(columnValue);
	};

	} (window));
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Kendo UI Grid Custom Filtering - RegEx Column Filter</title>
	<link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/kendo.default.min.css" rel="stylesheet" />
	<link href="styles/custom-filter.css" rel="stylesheet" />

	<script src="js/jquery.min.js"></script>
	<script src="js/kendo.all.js"></script>
	<script src="js/custom-filter.js"></script>
	</head>

	<body>
	<div id="grid"></div>

	<script>

	var pages = [
	{ name: "Home page", url: 'http://www.mypage.com/' },
	{ name: "Products", url: 'http://www.mypage.com/products' },
	{ name: "Product 1", url: 'http://www.mypage.com/products/product1' },
	{ name: "Product 2", url: 'http://www.mypage.com/products/product2' },
	];

	var localDataSource = new kendo.data.DataSource({
	data: pages,
	schema: {
	model: {
	id: "url",
	fields: {
	name: { editable: true, type: "string" },
	url: { editable: true, type: "string" }
	}
	}
	}
	});

	$("#grid").kendoGrid({
	dataSource: localDataSource,
	filterMenuInit: onFilterMenuInit,
	filterable: true,
	columns: [
	{ field: "url", title: "Page Url", width: "350px" },
	{ field: "name", title: "Page name" }
	],
	editable: true
	});

	</script>

	<!-- Custom filtering UI template -->
	<script id="filterMenuTemplate" type="text/x-kendo-template">
	<div>
	<div class="k-filter-help-text">Show items that match the following RegEx:</div>
	<input class="k-textbox regExInput" type="text"/>
	<div style="white-space: nowrap">
	<button type="submit" class="k-button k-primary">Filter</button>
	<button type="reset" class="k-button">Clear</button>
	</div>
	</div>
	</script>

	</body>
	</html>
	var dataSource = new kendo.data.DataSource({
	data: [
	{ name: "Movie1", category: "Comedy" },
	{ name: "Movie2", category: "Comedy" },
	{ name: "Movie3", category: "Action" }
	],
	filter: [
	// leave data items which are "Comedy"
	{ field: "category", operator: "eq", value: "Comedy" }
	]
	});