Select All Checkbox at Header

Jun 6, 2014 at 12:34 PM
Hi, i need to have a select all checkbox at the header of the grid. Select/deselect of the header checkbox should change the selection of checkboxes in each row. It's very urgent. Can any one help?

Thanks
Coordinator
Jun 22, 2014 at 7:32 AM
Hi,

You can use JQuery to find all checkboxes and change their selection:
<input type="checkbox" id="select-all-checkbox" />
<script>
$('#select-all-checkbox').click(function(){
      $('input[type=checkbox]').attr("checked",true);
});
</script>
Jun 23, 2014 at 7:49 AM
How to place a checkbox in the header of the column. Like what we did in Rendercolumn?
Coordinator
Jun 23, 2014 at 1:58 PM
You need to create IGridHeaderRenderer custom implementation:
public class CheckboxColumnRenderer : GridHeaderRenderer
{
    private readonly HtmlHelper _helper;

    public CheckboxColumnRenderer(HtmlHelper helper)
    {
        _helper = helper;
    }

    protected override string RenderAdditionalContent(IGridColumn column)
    {
        return _helper.CheckBox("check-all", false, new { @class = "check-all" }).ToHtmlString();
    }
}
The view:
        var col = columns.Add(o => o.OrderID)
               .Titled("Number")
               .SetWidth(100);

        col.HeaderRenderer = new CheckboxColumnRenderer(Html);
Jun 30, 2014 at 6:49 PM
How do I get the id of the checkbox selected on the grid and use the controller?
tks
Jul 1, 2014 at 5:17 AM
Hi you can use jquery to get the id of the check box selected.
     $('[name="selectchecked"]:checked').each(function () {            
        var CheckboxId = checkboxId.
           };
         Add the checkboxId to a stack.
         });
Call the controller action using ajax and pass the selected ID of check boxes to the controller.
Feb 8, 2015 at 12:59 PM
Edited Feb 8, 2015 at 1:00 PM
I"m trying to add checkbox on header as Select all checkbox, I tried your solution but it HtmlHelper that is passed as parameter to the CheckboxColumnRenderer has some casting error.

I'm using MVC 4.

Could you please help me how to set the header select all checkbox in a grid.

Shouldn't it be very simple as most of the project requirement do have header checkbox.

Also whats the namespace reference for the "HtmlHelper ".
Jul 14, 2015 at 7:13 AM
Hi,

Did you ever get a solution to this? I tried the above given solution but I am also facing this same issue. The namespace is conflicting.

Regards,
Anish
Jul 14, 2015 at 4:26 PM
Off the top of my head I am unsure how to set a [X] Checkbox in the header of a grid column, but I use the below to insert a checkbox at the front of each Grid Row:
columns.Add().Encoded(false).Sanitized(false).SetWidth(30).RenderValueAs(o => @Html.CheckBox("checked", false));
From here, you could perhaps add a separate checkbox control or a [Check All/Uncheck All] button outside of the Grid itself and use jQuery to set the check True/False state of each row's checkbox, then proceed with whatever action you need to perform. May not be precisely what you are looking for, but based on the description I think it should get you going down the right path.

In my particular case, I ended up forgoing the Checkbox completely and instead having a column with a Verification Button which, onclick, would pass the particular row's ID value to a jQuery function for me to query the Database and update the [verification_date] field:
            //columns.Add().Encoded(false).Sanitized(false).SetWidth(30).RenderValueAs(o => @Html.CheckBox("checked", false));
            columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="#" class="btn btn-default btn-sm noDecoration verifyBtn" onclick="verifyAsset(@o.ID)"><span class="glyphicon glyphicon-ok"></span> View</a>).SetWidth(15);
Hope this helps some of you!
Jul 14, 2015 at 5:01 PM
Thanks JScurlock for your prompt reply. I have already add checkbox column and that's not an issue. But my requirement states that I need to add a checkbox in the "header cell". I can implement it using a button but that's not what the client wants :(