Hide the title in a single column

[Sonny]

I would like to hide the last column in my grid.

How can I do this?

Here's my code:

@(Html.Kendo().Grid<GoodNeighbor.Models.TrackingList>()
        .Name("TrackingListGrid")
        .Columns(c =>
        {
            c.Bound(t => t.TrackingListId).Hidden(true);
            c.Bound(t => t.FirstName).Width(115).Title("First Name");
            c.Bound(t => t.LastName).Width(115).Title("Last Name");
            c.Bound(t => t.Email).Width(150);
            c.Bound(t => t.Date).Width(90).ClientTemplate("#= kendo.toString(kendo.parseDate(CreatedDate), 'MM/dd/yyyy') #");
            c.Bound(t => t.Hours).Width(85);
            c.Bound(t => t.VolunteerOrganization).Width(120).Title("Volunteer Organization");
            c.Bound(t => t.ReponseCopy).Width(115).Title("Reponse Copy");
            c.Bound(t => t.Phone).Width(85);
            c.Bound(t => t.Location).Width(85);
            c.Bound(t => t.CreatedDate).Hidden(true);
            c.Bound(t => t.ModifiedDate).Hidden(true);
            c.Bound(p => p.TrackingListId).ClientTemplate("<a href='" + Url.Action("Create", "TrackingList") + "/#= TrackingListId #'" + ">Details</a>"); // Details link
        })
        .HtmlAttributes(new { style = "height: 400px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Filterable()
        .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(r => r.Action("TrackingListRead", "TrackingList").Data("sendAntiForgery"))
            .Model(model => model.Id(p => p.TrackingListId))
            .Events(events => events.Error("onError"))
        )
    )

[Alexander]

Hello, Sonny

Thank you for the provided information and screenshot. To achieve the desired result you can use the Bound Column Settings builder and use any of the following methods to hide a column title:

• You can modify a column's header using the .HeaderHtmlAttributes() configuration option in order to set HTML attributes to the header cell.
• You can set the .Title() configuration option for a particular column to an empty string.

Here is a scenario where the .HeaderHtmlAttributes() and .Title() configuration options are used.

 

@model IEnumerable<DemoGridApp.Models.CustomerViewModel>
@{
    ViewBag.Title = "Home Page";
}

<div>
    @(Html.Kendo().Grid(Model)
    .Name("grid")
    .Pageable()
    .Sortable()
    .Groupable()
    .Columns(columns =>
    {
        columns.Bound(c=>c.FirstName);
        columns.Bound(c=>c.LastName);
        columns.Bound(c=>c.Email);
        columns.Bound(c=>c.Date).Title("");
        columns.Bound(c=>c.Hours);
        columns.Bound(c=>c.Phone);
        columns.Bound(c=>c.Location);
        columns.Bound(c=>c.TrackingListId).HeaderHtmlAttributes(new { style="display:none;"});

    })
    .DataSource(dataSource=>dataSource
      .Ajax()
      .ServerOperation(false))
    )
</div>

In this example, I have hidden the header of the Tracking List Id column with a style attribute. The style attribute for the header is then applied to the column upon the grid's initialization. Additionally, I have set the .Title() of a column to be blank which again achieves the desired result and hides the column title. 

Please let me know if you have any further questions, and I'll be glad to answer them.

Regards, Alexander Progress Telerik