1

i have create one Webgrid which used to display the data into Tabular form but i want to add the checkbox in Header part of webgrid by using this checkbox i want to perorm the operation check all other checkbox into webgrid and perform the ACTIVE And Delete operation..so please help me how to create it ..below my code of Webgrid:

<div id="mygrid">
     @grid.GetHtml(tableStyle: "gridTable",
         headerStyle: "gridHead",
         footerStyle: "gridFooter",
         rowStyle: "gridRow",
         alternatingRowStyle: "gridAltRow",                                                                                                                                                                                                                                                                                                                                                                                                     
         columns: grid.Columns(
             grid.Column(header: "",format: @<text><input type="checkbox" name="chkactive[]" value="@item.User_id" /></text>),
             grid.Column("User_Id"),
             grid.Column("Name"),
             grid.Column("Username"),
             grid.Column("Fb_Id"),
             grid.Column("User_image", format: @<text><img src="@Url.Content(@item.Image_path)" height="30px" width="50px" alt="noimage"/></text>),
             grid.Column("Email"),
             grid.Column("Gender"),
             grid.Column(header: "Status", format: @<text>
             @if (@item.Is_active == true)
             { 
                 <a href="@Url.Action("UserStatus", "Admin", new { id = @item.User_id })"><img src="../../images/Active.png"/></a> 
             }
             else
             { 
                 <a href="@Url.Action("UserStatus", "Admin", new { id = @item.User_id })"><img src="../../images/Deactive.png"/></a> }</text>),
             grid.Column(header: "Edit",
                 format: @<text><a href="@Url.Action("EditeUser", "Admin", new { id = @item.User_id })"><img src="../../images/icons/editor.png" /></a></text>),
             grid.Column(header: "Delete",
                 format: @<text><a href="@Url.Action("DeleteUser", "Admin", new { id = @item.User_id })"><img src="../../images/icons/trash.png"/></a></text>)))
</div>

please give me some format to display checkbox into Header .. when i create checkbox in to header error is display which is best overloaded metho....? and we also know that header is accept only string type data not to any element..! please give me hint to perform to this operation ok..it;s argent..?

4

2 回答 2

6

WebGrid助手不支持向列标题添加标记。您可以使用更高级的控件，例如Telerik MVC Grid或MVCContrib Grid允许这种自定义。

如果您想使用 WebGrid 帮助程序，您可以使用 javascript 将复选框注入到标题中。这是一个丑陋的 hack，但是自从助手不支持呈现正确的标记以来唯一的一个。

这是一个如何使用 jQuery 完成的示例：

$(function () {
    $('.gridTable thead tr th:first').html(
        $('<input/>', {
            type: 'checkbox',
            click: function () {
                var checkboxes = $(this).closest('table').find('tbody tr td input[type="checkbox"]');
                checkboxes.prop('checked', $(this).is(':checked'));
            }
        })
    );
});
于 2013-03-05T07:18:04.207 回答
0 
@{    
var grid = new WebGrid(Model);
var columns = new List<WebGridColumn>();

WebGridColumn checkBoxColumn = grid.Column(header: "{}",
   format: (item) =>
   {
       // I need access to item properties, otherwise this can be simplified    
       return Html.CheckBox("send-checkbox", false, new { @class = "singleCheckBox" });
   });
columns.Add(checkBoxColumn);
}    

string html = grid.GetHtml(columns: columns).ToString();
 @MvcHtmlString.Create(@html.Replace("{}", "<input type='checkbox' id='allCheckBox'/>"));
}        

<script>
    $().ready(function () {
    $('#allCheckBox').click(function () {
        var isChecked = $(this).is(':checked');
        $('.singleCheckBox').prop('checked', isChecked);            
    });

    $('.singleCheckBox').click(function () {
     var allChecked = ($('.singleCheckBox:checked').length == $('.singleCheckBox').length);            
      $('#allCheckBox').prop('checked', allChecked);                        
     });
});
</script>

我从http://weblogs.asp.net/imranbaloch/archive/2011/09/13/webgrid-helper-with-check-all-checkboxes.aspx借鉴了一些想法

于 2013-09-20T17:21:30.747 回答