kendo ui grid filter empty

Question

I am using a Kendo UI grid (not MVC) and I am trying to enable filtering. I am just using the default filtering (Filtering: true) and I get empty dropdowns. I have used this in the past and I thought the default include things like Starts with and Is equal to.

Here is my code for the Grid:

$("#LogGrid2").kendoGrid({
    dataSource: logGridDataSource,
    columns: [{
        field: "CreateTime",
        headerAttributes: { style: "font-weight: bold; width: 10%;" },
        title: "Log Time",
        template: '#= kendo.toString(CreateTime, "MM/dd/yyyy hh:mm:ss") #',
        editable: false,
        attributes: { style: "width: 10%;" }
    }, {
        field: "LookupName",
        headerAttributes: { style: "font-weight: bold; width: 15%;" },
        title: "Lookup Value",
        editable: false,
        attributes: { style: "width: 15%;" }
    }, {
        field: "LogType",
        headerAttributes: { style: "font-weight: bold; width: 8%;" },
        title: "Type",
        editable: false,
        attributes: { style: "width: 8%;" }
    }, {
        field: "LogMessage",
        headerAttributes: { style: "font-weight: bold; width: 18%;" },
        title: "Message",
        editable: false,
        attributes: { style: "width: 18%;" }
    }, {
        field: "FileName",
        headerAttributes: { style: "font-weight: bold; width: 12%;" },
        title: "FileName",
        editable: false,
        attributes: { style: "width: 12%;" }
    }, {
        field: "LogNumber",
        headerAttributes: { style: "font-weight: bold; width: 7%;" },
        title: "Quantity",
        editable: false,
        attributes: { style: "width: 7%;" }
    }, {
        field: "LogExtraText",
        headerAttributes: { style: "font-weight: bold; width: 15%;" },
        title: "Opt Text One",
        editable: false,
        attributes: { style: "width: 15%;" }
    }, {
        field: "LogExtraText2",
        headerAttributes: { style: "font-weight: bold; width: 15%;" },
        title: "Opt Text Two",
        editable: false,
        attributes: { style: "width: 15%;" }
    }],
    selectable: {
        mode: "single"
    },
    sortable: true,
    groupable: true,
    scrollable: true,
    filterable: true,
    change: gridRowSelected
});

here is what my Filter box looks like: http://i.imgur.com/EzVbjue.jpg

Here is the code for the Datasource

var logGridDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: baseUrl + "/Home/GetLogMessages?AppID=" + AppID + "&StartDate=" + StartDate + "&EndDate=" + EndDate + "&LookupID=" + LookupID + "&Type=" + LogType + "&LogCode=" + LogMessage,
            dataType: "json",
            cache: false
        }
    },
    schema: {
        model: {
            id: "LogID",
            fields: {
                LookupName: { type: "String" },
                CreateTime: { type: "Date" },
                LogType: { type: "String" },
                LogMessage: { type: "String" },
                LogNumber: { type: "Number" },
                FileName: { type: "String" },
                LogExtraText: { type: "String" },
                LogExtraText2: { type: "String" }
            }
        }
    }
});

I have also tried configuring the filterable parameter but that did not work either. In the past, I have just worked with the default. Here is what I tried on the options for Filterable.

filterable: {
    extra: false,
    operators: {
        string: {
            startswith: "Starts with",
            eq: "Is equal to",
            neq: "Is not equal to"
        }
    }
}

Robin Giltner Robin Giltner · Accepted Answer · 2013-12-20T20:26:33

Change your schema -> model -> fields -> type to lowercase 'number', 'date', and 'string'.

See sample http://jsbin.com/UBaNuBAY/1/edit

kendo ui grid filter empty

1 Answers