This is a migrated thread and some comments may be shown as answers.

grid header icon for sortable column weird behavior

2 Answers 674 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Rick asked on 25 Nov 2015, 10:47 PM

I have the following grid. When I used just a title on the first column sorting worked fine. However, the title text did not line up with the following column heading which was aligne vertically in the 'middle' of the header cell.

In the current configuration, the title is at the bottom. Clicking once moves the title to the top of the cell and puts the sort arrow graphic underneath and at the very left of the cell. Clicking again changes the direction of the sort and arrow. Clicking a third time puts the title at bottom, without the sort arrow and restores the rows to their initial order.

 Can I move the graphic to the end of the title, like it was before, but all in the middle of the header cell?



var meetingLogGrid = $("#meetingLogGrid").kendoGrid({
        dataSource: logEntryDS,
        height: "100%",
        width: "100%",
        autoBind: false,
        groupable: false,
        sortable: true,
        pageable: {
            refresh: true,
            pageSize: 5,
            pageSizes: true,
            buttonCount: 5
        columns: [{
            field: "Created",
//          title: "Date/Time",
            format: "{0: yyyy-MM-dd HH:mm}",
            headerTemplate: "<div style='vertical-align:middle;'>Date/Time</div>",
            width: 135
        }, {
            field: "LogEntry",
            title: "Description",
            headerTemplate: kendo.template($("#logGridTemplate").html()),
            template: "<div style='max-height:25px;overflow:hidden;'>#: LogEntry #</div>",
//          width: 360,
            sortable: false
        }, {
            command: [ { name: "more", click: function (e) { console.error("log grid e: ", e);
            var tr = $('tr');
            var rowData = this.dataItem(tr);        console.error("rowData: ", rowData);
        editable: false // { mode: 'popup' },

2 Answers, 1 is accepted

Sort by
Telerik team
answered on 26 Nov 2015, 09:19 AM
Hello Rick,

A solution to this display problem would be to add display:inline-block style to the header template of your Date/Time column:

headerTemplate: "<div style='vertical-align:middle; display:inline-block;'>Date/Time</div>"

Thus, the span which contains the sort arrow icon would be displayed next to the div Date/Time.

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 2
answered on 27 Nov 2015, 02:46 PM
Very quick response. Thank you.
With your solution, the heading is all in one line. But, it is aligned 'baseline', not 'middle'. And, the heading is not in the middle. It will never be, just using the template. The following works. It applies the vertical alignment higher in the table header structure.
headerAttributes: { style: "vertical-align:middle" },
headerTemplate: "<span>Date/Time</span>",

I appreciate your help.
Asked by
Top achievements
Rank 2
Answers by
Telerik team
Top achievements
Rank 2
Share this question