Client-side filtering for numerical columns using the Kendo UI Grid widget

In my Kendo UI grid widget, I have a model schema set up for a field like this:

RS_LookBackDays: { type: "number", editable: true },

The columns configuration for the same field looks like this:

{ field: "RS_LookBackDays", title: "Rate Schedule – # Lookback Days", type: "number" },

I've implemented custom client-side filtering on a property connected to a text box, which is then applied to the dataSource upon clicking a search button.

if (ctrl.selectedRS_LookBackDays && ctrl.selectedRS_LookBackDays != '') {
    var filter = { field: "RS_LookBackDays", operator: "eq", value: ctrl.selectedRS_LookBackDays };
    filters.push(filter);
}

ctrl.kendoGrid.dataSource.filter(filters);

While filters work well on 'string' columns, when it comes to numeric columns, I encounter a client-side error message: 'TypeError: Object doesn't support property or method 'toLowerCase'". Despite specifying the column type in both the schema and the grid setup, I'm unable to resolve this issue.

Answer №1

Resolved the issue by implementing the code snippet provided below:

 var filter = { field: "RS_LookBackDays", operator: "eq", value: kendo.parseInt(ctrl.selectedRS_LookBackDays) };

It was simpler than expected! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a custom filter for object manipulation within Vuetify's v-autocomplete

When using vuetify v-autocomplete with an object where the object consists of Key-Value pairs, the search functionality is based on the item-text. In my example, I am displaying the object as {1200-Chloride Systems}. Is it possible to make the search funct ...

What could be causing the AngularStrap modal to flicker when I attempt to close it?

Currently, I am utilizing angularjs version 1.4.4 and angularstrap version 2.3.7. Following the guidelines in the angularstrap documentation, I have incorporated angularmotion from its [github][1]. However, while using a modal, I noticed that there is a ...

Modifying button attribute through dropdown selection

In my project, I have a dropdown that gets its data from a database. Depending on the selection made in the dropdown, I would like to change the attribute of a button (data-uk-modal="{target:'#modal-'value of dropdown'}"). <select id "ci ...

Serving static files in Next.js with specific extensions without triggering a download

I'm facing an issue where I need to serve the stellar.toml file in domain/.well-known/stellar.toml with the content type as text/plain. The current configuration works only when the stellar file is saved without an extension. It is essential for me t ...

Implementing Singletons in Node.js

While examining some code, I came across the following snippet: var Log = require('log'); // This creates a singleton instance module.exports = new Log('info'); Initially, my reaction was doubting that it could be considered a single ...

Framework for developing websites with search engine optimization in mind, powered by

In the past, I have utilized JQuery + JQueryUI for various projects, including an ERP project. However, developers sometimes found the framework I created to be inadequate and messy. Now, I am embarking on a new venture—a public eCommerce website similar ...

Having trouble updating Vuejs array with new values

Currently, I am facing an issue with the template code for my survey builder. I am successfully receiving responses from the server, but the addAnotherQuestion value is not updating as expected. Despite trying various approaches, I have been unable to reso ...

Receiving a response from an XMLHttpRequest() within a function

I've come across a situation where I have a function called isOnline(), and here's how it looks: function isOnline() { var request=new XMLHttpRequest(); request.onreadystatechange=function() { if(request.readyState==4) { ...

Tips for organizing an object according to specific attributes

Within my table, I have implemented a feature that allows the display of only selected columns at a time. To achieve this, I store the chosen columns (table headings) in an array called selectedTableHeaders. The next step is to filter out a new array bas ...

Generate a table framework by dynamically adjusting the number of rows and columns

I'm running into an issue with my implementation of nested for-loops to dynamically generate a table using JavaScript. For this particular scenario, let's assume numRows = 2 and numCols = 6. This is the code snippet in question: let table = $( ...

How can I personalize the color of a Material UI button?

Having trouble changing button colors in Material UI (v1). Is there a way to adjust the theme to mimic Bootstrap, allowing me to simply use "btn-danger" for red, "btn-success" for green...? I attempted using a custom className, but it's not function ...

Retrieve data from a service within an AngularJS controller

Can you help with this challenge: I have a local JSON object declared in my service and I am trying to access specific parts of it from my controller. Currently, I am able to access it but only to a fixed section (unable to parameterize it). My goal is to ...

How to create a dropdown menu in React js with an array of items

Can we structure the array without splitting it into two parts and iterating over them? arrayList=[Jeans, Jackets, Pants, Fragrance, Sunglasses, Health Products] <div className='Flexbox'> //arrayList1.map](//arrayList1.map)(x=>return(< ...

Why does my Observable remain perpetually unfulfilled?

I recently started learning javascript and came across the Angular 2 Documentation where I discovered that Promises can be replaced with Observables. While experimenting with a simple code, I noticed that in addition to the expected result, I am also getti ...

I am having trouble resolving 'otp-input-react' in my project directory at D:projectappsrc

I have been troubleshooting this issue but haven't been able to find a solution yet. I even tried uninstalling and reinstalling the package, but it still isn't working as expected. Here are some images for better clarity: https://i.stack.imgur.c ...

Warning: The core schema has detected an unknown property `color` for the component or system `undefined` in Aframe + Vuejs. This issue was flagged within 10 milliseconds in

I am facing some challenges trying to integrate Aframe and vuejs seamlessly, as the console is displaying warning messages. It seems like Aframe is validating the attribute values before vue has a chance to modify them. Warning messages core:schema:warn ...

Finding data in Firebase from all child nodes while authenticated

I recently completed a tutorial on creating an app with Firebase sync and authentication, following the steps outlined here. However, I am now facing a challenge in querying data among all children due to their lexicographical-based keys. Specifically, us ...

jQuery code runs smoothly on Firefox but encounters issues on Chrome

I'm experiencing an issue with a script that is supposed to post a comment and load the answer from a server. The script works fine in Firefox, but in Chrome, it seems that no event is triggered. You can click the button, but nothing happens. I'v ...

Upon importing Chakra-UI in NextJS, the functionality may not work right away

Currently, I am diving into learning NextJS and Chakra-UI. Following the installation of Chakra-UI and attempting to import it, I encountered the error message shown below on the page. Any assistance in resolving this issue would be greatly appreciated. ...

Effective ways to manage extensive forms in Angular 2

I have a complex form in my application. What is the most effective way to collect data from this form and transmit it to the API using Angular 5? ...