JSGrid not showing filter input fields

I want the input filter fields to get created and shown under the header row cells as expected.

In my MVC solution i have my JSGrid populating via AJAX/JSON/GET. I'm able to sort and step into the loadData javascript etc. When I add "filtering:true" a row with cells are generated between the header row and table body rows but the the input fields are not there. I've tried including different CSS, JQuery and JS libraries and tried to mimic many demo's and samples..

function RenderImportHistory() {
    $("#jsGrid_ImportHistory").jsGrid({
        width: "100%",
        height: "572px",
        pageSize: 10,
        pageButtonCount: 5,

        filtering: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,

        loadIndication: true,
        loadIndicationDelay: 500,
        loadMessage: "Getting Import History ...",

        controller: {
            loadData: function (filter) {
                var d = $.Deferred();
                $.ajax({
                    url: "@Url.Action("GetImportHistory", "SCAL", new { Area = "Admin" })",
                    dataType: "json",
                    type: "GET"
                }).done(function(result) {
                    /*result = $.grep(result, function(item) {
                        return item.patientId === filter.patientId
                           && item.patientName === filter.patientName
                           && item.genderId === filter.genderId
                           && item.mobile === filter.mobile;

                    }); */
                    d.resolve(result);
                });
                return d.promise();
            }
        },
        fields: [
            { name: "ID", type: "Number", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 11, sorter:"number" },
            { name: "ImportSched_ID", type: "Number", title: "Schedule", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 27, sorter:"number" },
            { name: "Created", type: "Text", title: "Started", css: "jsGrid_Body", headercss: "jsGrid_Head", itemTemplate: function (value) { return FormatDateTime(value); } },
            { name: "Completed", type: "Text", title: "Ended", css: "jsGrid_Body", headercss: "jsGrid_Head", itemTemplate: function (value) { return FormatDateTime(value); } },
            { name: "NumOfClaims", type: "Number", title: "Claims", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatCounts(value); } },
            { name: "NumOfRecords", type: "Number", title: "Rows", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatCounts(value); } },
            { name: "TimeToRead_Seconds", type: "Number", title: "Read", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatDuration(value); } },
            { name: "TimeToWrite_Seconds", type: "Number", title: "Wrote", css: "jsGrid_Body", headercss: "jsGrid_Head", width: 21, sorter: "number", itemTemplate: function (value) { return FormatDuration(value); } }
        ]
    });
}

Ok, so it's actually pretty simple, and pretty silly, too. It's so silly and simple that it's too easy to miss. Change your type declarations in your fields to all lowercase.

type: "Number" >> type: "number"

and

type: "Text" >> type: "text"

The developers should have this case insensitive, but lazy devs....