grid header icon for sortable column weird behavior

[Rick]

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?

Thanks,

Rick

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);
            e.preventDefault();
            var tr = $(e.target).closest('tr');
            var rowData = this.dataItem(tr);        console.error("rowData: ", rowData);
            $("#LogEntryDateTime").val(rowData.Created.toString());
            $("#LogEntryText").val(rowData.LogEntry);
            $("#LogEntryPopup").data("kendoWindow").open();
        }}],
        width:80
    }],
        editable: false // { mode: 'popup' },
    }).data("kendoGrid");

[Dimitar]

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.

Regards,
Dimitar
Telerik

 

 

[Rick]

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.
Rick