How to make a MVC 3 Webgrid with checkbox column?

0 votes
asked Nov 29, 2010 by 4imble

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.

9 Answers

0 votes
answered Nov 1, 2010 by 4imble

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/

0 votes
answered Nov 29, 2010 by mariusz

Try this

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

instead of

usersGrid.Column(format: (item) => Html.CheckBox(item.Id)),
0 votes
answered Nov 30, 2010 by erx-vb-next-coder

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.

0 votes
answered Nov 30, 2010 by chenriks

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.

0 votes
answered Nov 11, 2011 by oyun

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;" }))
0 votes
answered Nov 30, 2011 by mariusm

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

this should work

0 votes
answered Nov 6, 2014 by vahagn-nahapetyan

The easiest way:

usersGrid.Column(format: (item) => Html.CheckBox("Id"))
0 votes
answered Sep 15, 2017 by ashveli

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>)
0 votes
answered Sep 15, 2017 by hari-krishna

**

@{
  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>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...