Filtering not working

[Jay]

I've enabled filtering on a few columns. However, I don't see how the filtering is supposed to work. There has been no change in the appearance of the header (or the headers of any other columns) and there is no apparent way to filter any columns. Am I doing something wrong or looking in the wrong place for filtering? Here's the code:

    $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: "Home/GetWorklist",
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json; charset=1-8"
                }
            },
            pageSize: 15,
            schema: {
                data: "data",
                total: "total"
            }
        },
        columns: [
            { title: "Part Number", field: "PartNumber", template: "#= PartNumber #" },
            { title: "Noun", field: "Noun", filterable: true },
            { title: "Procurement Code", field: "ProcurementCode", filterable: true },
            { title: "Cage Code", field: "CageCode" },
            { title: "Responsible", field: "Responsible" },
            { title: "SONIC Queue", field: "SonicQueue" },
            { title: "SONIC Status", field: "SonicStatus" },
            { title: "Priority", field: "Priority" },
            { title: "DIS", field: "Dis", width: 50 },
            { title: "QIS", field: "Qis" },
            { title: "Status", field: "Status" },
            { title: "Estimator", field: "Estimator" },
            { title: "Related Parts", field: "RelatedParts" }
        ],
        pageable: true,
        sortable: true
    });

[Kyle]

Make sure you include all the kendo style sheets & images. Wthout that you can't see any changes.

[Jay]

I've got the Kendo trial unzipped. Where is the images directory and where in my VS project do I dump them?

[Jay]

Anyone?

[Craig]

Does Kendo even support filtering? I was looking through the demos and I didn't see it, thats why I came to the forums to see if anybody has rolled their own. I do see that there is a "filterable" attribute in the column config but I couldn't see how it is used.

Craig

[Atanas Korchev]

Hi,

 Filtering is demonstrated in this example: http://demos.kendoui.com/web/grid/local-data.html 

Regards,
Atanas Korchev
the Telerik team

[Jay]

I'm still not sure where to get the images (e.g., the filter icon) and where, in my VS solution to put them so that the grid can see them.

[Atanas Korchev]

Hi,

 All the images are in the styles folder which is part of the Kendo distribution. The Getting Started help topic shows how to include the CSS files to your page:

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

I hope this helps,
Atanas Korchev
the Telerik team

[Jay]

That was helpful. However, I'm still having issues. Without filtering enabled, I get many rows. When I enable filtering, I get the filter icon ONLY in the first column of the grid. Also, NO ROWS get returned. Here's my code to add filtering:

pageable: true,
sortable: true,
filterable: true

[Atanas Korchev]

Hello,

 Unfortunately it is close to impossible to tell what the problem is based on your explanation. Could you elaborate? We need more details in order to troubleshoot the problem - more code etc. You can consider opening a support ticket and sending us a running demo which we can test.

Regards,
Atanas Korchev
the Telerik team

[Jay]

With the following code, NO rows of data are shown and only the first column has the filter icon. Without the "filterable" attribute, i get many rows of data returned, but of course no filter icons in the header.

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

<script type="text/javascript">
    $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: '@Url.Action("GetQuoteHistory", "Quote")',
                    dataType: "json",
                    type: "GET",
                    data: { id: "@ViewBag.CustomerEstimateKey" }
                }
            },
            pageSize: 15,
            schema: {
                data: "data",
                total: "total"
            }
        },
        columns: [
            { field: "QuoteDateString", title: "Date", width: "60px" },
            { field: "PriceString", title: "Price", width: "110px" },
            { field: "PricedDateString", title: "Priced Date", width: "80px" },
            { field: "Quantity", title: "Quantity", width: "60px" },
            { field: "Customer", title: "Customer" },
            { field: "PriceType", title: "Price Type" },
            { field: "QisStatus", title: "QIS Status" },
            { field: "PricingSource", title: "Pricing Source" },
            { field: "QisType", title: "QIS Type" },
            { field: "Estimator", title: "Estimator" },
            { field: "ProcurementCode", title: "Proc", width: "50px" },
            { field: "Qis", title: "QIS" },
            { field: "Rolt", title: "ROLT", width: "50px" },
            { field: "RequestedPartNumber", title: "Requested Part Number", width: "150px" },
            { field: "AckCodes", title: "Ack Codes" },
            { field: "NotesUrl", title: "Notes", width: "50px" }
        ],
        pageable: true,
        sortable: true,
        filterable: true
    });
</script>

[Atanas Korchev]

Hello,

 I tried to reproduce the problem to no avail. Here is my test jsFiddle: http://jsfiddle.net/korchev/dpNZ9/1/ What is different in your case?

I suggest you open a support ticket and send us a running project which we can troubleshoot.

Regards,
Atanas Korchev
the Telerik team

[Hasindu]

FYI

I had the same issue, it was resolved by adding the latest JQuery library. Or the jquery.min.js found on the Kendoui download.