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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.