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

sorting numbers (dollar amt and percentage) not working

3 Answers 309 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 29 Feb 2012, 07:24 AM
case study is as below:
######################################################################################################
<table id="grid" >
<thead>
<tr>
<th style="width:90px;" data-field="fc_saledate">SaleDate</th>
<th style="width:100px;" data-field="fc_price">Price</th>
<th style="width:80px;" data-field="fc_perval">%ofVal</th>
</tr>
</thead><tbody></tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr id="list_${fc_pid}">
<td style="width:90px;" >${ fc_saledate }</td>
<td style="width:100px; text-align:right" >${ fc_price }</td>
<td style="width:80px; text-align:right" >${ fc_perval }</td>
</tr>
</script>

$("#grid").kendoGrid({
rowTemplate: kendo.template($("#rowTemplate").html()),
columns: [
{
field: "fc_saledate",
title: "SaleDate",
template: '#= kendo.toString(SaleDate,"dd MMMM yyyy") #'
},
{
field: "fc_price",
title: "Price",
format: "integer"
},
{
field: "fc_perval",
title: "%ofVal"
}
],
dataSource: {data: app_list.get_list_content()},
height: 350,
scrollable: true,
sortable: true,
pageable: false,
dataBound: function(e){ app_filter.hide_ids_on_sort(app_filter.hidden_ids_for_kendo_sort);}
});

######################################################################################################
The result table looks like this

SaleDate          Price      %ofVal 
Feb - 20    $50,000     25%
Feb - 23    $90,000     5% 
Feb - 24    $60,000     2.5% 
Feb - 25    $10,000     50% 
Feb - 28    $1,100,000     50%  

On sorting these columns specially 'Price' and '%ofVal' they don't sort good. looks like it is sorting as string and sort only by first digit not by number as whole. 

Where do i specify the sorting type like integer/string/date/decimal etc to force it sort according to this formates? Also please give the list of all sorting format type.

Thanks!




3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Feb 2012, 04:52 PM
Hi Benjamin,

The problem might be connected with the app_list.get_list_content() function. Most probably the fc_price field is returned as a string, that is why it is being sorted as such. In order to be sorted correctly, the field values should be a valid JavaScript numbers.

In other words you do not have to specify the sorting type, sorting function will use the JavaScript type of the object.

Greetings,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Benjamin
Top achievements
Rank 1
answered on 29 Feb 2012, 09:01 PM
Thanks Alexander -
You are right! I modified  app_list.get_list_content() function and made fc_price field clean number only.
Than i prepend '$' sign at the time of displaying. With that modification sorting worked Great.

Now i also need to add commas to the price value. For which i have to do something like addCommas( $ { fc_price } ) but other regular
javascript function do not undestand kendo template variable. So, how do i convert kendo template variable to regular javascript something like
var reg_var = $ { fc_price }.    and then i can do addCommas(reg_var);



##############################################
function addCommas(num){
          // script to add commas to num and return
}
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr id="list_${fc_pid}">
<td style="width:90px;" >$ addCommas(${ fc_saledate })</td>
<td style="width:100px; text-align:right" >${ fc_price }</td>
<td style="width:80px; text-align:right" >${ fc_perval }</td>
</tr>
</script>
#######################################

You can tell me any other ways like using kendo's builtin dollar formate etc.

Thanks!
0
Alexander Valchev
Telerik team
answered on 01 Mar 2012, 02:12 PM
Hi Benjamin,

The ${ foo } syntax is used to encode the HTML, while #= foo # syntax does not and because of that it could be used to call a function. For example:
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <div> #= myFunction(firstNum) # </div> //where firstNum is your number field
</script>
 
function myFunction(num) {
    //do something
    return num;
}

As an alternative you might also check the format configuration option of the column, which could be used to define numbers formatting.

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