Dropdown list in Webgrid

Question

Can somebody help me how can I put a dropdownlist in my webgrid column.

I need to bind my dropdown list to a list from Model. And need to select an item from the list for every corresonding record in the grid.

And I should be able to post selcetd values to the controller.

I have tried solutions givine in few links Dropdownlist propbelm in mvc3 and few othres.

I am pasting my sample code.

Model:

public class AllocateToStore
    {
        public IList<OrderLine> FailureAllocations { get; set; }
        public IList<SelectListItem> AllocationStatus
        {
            get
            {
                // code to fetch list.
            }
        }
    }

 public class OrderLine
    {
        public long Id { get; set; }
        public DateTime Date { get; set; }
        public int Status { get; set; }
    }

Controller:

public ActionResult AutoAllocate()
        {
// This action will load the view with data.
// Get model data and send it to view.

            return View("Allocated",model);
        }

        [HttpPost]
        public ActionResult ResolveUnallocatedOrders(AllocateToStore coll)
        {
// When user changes the selection in grid and post the page I need to get the selection // here. So that I can update that record.
            return null;
        }

And view is

@model AllocateToStore
@{
    ViewBag.Title = "Orders";
}
@{
    var grid = new WebGrid(Model.FailureAllocations, rowsPerPage: 100);
}

@using (Html.BeginForm("ResolveUnallocatedOrders", "OrderProcessing", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    if (Model.FailureAllocations.Any())
    {

    <div>
        @grid.GetHtml(
                columns: grid.Columns(
                    grid.Column(columnName: "Order date", header: "Order Date", format: item => item.Order.Date),
                    grid.Column("dropdown", header: "Resolution", format:
                                                            @<span>
                                                                @{ var index = Guid.NewGuid().ToString(); }
                                                                @Html.Hidden("Status.Index", index)
                                                                @Html.DropDownList("Status[" + index + "].SelectedValue", Model.AllocationStatus)
                                                            </span>
                    )
                ),
                tableStyle: "expandable-table",
                htmlAttributes: new { id = "gridFailureAllocations" }
            )
        <br />
        <input type="submit" value="Resolve" id="resolve-button" />
    </div>
    }

}

Thanks, Naresh

Answer 1

The following should work:

<div>
    @grid.GetHtml(
            columns: grid.Columns(
                grid.Column(columnName: "Date", header: "Order Date"),
                grid.Column("dropdown", header: "Resolution", format:
                    @<span>
                        @{ var index = Guid.NewGuid().ToString(); }
                        @Html.Hidden("FailureAllocations.Index", index)
                        @Html.Hidden("FailureAllocations[" + index + "].Id", (long)item.Id)
                        @Html.DropDownList("FailureAllocations[" + index + "].Status", Model.AllocationStatus)
                    </span>
                )
            ),
            tableStyle: "expandable-table",
            htmlAttributes: new { id = "gridFailureAllocations" }
        )
    <br />
    <input type="submit" value="Resolve" id="resolve-button" />
</div>

and then inside your ResolveUnallocatedOrders controller action you could use coll.FailureAllocations to retrieve the corresponding values:

[HttpPost]
public ActionResult ResolveUnallocatedOrders(AllocateToStore coll)
{
    // coll.FailureAllocations will contain the necessary data
    ...
}

Remark: you could include an additional hidden field for the Order.Date field if you want to retrieve its value back in the POST action.