sorting numbers (dollar amt and percentage) not working

[Benjamin]

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!

[Alexander Valchev]

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

[Benjamin]

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!

[Alexander Valchev]

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