How to make a MVC 3 Webgrid with checkbox column?

Question

The code below will insert an actionlink into one of the web grids' columns.

    @{
    View.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var usersGrid = new WebGrid(source: Model,
        rowsPerPage: 40);
}
@usersGrid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
                columns: usersGrid.Columns(
                    usersGrid.Column(format: (item) => 
                         Html.ActionLink("Edit", "Edit", new { id = item.Id})),
                    usersGrid.Column("Surname")
        )
    )

But if i exchange that line for this:

                usersGrid.Column(format: (item) => Html.CheckBox(item.Id)),

I get this error:

Error 4 The best overloaded method match for 'System.Web.Helpers.WebGrid.Column(string, string, System.Func, string, bool)' has some invalid arguments.

I don't quite understand the difference between the two.. why does one work and the other error?

The ultimate goal is to be able to tick a number of check boxes and then send to print their info.

Fatimafatimah

See that : #4195940 – Bridgman

This will help you – Audile

Answer 1

This is what worked for me in the end.

usersGrid.Column(header: "Print?", format: @<text><input name="Prints" 
      type="checkbox" value="@item.ID" /></text>),

Got to give thanks to Nick Harris, answer found in the comments of his blog here: http://www.nickharris.net/2010/10/a-first-look-at-the-asp-net-mvc-3-webgrid/

Fatimafatimah

Good tip, if you have a boolean value to check it you can add an additional condition as well usersGrid.Column(header: "Header", format: @<text><input name="HasFormgivaren" type="checkbox" value="@item.ID" @(item.IsChecked == 1 ? "Checked" : null) /></text>), – Communication

Answer 2

this is working for me:

grid.Column("SiparisNo", "Seç", format: (item) => Html.CheckBox(String.Format("Secili_{0}", (int)item.SiparisNo), false, new { @style = "width:60px;" }))

Technicality

Answer 3

You have to beware of using extension methods (Html.*) with dynamics (item)... it doesn't work well in csharp. When you do the new {} projection or call ToString, it's no longer dynamic. Alternatively, you could cast: (object)item.Id.

Cedeno

Thanks, i'll get the chance to try this later today. – Fatimafatimah

Does this mean in vb it's handled better? just asking hehe :) – Mercurialize

I'm no VB expert, but I think it's a non-issue for VB. I believe dynamics are just cast as objects there. Csharp does runtime binding of dynamics, but can't resolve extension methods at that time. – Cedeno

Answer 4

usersGrid.Column(format: (item) => Html.CheckBox((string)item.Id)),

this should work

Prostyle

Answer 5

The easiest way:

usersGrid.Column(format: (item) => Html.CheckBox("Id"))

Twofaced

Answer 6

This error is occurring because the CheckBox call is not returning the same datatype that ActionLink is returning.

This is what you do. Do a message box call on the action link call and the check box call with same arguments, rap each inside the function call TypeName() and display the results in a msgbox for u to see. Also, do a .ToString in both as well, now, look at the results, it should tell you if there is a discrepancy between the datatypes returned, if you can, post the results, and I can tell you more. Let me know.

Mercurialize

Thanks, i'll get the chance to try this later today. – Fatimafatimah

@kohan ok, let me know how it goes when you do, am interested myself now lol cheers mate – Mercurialize

Don't think the problem was with the checkbox but the dynamic item (which is what chenriks was getting at i think). But anyway, i have sorted it now. Many thanks! – Fatimafatimah

@kohan nevertheless, it was because of a datatype return discrepancy, right? did you try the TypeName and tostring methods to get at it or where you just returning the wrong datatypes to begin with? – Mercurialize

Answer 7

After a vigorous search I found an optimal solution, you can use this logic instead if you're finding difficult to use HTML helpers.

grid.Column(header: "", format: @<text><input name="chkBox" type="checkbox" value="@item.Id" @(item.Id == false ? null : "checked") /></text>)

Diego

Answer 8

grid.Column("ID", "Select", format: (item) => Html.CheckBox((string)item.ID, false, new { @style = "width:60px;" }), canSort: false)

This is working perfect.

Stites

Answer 9

Try this

new HtmlString(usersGrid.Column(format: (item) => Html.CheckBox(item.Id)).ToString()),

instead of

usersGrid.Column(format: (item) => Html.CheckBox(item.Id)),

Dugas

Answer 10

**

@{
  var grid = new WebGrid(source: Model.ToList(), canPage: true, canSort: true);
  grid.Pager (WebGridPagerModes.All);
}

**

<div id="g1">
    @grid.GetHtml(

    columns:grid.Columns
    (grid.Column(columnName:"paymentno",header:"PAYMENT NO"),

    grid.Column(columnName:"mname",header:"NAME"),

    grid.Column(columnName:"pamt",header:"AMOUNT"),

    grid.Column(header: "Header", format: @<text><input name="HasFormgivaren" type="checkbox" 
        value="@item.checkresult" @(item.checkresult == "True" ? "Checked" : null) /></text>)
    )
    )
</div>

Onto

You should add some explanation too – Navigator