Grid from HTML, sorting with a link in the cell

[Tim]

I've got a grid that I am creating from an existing HTML table.

One column contains a link:

<tr>
    <td><a href="/Something/1">7</a></td>
</tr>
<tr>
    <td><a href="Something/2">3</a></td>
</tr>

I want that column to be sortable by the text of the cell (in the above example, the values 7 and 3. String or number formatting would be acceptable. But it appears to be sorting by the entire link (so everything inside of the <td></td> tags, including the anchor tag and the url). So it ends up sorting by the Url because that's the first place each one is differentiated.

I made a jsfiddle that shows this in action: https://jsfiddle.net/6vhpennv/

In DataTables.net, I can do this easily with HTML5 attributes:

<tr>
    <td data-order="7"><a href="/Something/1">7</a></td>
</tr>
<tr>
    <td data-order="3"><a href="Something/2">3</a></td>
</tr>

Is there an equivalent to that in Kendo? Or do I need to write some sort of complex parser (for the dataSource parser function) that can parse out the value from the whole anchor tag?

 

[Rosen]

Hello Tim,

Indeed, this is the designed behavior. When dataSource is inferred from the Html table cells, their entire content is set as field value. Extracting only the text from the nested html elements is not supported. If you want to sort only on the text value you will need to have only the value inside the cell and use a column template to create the link. Such approach is demonstrated in this updated version of the previous test page.

Regards,
Rosen
Telerik