Hide the title in a single column

1 Answer 18 Views
Grid
Sonny
Top achievements
Rank 1
Sonny asked on 18 Oct 2021, 10:01 PM

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"))
        )
    )

1 Answer, 1 is accepted

Sort by
0
Alexander
Telerik team
answered on 19 Oct 2021, 01:40 PM

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

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Tags
Grid
Asked by
Sonny
Top achievements
Rank 1
Answers by
Alexander
Telerik team
Share this question
or