How to set dynamic column header in webgrid?

Question

I have used web grid to display employee name, and the projects in a drop down against each employee. For Projects drop down column I have to display the date as column heading which is returned from a HTML helper. i.e. as per the below code instead of column heading "SelectedDate", I have to display the value returned by Html helper (DateTime)@Html.GetNextDate((DateTime)item.SelectedDate, 0)).

Below is the snap shot of View

    @{
       var grid = new WebGrid(Model.employeeProjectsMapper);
     }

    @grid.GetHtml(
    columns: grid.Columns(
     grid.Column("EmployeeName"),
     grid.Column(
     header: "SelectedDate",
        format:
        @<span>
        @{ var index = Guid.NewGuid().ToString(); }
        @Html.Hidden("employeeProjectsMapper.Index", index)
        @Html.Hidden("employeeProjectsMapper[" + index + "].EmployeeID", (Int64)item.EmployeeID)
        @Html.Hidden("employeeProjectsMapper[" + index + "].SelectedDate",  
       (DateTime)@Html.GetNextDate((DateTime)item.SelectedDate, 0))
        @Html.DropDownList("employeeProjectsMapper[" + index + "].SelectedProject",    
       Model.ProjectList)
        </span>
     )
    )
  )

Any help is much appreciated. Thanks Suma

You can have many project dropdowns - one for each employee row. Which date do you want to display in the header? Each employee has a `SelectedDate` property. — Darin Dimitrov, Jan 07 '13 at 06:40
Thank you for your reply.This is used to allot projects to each employee on daily basis. The column header where the project drop down is listed should get the heading from item.SelectedDate. And item.SelecteDate will be same for all employees at a given point of time. — Suma, Jan 11 '13 at 12:16
But this doesn't make sense because you have many items (employees). I still don't understand the Selected date of which employee do you want to be displayed in the column header. Each row in your grid contains an employee record where you have a projects dropdown. In the header for this projects column you want to display some information about an employee but which employee when you have many? Maybe you could update your question and provide some sample data and your expected output. It will make it easier to understand what's your goal. — Darin Dimitrov, Jan 11 '13 at 12:20
Though each employee will have the item.SelectedDate property(for DB purpose) but the value will be always the same for all the employees. So if I take the first SelectedDate in the collection will be fine with the requirement. — Suma, Jan 11 '13 at 12:28

score 0 · Accepted Answer · answered Jan 11 '13 at 12:43

You could add a property to your view model to which your view is strongly typed and which will contain the selected date of the first record for example (since you said in the comments section that all employees have the same value for SelectedDate):

public class MyViewModel
{
    public IEnumerable<SelectListItem> ProjectList { get; set; }
    public IEnumerable<EmployeeViewModel> employeeProjectsMapper { get; set; }

    public DateTime SelectedDate { get; set; }
}

and then inside your controller action simply populate the value for this property:

public ActionResult Index()
{
    var model = new MyViewModel();
    model.ProjectList = ...
    model.employeeProjectsMapper = ...

    // set the SelectedDate property from the first employee record
    // that will be used as header in the selected project column
    model.SelectedDate = model.employeeProjectsMapper.First().SelectedDate;

    return View(model);
}

and finally in your view you could use this property to set the header text using the custom HTML helper:

@model MyViewModel

@{
    var grid = new WebGrid(Model.employeeProjectsMapper);
}

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("EmployeeName"),
        grid.Column(
            header: ((DateTime)Html.GetNextDate(Model.SelectedDate, 0)).ToShortDateString(),
            format:
                @<span>
                    @{ var index = Guid.NewGuid().ToString(); }
                    @Html.Hidden("employeeProjectsMapper.Index", index)
                    @Html.Hidden("employeeProjectsMapper[" + index + "].EmployeeID", (Int64)item.EmployeeID)
                    @Html.Hidden("employeeProjectsMapper[" + index + "].SelectedDate", (DateTime)Html.GetNextDate((DateTime)item.SelectedDate, 0))
                    @Html.DropDownList("employeeProjectsMapper[" + index + "].SelectedProject", new SelectList(Model.ProjectList, "Value", "Text", item.SelectedProject))
                </span>
        )
    )
)

Thank you. I never thought in that direction. – Suma Jan 11 '13 at 12:50 — Suma, Jan 11 '13 at 12:50

How to set dynamic column header in webgrid?

1 Answers1