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
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
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?
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"
}
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
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
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
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