Learn Jquery | Learning Javascript | Jquery Tutorials | Jquery Articles | Learn Scripting

How to display gridview row details on Modal Dialog Popup using Jquery?

<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">link</span>
<span style="color: red;">href</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"</span></span><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt;">rel</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">="stylesheet"</span><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt;">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">="text/css"</span><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">/></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span>
<span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span>
<span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"[id*=lnkpopup]"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
row = $(<span style="color: blue;">this</span>).closest(<span style="color: maroon;">"tr"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                $(<span style="color: maroon;">"#PopupAge"</span>).html($(<span style="color: maroon;">".CAge"</span>, row).html());<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                $(<span style="color: maroon;">"#PopupSex"</span>).html($(<span style="color: maroon;">".CSex"</span>, row).html());<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                $(<span style="color: maroon;">"#PopupEmail"</span>).html($(<span style="color: maroon;">".CEmail"</span>, row).html());<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                $(<span style="color: maroon;">"#popupwindow"</span>).dialog({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    title: <span style="color: maroon;">"Record Details"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    height: 210,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    width: 400,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    buttons: {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: maroon;">"Ok"</span>: <span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                            $(<span style="color: blue;">this</span>).dialog(<span style="color: maroon;">'close'</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    },<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    modal: <span style="color: blue;">true</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span>
<span style="color: blue;">false</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">form</span>
<span style="color: red;">id</span><span style="color: blue;">="form1"</span>
<span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span>
<span style="color: red;">id</span><span style="color: blue;">="popupwindow"</span>
<span style="color: red;">style</span><span style="color: blue;">="</span><span style="color: red;">display</span><span style="color: blue;">: none"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">b</span><span style="color: blue;">></span>Id:<span style="color: blue;"></</span><span style="color: maroon;">b</span><span style="color: blue;">></span> <span style="color: blue;"><</span><span style="color: maroon;">span</span> <span style="color: red;">id</span><span style="color: blue;">="PopupAge"></</span><span style="color: maroon;">span</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">br</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">b</span><span style="color: blue;">></span>Name:<span style="color: blue;"></</span><span style="color: maroon;">b</span><span style="color: blue;">></span> <span style="color: blue;"><</span><span style="color: maroon;">span</span> <span style="color: red;">id</span><span style="color: blue;">="PopupSex"></</span><span style="color: maroon;">span</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">br</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">b</span><span style="color: blue;">></span>Age:<span style="color: blue;"></</span><span style="color: maroon;">b</span><span style="color: blue;">></span> <span style="color: blue;"><</span><span style="color: maroon;">span</span> <span style="color: red;">id</span><span style="color: blue;">="PopupEmail"></</span><span style="color: maroon;">span</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">GridView</span> <span style="color: red;">ID</span><span style="color: blue;">="GridView1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">AutoGenerateColumns</span><span style="color: blue;">="false"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">Columns</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">BoundField</span> <span style="color: red;">DataField</span><span style="color: blue;">="Age"</span> <span style="color: red;">ItemStyle-CssClass</span><span style="color: blue;">="CAge"</span> <span style="color: red;">HeaderText</span><span style="color: blue;">="Age"</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">BoundField</span> <span style="color: red;">DataField</span><span style="color: blue;">="Sex"</span> <span style="color: red;">ItemStyle-CssClass</span><span style="color: blue;">="CSex"</span> <span style="color: red;">HeaderText</span><span style="color: blue;">="Sex"</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">BoundField</span> <span style="color: red;">DataField</span><span style="color: blue;">="Email"</span> <span style="color: red;">ItemStyle-CssClass</span><span style="color: blue;">="CEmail"</span> <span style="color: red;">HeaderText</span><span style="color: blue;">="Email"</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TemplateField</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">ItemTemplate</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">LinkButton</span> <span style="color: red;">Text</span><span style="color: blue;">="Details"</span> <span style="color: red;">ID</span><span style="color: blue;">="lnkpopup"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">ItemTemplate</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TemplateField</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">Columns</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">GridView</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 1.0pt 1.0pt 1.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<br /></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">The above
program used to display the gridview row details with the modal popup window
using JQuery. <o:p></o:p></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></div>
<br />
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<u><span style="color: #666666; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-weight: bold;">Show gridview row details inside Jquery Dialog Modal
Popup , How to show gridview row details on popup window using Jquery , Display
gridview row details on Modal Dialog  using Jquery, Jquery Modal Dialog to
display gridview row details.<o:p></o:p></span></u></div>
</div>
</div>

How to display gridview row details on Modal Dialog Popup using Jquery?

Description: In this article, I will explain how to display gridview row details on modal popup dialog box using Jquery . In s...

How to disable Right click option using Jquery?

How to disable Right click option using Jquery?

Description: In this article, I will explain how to disable right click option on webpage using Jquery . In some scenario, it...

How to disable Browser Refresh and F5 Key using Jquery?

How to disable Browser Refresh and F5 Key using Jquery?

Description: In this article, I will explain how to disable browser refresh (F5) option using Jquery . In some scenario, we ne...

How to set Maximum length for MultiLine textbox using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin: 0in;">
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to set
MaxLength with MultiLine textbox</span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <o:p></o:p></span></div>
</div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">If we want to limit the number of characters
that can be entered in the textbox control, we can use <b>MaxLength</b>
property.<o:p></o:p></span></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">MaxLength property is applicable only with
the textbox mode ‘singleline’ and ‘password’.<o:p></o:p></span></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">If we want to restrict the number of
characters in the <b>MultiLine</b> textbox, MaxLength Property will not work. For
this scenario, use jquery Maxlength <a href="http://www.jqueryjohn.com/search/label/PlugIn">Plugin</a>.<o:p></o:p></span></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">To restrict user from entering characters
beyond a certain limit, use <b>keyup()</b> method with multiline textbox.<o:p></o:p></span></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">MaxLength Plugin used to limits the number
of characters with multiline textbox and also displays the character count as
text is typed.<o:p></o:p></span></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">1. Download MaxLength Plugin from<span class="apple-converted-space"> </span></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><a href="http://www.stjerneman.com/portfolio/maxlength-jquery#download">http://www.stjerneman.com/portfolio/maxlength-jquery#download</a><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">2. Extract it and include the files<span class="apple-converted-space"> </span></span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">jquery.maxlength.js
, style.css<span class="apple-converted-space"> </span></span><span style="font-family: Verdana, sans-serif; font-size: 10pt;">and latest Jquery version.<o:p></o:p></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">3.<span class="apple-converted-space"><span style="background-position: initial initial; background-repeat: initial initial;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial;">Once
the document is ready, initialize the Maxlength widget to the textbox.</span><o:p></o:p></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="font-family: Consolas; font-size: 9.5pt; line-height: normal;">   </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: normal;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: normal;">script</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: normal;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: normal;">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: normal;">="text/javascript"></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">       
$(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">           
$(<span style="color: maroon;">'#TextBox1'</span>).maxlength();<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">><o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<b><u><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Example program:<o:p></o:p></span></u></b></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<b><u><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></u></b></div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;">
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span>
<span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">link</span>
<span style="color: red;">href</span><span style="color: blue;">="style.css"</span>
<span style="color: red;">rel</span><span style="color: blue;">="stylesheet"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/css"</span>
<span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">src</span><span style="color: blue;">="jquery.maxlength.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#TextBox1'</span>).maxlength({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                maxCharacters: 10,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                status: <span style="color: blue;">true</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                statusText: <span style="color: maroon;">"character left"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                showAlert: <span style="color: blue;">true</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                alertText: <span style="color: maroon;">"You have typed too many characters."</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">form</span>
<span style="color: red;">id</span><span style="color: blue;">="form1"</span>
<span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span> <span style="color: red;">ID</span><span style="color: blue;">="Label1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Description"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="TextBox1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">TextMode</span><span style="color: blue;">="MultiLine"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">The above
program limits the number of characters and displays the character count as
text is typed.<o:p></o:p></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></div>
<u1:p></u1:p>

<u1:p></u1:p>

<br />
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;">
<u><span style="color: #666666; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-weight: bold;">Validate Maximum Length of Multiline Textbox using
Jquery, Set Maximum Length to Multiline Textbox using Jquery , Maximum Length
for Multiline Textbox, Limit the number of characters in Multiline Textbox
using Jquery.<o:p></o:p></span></u></div>
</div>
</div>

How to set Maximum length for MultiLine textbox using Jquery?

Description: In this article, I will explain how to set MaxLength with MultiLine textbox using Jquery . If we want to limit ...