[webgrid] – header - (How to Add custom html to Header in WebGrid)

標籤：style   blog   http   io   os   java   ar   strong   for   

How to Add custom html to Header in WebGrid

 

MyEvernote Link

Posted on March 30, 2013by mtryambake

How to make a MVC 3 Webgrid with checkbox column?
This article will show you a How to Add custom html to Header in WebGrid e.g. add a check box in webgrid header.

Some time you come across a situation where you have to add html element (checkbox) in webgrid header, consider a column with checkbox and you want to add checkbox in the header of same column.

Approach: In document.ready event find out webgrid header and replace it with html string.

     $(document).ready(function () {         $(‘#gridContent table th‘).each(function () {             if (this.innerHTML == "") {                 this.innerHTML = "<input type=‘checkbox‘ id=‘chkHeader‘  />";             }         });     });

Application: If you have a checkbox column in webgrid and on clicking of header checkbox all checkbox in column will be checked.

<script type="text/javascript">     $(document).ready(function () {         $(‘#gridContent table th‘).each(function () {             if (this.innerHTML == "") {                 this.innerHTML = "<input type=‘checkbox‘ id=‘chkHeader‘  />";             }         });         $(‘#gridContent table th input:checkbox‘).click(function (e) {             var table = $(e.target).closest(‘table‘);             $(‘td input:checkbox‘, table).attr(‘checked‘, e.target.checked);         });     });</script>========================================================================================================

                         for reference

========================================================================================================

$(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‘));            }        })    );});

[webgrid] – header - (How to Add custom html to Header in WebGrid)