Sorting numbers as strings in a KendoGrid

I am encountering an issue with my kendogrid where numbers are not sorting correctly; they seem to be sorting as strings instead of actual numerical values. For example, when trying to sort a column from 1 to 10, instead of getting 1,2,3,4,5,6,7,8,9,10, I get 1,10,2,3, and so on.

The data being fed into the grid is in the form of a JSON array. The specific column I am attempting to sort on is the Id column. I have previously managed to successfully implement sorting by pulling the data directly from the server; however, that approach is not applicable in this scenario.

Here is my html code:

<div id="myGrid" kendo-grid="myGrid"
k-options="myGridOptions"></div>

This is my JavaScript code:

var myModel = kendo.data.Model.define({
    id: "Id",
    fields: $scope.myColumns
});

$scope.myDataSource = new kendo.data.DataSource({
    data: $scope.data,
    pageSize: 10,
    sort: [{field:"Id", dir:"asc"}],
    schema: {
        model: myModel
    }
});

$scope.myColumns    = [
{ field: 'Id',title: 'ID',width:"80px", type:"number" },
{ field: 'amount',title: 'Amount',width:"130px",type:"number" }
                      ];

$scope.myGridOptions = {
    dataSource: $scope.myDataSource,
    reorderable: true,
    groupable: false,
    sortable: {
        allowUnsort: false,
    },
    selectable: "multiple, row",
    pageable: {
        pageSize: 20, 
        pageSizes: [10, 20, 50], 
    },
    columns: $scope.myColumns,
};

Answer №1

It is not possible to define schema.model.fields as an array.

You can follow this example:

var newModel = kendo.data.Model.define({
    id: "productId",
    fields: { productId: { type:"number" }, productName: { type: "string" } }
});

Refer to http://docs.telerik.com/kendo-ui/api/javascript/data/model

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

Struggling to display HTML content in my AngularJS application

Excuse my lack of experience with AngularJS. I'm encountering difficulties when trying to display HTML content in my Angular application! Here is the partial I am using: <div ng-app="myGreatApp" ng-repeat="article in articles" > <div n ...

Question about React.js: What is the best way to add multiple classes to a component by using a ternary operator?

I am looking to apply multiple classes to a component by utilizing a ternary operator. In our shared ts theme file, we have the general button styles defined, but for this specific component, I want to adjust the sizes based on screen width. To achieve thi ...

What is the process of incorporating a Map feature (Google or Bing) into a Windows platform using PhoneGap?

I successfully completed my Phonegap app for iOS and Android, but now I am facing a nightmare with the Windows platform. I need to integrate a map in my app. For iOS and Android, I used mapsplugin, but unfortunately it does not support the Windows platfor ...

Safari is causing issues with HTML5 Video playback

I have a client with a media-heavy website containing numerous video and audio files. While the videos load perfectly on Chrome, Firefox, and IE, they do not load on Safari for Windows. Here's a snippet of the code: <video controls="controls" type ...

Sending various array data via AngularJS

Welcome to the HTML page view where users can input data and send it to an API. https://i.sstatic.net/uJTYc.png Within the form, three parameters need to be passed in a single array: day, fromtime, and to-time. How can these three parameters be passed in ...

Is it achievable to have a background image cover size with a responsive rollover effect?

I’m currently facing a unique challenge where I want to have an image as the background of my website, with the size set to cover the entire screen. On this background image, there are elements like buildings that I want to interact with when hovered ove ...

The glyphicons in Bootstrap are not appearing

My angular app is built using bulp angular and the component. I incorporate Sass (Node) into the project. I decided to switch to the flatly theme, which I downloaded from the bootswatch website and inserted it into _bootstrap.scss. // Core variables a ...

"Interrogating the Use of Question Marks in Meta Tags for Social Web Crawlers with an AngularJS App and Prerender.io

I am facing an issue with my website's meta tags that contain Japanese characters for the Open Graph protocol. Despite setting everything correctly, they appear as question marks when using a crawler tool like Facebook's debugger at https://devel ...

Is utilizing getStaticProps the best approach for handling offline data in Next.js?

My current project in Next.js involves offline static data for the webpage content. I am using an array to store the data for later mapping. Do you recommend using getStaticProps in this scenario? For example, here is a snippet of my code: import { data } ...

When converting to TypeScript, the error 'express.Router() is not defined' may

Currently, I am in the process of converting my express nodejs project from JavaScript to TypeScript. One of the changes I've made is renaming the file extension and updating 'var' to 'import' for "require()". However, there seems ...

The map and its multiple markers are not showing up

I am attempting to display multiple markers on a Google map. Everything is working fine in two scenarios: When I display ONE marker When I write the GPS coordinates of different markers I have a database that contains longitude and latitude values. I wan ...

Capable of retrieving the identification number but incapable of executing a POST request

After successfully retrieving the ID using the router, I encountered an issue when trying to confirm the change of agent status on the retireagent HTML page by clicking the submit button. The error message displayed is "ID is not defined". I am seeking ass ...

Using ng-class to insert variable strings for dynamic styling

I'm currently working on a project where JSON data is used to generate custom forms. I've encountered an issue while trying to add validation to text inputs in the rendered forms. It seems simple enough, but I'm struggling with correctly ren ...

Transforming a THREE.js shader into a PIXI.js shader

I am currently exploring the world of PIXI.js and custom Shaders, and I must admit, it's a bit overwhelming for me. I came across a GLSL Shader (created by DonKarlssonSan) that I would like to convert to PIXI.js in order to compare performance. Any as ...

Find similarities between 2 observable arrays and store them in a new array using knockout data binding

There are three observable arrays set up as follows: a [1,3] b [ {"ID": 1, "Val": "Value1"}, {"ID":2, "Val":"Value2"}, {"ID":3, "Val":"Value3"}] c [] The goal is to compare array a with the IDs of elements in array b and then push the entire value of arr ...

Unable to set margin-right on a relatively positioned element

In my Vue project, I am creating a dynamic card display that scrolls horizontally on mobile screens. This section functions as a testimonial carousel where users can swipe left or right to view different testimonials. While I have successfully applied a l ...

Displaying images with Javascript when they are clicked

How can I make a speech bubble appear when the image of the person is clicked? <div> <p style="float: left;"><img src="person.png" border="1px"></p> </div> <script> function bubblespeech() { document.getEl ...

Angular Material's md-checkbox is a required component

I am working on a form that consists of checkboxes representing the days of the week. When the user hits submit without selecting any checkboxes, I want an error message to appear. Here is the HTML code snippet that I have: <form id="addEditForm" nam ...

What is the best way to link an ASP.NET byte array to a file input field in a form?

In my ASP.NET project, I am looking to send a POST request to a third-party service for document editing (Zoho). While I have experience with making such requests using front-end forms and VB.NET in the code-behind, integrating both becomes tricky due to t ...

Adding information into material-ui dropdown using React JS

I could use some assistance with populating data into a Dropdown using material-ui in React. I am new to React and unsure about how to achieve this. I know that I can pass props to the dropdown, but it's not very clear to me. Here is my current code: ...