This is a migrated thread and some comments may be shown as answers.

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

9 Answers 1515 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 22 Jul 2020, 01:08 PM

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?

9 Answers, 1 is accepted

Sort by
0
Silviya Stoyanova
Telerik team
answered on 24 Jul 2020, 11:23 AM

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:

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:

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

Kind Regards,
Silviya Stoyanova
Progress Telerik

0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 24 Jul 2020, 06:05 PM

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?

0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 24 Jul 2020, 11:15 PM

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"
}
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 27 Jul 2020, 08:41 PM
Would appreciate a faster response please.
0
Alex Hajigeorgieva
Telerik team
answered on 28 Jul 2020, 10:01 AM

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

0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 28 Jul 2020, 10:46 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 28 Jul 2020, 11:09 AM

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

0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 28 Jul 2020, 11:34 AM
I have the attachments
0
Alex Hajigeorgieva
Telerik team
answered on 28 Jul 2020, 12:02 PM

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

Tags
Grid
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Silviya Stoyanova
Telerik team
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Alex Hajigeorgieva
Telerik team
Share this question
or