Grid Filter on a string column fails with '.toLowerCase is not a function'

[DoomerDGR8]

Hi!

I'm getting an error when I try to use the filter row to filter a string value: (d.Status || "").toLowerCase is not a function

Grid:

01.$("#KendoParkingCards").kendoGrid({
02.    dataSource: {
03.        transport: {
04.            read: {
05.                url: window.BASE_URL + "Ajax/GetPassInfo",
06.                type: "get",
07.                dataType: "json",
08.                data: { lookupType: lookupType.value(), lookupValue: $("#LookupValue").val() }
09.            }
10.        },
11.        pageSize: 10
12.    },
13.    sortable: true,
14.    resizable: true,
15.    pageable: { pageSizes: true, buttonCount: 5 },
16.    filterable: { mode: "row" },
17.    selectable: "single",
18.    columns: [
19.        { field: "ParkingCardId", title: "Parking Card Id" },
20.        { field: "StaffNo", title: "Staff Id" },
21.        { field: "AirportPassNumber", title: "Airport Pass" },
22.        { field: "Name", title: "Staff Name" },
23.        //{ field: "Status", title: "Status", template: "#= resolveStatusName(Status) #" },
24.        { field: "Status", title: "Status", template: function (dataItem) { return kendo.toString(resolveStatusName(dataItem.Status)); } },
25.        { field: "PassIssueDate", title: "Pass Issued On", type: "date", template: "#= kendo.toString(PassIssueDate, 'dd-MMM-yyyy') #", width: 150 },
26.        { field: "PassExpiryDate", title: "Pass Expired On", type: "date", template: "#= kendo.toString(PassExpiryDate, 'dd-MMM-yyyy') #", width: 150 },
27.        { field: "ServiceCode", title: "Service", template: "#= resolveServiceName(ServiceCode) #" },
28.        { field: "TerminalId", title: "Terminal", template: "#= resolveTerminalName(TerminalId) #" }
29.    ],
30.    change: function(e) {
31.        var grid = e.sender;
32.        var currentDataItem = grid.dataItem(this.select());
33.
34.        $('#ParkingCardId').val(currentDataItem.ParkingCardId);
35.        console.log($('#ParkingCardId').val());
36.    }
37.});

 

 

 

Lines 23 and 24 both produces same error.

Function:

01.function resolveStatusName(statusId) {
02.    var result;
03.
04.    switch (statusId) {
05.        case 0: result = 'Pending Apprvoal'; break;
06.        case 1: result = 'Rejected By Admin'; break;
07.        case 2: result = 'Manager Approval'; break;
08.        case 3: result = 'Rejected By Manager'; break;
09.        case 4: result = 'Send To Admin'; break;
10.        case 5: result = 'Approved'; break;
11.        case 6: result = 'Completed'; break;
12.        case 7: result = 'Delivered'; break;
13.        case 8: result = 'Cancel'; break;
14.        case 9: result = 'Programmer'; break;
15.        case 11: result = 'Expired'; break;
16.        case 15: result = 'Pending Payments'; break;
17.        case 16: result = 'More Info Required'; break;
18.        case 17: result = 'Response Given'; break;
19.        case 20: result = 'Pending Payment / Third Party'; break;
20.        case 21: result = 'Pending Payment / Company'; break;
21.
22.        default: result = '?';
23.    }
24.
25.    return result.toString();
26.}

 

At runtime, when I try to filter, I get the error. How do I resolve this?

[Silviya Stoyanova]

Hеllo Hassan,

Thank you for the provided code configuration!

I have examined it and would propose to define a schema.model for the grid fields. This gives you the following advantages:

1. You could set the date format of the date columns instead of using column templates. See the approach demonstrated in the following Demo:

• https://demos.telerik.com/kendo-ui/grid/remote-data-binding

2. For the Foreign key that you are using (field "Status"), you could add column.value property. This way you will have a DropDown filter out-of-the-box. The approach is demonstrated here:

• https://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

If further questions should arise, do feel free to ask.

Kind Regards,
Silviya Stoyanova
Progress Telerik

[DoomerDGR8]

Hi! Here is my API controller:

1.public async Task<ActionResult> GetPassInfo(SearchReportArgumentsDTO arguments)
2.{
3.    arguments.CompanyId = InternetUser.Detail.CompanyId;
4.
5.    var result = await _internalApi.GetPassInfoAsync(arguments);
6.
7.    return Json(new { result, total = result.Count }, JsonRequestBehavior.AllowGet);
8.}

 

And the model itself is:

01.public class SearchItemDTO
02.{
03.    public string DateRequested         { get; set; }
04.    public int       ParkingCardId         { get; set; }
05.    public string Name                  { get; set; }
06.    public string AirportPassNumber     { get; set; }
07.    public string DrivingLicenseNumber  { get; set; }
08.    public string VehicleNumber         { get; set; }
09.    public byte     StatusId              { get; set; }
10.    public string Status                { get; set; }
11.    public string PassExpiryDate        { get; set; }
12.    public string CardType              { get; set; }
13.    public string ResponseCode          { get; set; }
14.    public string ResponseDesc          { get; set; }
15.    public string PaymentMode           { get; set; }
16.    public bool? Active                { get; set; }
17.    public string SeasonPassNumber      { get; set; }
18.    public bool   IsExpired             { get; set; }
19.    public string ApproveRejectComments { get; set; }
20.}

 

I have defined the schema but its not the model but the return type of the API call.

How do I do this?

[DoomerDGR8]

Also,

Adding this bit: 

, schema: {
    data: "result",
    total: "total",
    fields: {
        ParkingCardId: { type: "number" },
        StaffNo: { type: "string" },
        AirportPassNumber: { type: "string" },
        Name: { type: "string" },
        Status: { type: "number" },
        PassIssueDate: { type: "date" },
        PassExpiryDate: { type: "date" },
        ServiceCode: { type: "number" },
        TerminalId: { type: "number" }
    }
}

 

under line #11 above in the grid makes it so the grid displays no results. The data is received in proper JSON format.

Update:

Also, adding just this instead still fails:

, schema: {
    data: "result",
    total: "total"
}

[DoomerDGR8]

Would appreciate a faster response please.

[Alex Hajigeorgieva]

Hello, Hassan,

My name is Alex and I am covering for my colleague Silviya in her absence.

It appears that the response does not match the schema. In the schema, as it is defined, we are expecting to receive a response with this structure:

{ 
     "result": [{"ParkingCardId":1, "StaffNo": "SomeString", ....}],
     "total": 1
}

In reality, it might be that the response is as follows:

{ 
     [{"ParkingCardId":1, "StaffNo": "SomeString", ....}],
     "total": 1
}

If I am correct, what you should do is:

return Json(new { result = result, total = result.Count }, JsonRequestBehavior.AllowGet);

Finally, it appears that you require a speedier response than the forums can provide. The jQuery premium forums currently  have a response of up to 48 hours during the work week (Mon to Fri) as opposed to up to 24 hours for a private support thread (Mon to Fri). Furthermore, while the Kendo UI team strives to respond to all licensed forum posters in time, the support tickets always take precedence and are part of the licensed support plans:

https://www.telerik.com/purchase/support-plans

While the forums may offer another perspective from other Kendo UI Developers, the fastest way to get a guaranteed response from the Kendo UI Team remains a private support thread.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[DoomerDGR8]

Hi Alex,

I already know about result = result and just result is same. The result part of the reply is actually a list of my model. How do I redefine this as schema in the grid? I'm told it'll benefit me in filtering... the original issue I'm facing. Just write the grid for me with my API's  return

[Alex Hajigeorgieva]

Hi, Hassan,

Can you share a screenshot of the response from DevTools like this:

Alternatively, you can copy and paste the result as text and I will be able to use a mock service to show you how to bind the grid correctly.

Regards,
Alex Hajigeorgieva
Progress Telerik

[DoomerDGR8]

I have the attachments

[Alex Hajigeorgieva]

Hello, Hassan,

Thank you for the screenshots.

It is clear that the response is not in an object - this means that removing the schema data and schema total will bind the grid correctly. Note that we have schema.model.fields

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schemamodel

dataSource: {
    schema: {
        model: {
            fields: {
                ParkingCardId: {
                    type: "number"
                },
                StaffNo: {
                    type: "string"
                },
                AirportPassNumber: {
                    type: "string"
                },
                Name: {
                    type: "string"
                },
                Status: {
                    type: "number"
                },
                PassIssueDate: {
                    type: "date"
                },
                PassExpiryDate: {
                    type: "date"
                },
                ServiceCode: {
                    type: "number"
                },
                TerminalId: {
                    type: "number"
                }
            }
        }
    },
    transport: {
        read: {
            url: window.BASE_URL + "Ajax/GetPassInfo",
            type: "get",
            dataType: "json",
            data: {
                lookupType: lookupType.value(),
                lookupValue: $("#LookupValue").val()
            }
        }
    },
    pageSize: 10
},

Kind Regards,
Alex Hajigeorgieva
Progress Telerik