New to Kendo UI for jQuery? Download free 30-day trial

Expression preview

The Filter enables you to visualize the filter expression that will be applied to the datasource by setting the expressionpreview field to true. Additionaly you can format the value of the filter in the expression preview using the fields.previewFormat setting.

The following example demonstrates how to enable the expression preview and format the values of the filter

    <div id="filter"></div>
    <br /><br />
    <script>
    var data = [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
        ];

    var dataSource = new kendo.data.DataSource({
        data: data,
        schema: {
        model: {
            fields: {
            name: { type: "string" },
            age: { type: "number" }
            }
        }
        }
    });

    $("#filter").kendoFilter({
        dataSource: dataSource,
        expressionPreview: true,
        expression: {
            logic: "or",
            filters: [
                { field: "name", value: "Jane Doe", operator: "eq" },
                { field: "name", value: "John Doe", operator: "eq" },
                { field: "age", value: 33, operator: "eq" },
                { field: "age", value: 30, operator: "eq" }
            ]
        },
        fields: [
            { name: "age", type:"number", label: "Age", previewFormat: "n3" },
            { name: "name", type:"string", label: "Name" }
        ]
    });

    </script>

See Also

In this article