Grid from HTML, sorting with a link in the cell

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Oct 2013

    Posted 09 May 2016 Link to this post

    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?

     

  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 11 May 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top