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

Initial Sort by computed field?

3 Answers 233 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 21 Jan 2016, 07:54 PM

I've been working on getting my Kendo grid to persist across page navigation. I was able to get that to work, but when I set the initial sort to a computed field, the grid will throw an error:

  • Uncaught TypeError: d.GetStatus is not a function

d.GetStatus is a computed field, so the error doesn't really surprise me, but I'm not sure how to handle this so that I can set the initial sort to a field that isn't in the original dataSource (without directly modifying the DB response to include the computed value as its own property).

{
   dataSource: {
     schema: {
       model: {
         fields: {
           'AmountDue': {...},
           'AmountPaid': {...},
           'Name': {...},
           ...
         },
         // Computed Fields
         'GetStatus': function() {
           return this.AmountPaid >= this.AmountDue ? 'Paid' : 'Due';
         }
       }
     },
     sort: {
       dir: "asc",
       field: "GetStatus()"
     }
   },
   columns: [
     ...
     {
       title: 'Status',
       field: 'GetStatus()'
     }
   ]
}

Is there another way to go about creating this custom "Status" field so that the initial sorting works?

3 Answers, 1 is accepted

Sort by
0
Steven
Top achievements
Rank 1
answered on 22 Jan 2016, 06:09 PM

Even when I tried to set the sort after the grid has been loaded it yielded the same error. Is it not possible to programmatically sort by a calculated field?

Example:

 

var grid = $('#grid').kendoGrid(...);
 
grid.dataSource.sort({
  dir: 'asc',
  field: 'GetStatus()'
});

 

 

0
Steven
Top achievements
Rank 1
answered on 25 Jan 2016, 06:26 PM

So, I tried something else and may have got a step closer, but it is still not reacting as desired. I figured that, because I was using GetStatus() as the field property in my column definition, maybe the parentheses were just causing the problem. So, I switched my column definition to this:

columns: [
    ...
    {
        title: 'Status',
        field: 'GetStatus'
    }
]
 

Lo and behold, it doesn't error anymore and the column in question shows the directional arrow in the header. The only thing is that it doesn't actually sort the column. It does everything to make it look like it's sorting, but it doesn't seem to actually rearrange the rows. I'm beginning to wonder if it is even possible to trigger sorting on computed columns like this.

0
Boyan Dimitrov
Telerik team
answered on 27 Jan 2016, 08:13 AM

Hello Steven,

 

A possible reason for this behavior might be not setting the sortable option of the Kendo UI Grid to true. By default it is false and it is not possible to sort the items by clicking on the column header. However if you explicitly sort the Kendo UI DataSource by configuration code or the API it will sort the items without placing arrow on the column header. 

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Steven
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or