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

10 posts, 0 answers
  1. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 22 Jul 2020 Link to this post

    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?

  2. Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 24 Jul 2020 Link to this post

    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

  3. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 24 Jul 2020 in reply to Silviya Stoyanova Link to this post

    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?

  4. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 24 Jul 2020 in reply to Hassan Link to this post

    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"
    }
  5. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 27 Jul 2020 Link to this post

    Would appreciate a faster response please.
  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 28 Jul 2020 Link to this post

    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

  7. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 28 Jul 2020 in reply to Alex Hajigeorgieva Link to this post

    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

  8. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 28 Jul 2020 Link to this post

    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

  9. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 28 Jul 2020 in reply to Alex Hajigeorgieva Link to this post

    I have the attachments
  10. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 28 Jul 2020 Link to this post

    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

Back to Top