[Webgrid]–header-(How to ADD custom HTML to header in WebGrid)

How to ADD custom HTML to Header in WebGrid

Myevernote Link

Posted on March, 2013by Mtryambake

How do a MVC 3 Webgrid with checkbox column?
This article would show you a what to add custom HTML to the header in WebGrid e.g. add a check box in WebGrid Header.

Some time you come across a situation where you have to add an HTML element (checkbox) in WebGrid header, consider a column W ith checkbox and want to add checkbox in the header of same column.

Approach:in Document.ready Event Find out WebGrid headers 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 has a checkbox column in WebGrid and on clicking of the Header checkbox all checkbox in column would be CH Ecked.

<script type= "Text/javascript" >     $ (document). Ready (function () {         $ (' #gridContent table th '). 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)