How to render a checkbox in the header row using MvcContrib?

Question

I am trying to render a "Select All" checkbox in the header row of my grid using the following.

column.For(x => Html.CheckBox("InvoiceSelection", false, new {@class = "checkbox reqPayment ", value = x.InvoiceId}))
          .Header(o=>"<th><input type=\"checkbox\" id='chkHeader' />Select All</th>")
          .Encode(false)
          .HeaderAttributes(@class => "text-error");

However, this does not render as expected and instead renders with an <a> as the content

<tr><th class="text-error"><a href="/Invoices?Direction=Ascending"></a></th>

The 'row' checkboxes render correctly and have already tried this solution with no luck but not sure if this is applicable to Nuget package I am using at the moment - MvcContrib.Mvc3-ci 3.0.100

Answer 1

I have tested your above code with the same version and it works fine for me.

Might be worth checking the following:

Do you have the specific reference in the view?

@using MvcContrib.UI.Grid

It could be getting mixed up with another Html.Grid helper if you have used a different one elsewhere in the project.

Could there be some other factor that is adding the sort functionality afterwards like a jQuery plugin?

Edit (by question author)

@hutchonoid raised a good point about "other factors" which resulted in me finding the solution.

There are some notes about the final solution

• If you are using a sortable grid, you need to set the Sortable(false) on the column
• There is no need for the <th> elemement

• The solution I ended up using

  column.For(x => Html.CheckBox("InvoiceSelection", false, new {@class = "checkbox reqPayment ", value = x.InvoiceId}))
        .Header(o=>"<input type=\"checkbox\" id='chkHeader' />")
        .Encode(false)
        .Sortable(false)
        .HeaderAttributes(new Dictionary<string, object> { { "style", "width:20px" } }); 
  

• Add for completeness, here is the JS that toggles the "Select All" functionality

  $(document).ready(function () {
      $('#chkHeader').change(function() {
          if ($(this).is(':checked')) {
              $('.reqPayment').attr('checked', 'checked');
          } else {
              $('.reqPayment').removeAttr('checked');
          }
      });
  });