CODEWITHSUNDEEP
kendo-uihtml-tablekendo-grid
dmathisen
dmathisen

Reputation: 2342

Applying 'data-title' to Kendo UI Grid TDs?

I'm using a KendoUI Grid and it's great, but it doesn't respond well on mobile devices so I'm looking to implement this responsive data table idea. It basically hides the header, makes all cells display:block to they stack, then create a faux header to the left of the td with td:before{content:"td header title"}.

The only thing is, this will apply to many different tables with unknown thead fields, so I can't do

td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
etc

Ideally, I'll apply the header column title to the TDs, so that it would render <td data-title="headerTitle">data</td>. Then in the CSS, I can do:

td:before { content: attr(data-title); }

That would work perfectly, but I'm not sure it's possible. Maybe someone else has other ideas.

JS Fiddle Link

Ex: <td data-title="name">Jane</td>

EDIT: It looks like I'm going to go with a jQuery solution:

function tableResizer() {
    var headerTitleArray = [];

    // create array of table header titles
    $('.k-grid-header-wrap th').each(function () {
        headerTitleArray.push($(this).attr('data-title'));
    });

    // append tables headers to each td
    $('.k-grid-content tr').each(function () {
        $(this).find('td').each(function (i) {
            if (typeof headerTitleArray[i] !== 'undefined') { // some headers don't have a title
                $(this).prepend('<span class="td-title">' + headerTitleArray[i] + '</span>');
            }
        });
    });
}

Upvotes: 0

Views: 988

Answers (1)

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

I think that you should rather do that with javascript, for example : 

$("td").each(function() {
    $(this).prepend("<span class='before'>" + $(this).data('title') + "</span>");
});

and with class before styled as your td:before...

See this fiddle : http://jsfiddle.net/TpJyu/4/

Upvotes: 2

Related Questions