Html Source Code

 <div data-bind="kendoGrid: {
    data: gridProductDataSource,
    pageable: { pageSize: 10 },
    sortable: true,
    filterable: {
        extra: false,
        operators: {
            string: {
                eq: 'Is equal to',
                startswith: 'Starts with',
                neq: 'Is not equal to'
            }
        }
    },
    columns: [
        { field: 'productName', title: 'Product' },
        {
            field: 'unitPrice', title: 'Unit Price', format: '{0:c}', filterable: {
                ui: function (element) {
                    gridNumericFilter(element, { format: 'c2', min: 0, decimals: 2, spinners: false });
                }
            }
        },
        { field: 'quantityPerUnit', title: 'QtyPerUnit' },
        {
            field: 'unitsInStock', title: 'In-Stock', format: '{0:n0}', filterable: {
                ui: gridNumericFilter
            }
        },
        {
            field: 'unitsOnOrder', title: 'On-Order', format: '{0:n0}', filterable: {
                ui: gridNumericFilter
            }
        },
        {  field: 'category.categoryName', title:'CategoryName'}
    ]
}">
    </div>