Set data-title attribute to every <td> cell

2 posts, 1 answers
  1. Pantulu
    Pantulu  avatar
    10 posts
    Member since:
    Feb 2015

    Posted 19 Mar 2015 Link to this post

    I am into customizing the display of kendo grid in mobile devices.

    I need to know if I can achieve this.
    I need to set the data-title={the corresponding header title} to each corresponding td cell in a column.

    For example I need it this way.

    <td data-title="Name" role="gridcell">Joe</td>

    Any way I can achieve this ?
  2. Answer
    Dimiter Madjarov
    Dimiter Madjarov avatar
    2308 posts

    Posted 23 Mar 2015 Link to this post

    Hello Pantulu,

    You could achieve this in the dataBound event of the Grid by iterating the cells and retrieve the title of the corresponding column.

    .Events(e => e.DataBound("dataBound"))

    function dataBound(e) {
        var grid = e.sender;
        var columns = grid.columns;
        var cells = grid.tbody.find("tr[role='row'] td");
        var currentCell, title;
        for (var i = 0; i < cells.length; i++) {
            currentCell = $(cells[i]);
            title = columns[currentCell.index()].title;
            currentCell.attr("data-title", title);

    Dimiter Madjarov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top