Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Apr 11, 2013 10:11 AM by GaneshAtkale
Member
514 Points
399 Posts
Apr 09, 2013 06:48 AM|LINK
I have this type of gridview. I want open a pop up after clicking on first column of grid
<div class="InfoTable"> @grid.GetHtml( tableStyle: "Grid", headerStyle: "Head", rowStyle:"Firstrow", alternatingRowStyle: "Alt", columns: new[] { grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("First_Name","Tracking",@style:"TrackingCol"), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,"SelectCol"), grid.Column("Last_Name","Status",@style:"StatusCol") }) </div>
please help
Apr 11, 2013 10:11 AM|LINK
/* Z-index of #mask must lower than #boxes .window */ #mask { position: absolute; z-index: 9000; background-color: #000; display: none; } .window { position: fixed; width: 483px; height: 157px; display: none; z-index: 9999; padding: 20px; background-color: rgba(163, 205, 243, 0.96); } /* Customize your modal window here, you can add background image too */ #dialog { width: 375px; height: 203px; } <div id="popup1" class="window"> <div id="overlay-panel12"> <b>Fee Estimate</b> <div class="WindowOp"> <img src="../../Content/Images/minimizeButton.png" alt="Minimize" /> <img src="../../Content/Images/restoreButton.png" alt="Restore" /> <img src="../../Content/Images/closeButton.png" id="image1close" alt="Close" /> </div> <div class="insidepop"> <label id="lbltitle"> <u>Info Requested:</u> </label> <div class="insidepop"> <label id="lblDate1"> Initial Date : </label> <input id="txtInitialDate" type="text" /> <label id="lblFormat"> Format: </label> <select id="ddlFormat" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblByWho"> By Who: </label> <select id="ddlByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="insidepop"> <div class="insidepop"> <label id="lblFollow#1"> Followup #1: </label> <input id="txtFollow1" type="text" /> <label id="lblFollow1"> Format: </label> <select id="ddlFormatFollow1" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblFollow1ByWho"> By Who: </label> <select id="ddlFollow1ByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="insidepop"> <label id="lblFollow#2"> Followup #2: </label> <input id="txtFollow2" type="text" /> <label id="lblFollow2"> Format: </label> <select id="ddlFormatFollow2" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblFollow2ByWho"> By Who: </label> <select id="ddlFollow2ByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="insidepop"> <label id="lblFollow#3"> Followup #3: </label> <input id="txtFollow3" type="text" /> <label id="lblFollow3"> Format: </label> <select id="ddlFormatFollow3" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblFollow3ByWho"> By Who: </label> <select id="ddlFollow3ByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> </div> </div> </div> </div> <script language="javascript" type="text/javascript"> function showpopup(id1) { alert(id1); $("#" + id1).click(function (e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = '#popup1'; //alert(id1); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set height and width to mask to fill up the whole screen // $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); //transition effect $('#popup1').fadeIn(100); // $('#mask').fadeTo("fast", 0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); //transition effect $(id).fadeIn(100); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').hide(); }); //if mask is clicked $('#image1close').click(function () { $('.window').hide(); }); } </script> <div class="InfoTable"> @grid.GetHtml( tableStyle: "Grid", headerStyle: "Head", rowStyle: "Firstrow", alternatingRowStyle: "Alt", columns: new[] { // grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" onclick="show_overlay()" />,@style:"show-overlay" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" onclick="showpopup(this.id)" id="imageId" />,@style:"SelectCol"), grid.Column("First_Name","Tracking",@style:"TrackingCol"), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,"SelectCol"), }) </div>
GaneshAtkale
Member
514 Points
399 Posts
click event of gridview in MVC 3 (In Razor file .cshtml)
Apr 09, 2013 06:48 AM|LINK
I have this type of gridview. I want open a pop up after clicking on first column of grid
<div class="InfoTable">
@grid.GetHtml(
tableStyle: "Grid",
headerStyle: "Head",
rowStyle:"Firstrow",
alternatingRowStyle: "Alt",
columns: new[] {
grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ),
grid.Column("First_Name","Tracking",@style:"TrackingCol"),
grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ),
grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ),
grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,"SelectCol"),
grid.Column("Last_Name","Status",@style:"StatusCol")
})
</div>
please help
MARK AS ANSWER, if my post helps you...
Thanks & Regards
Ganesh Atkale .
GaneshAtkale
Member
514 Points
399 Posts
Re: click event of gridview in MVC 3 (In Razor file .cshtml)
Apr 11, 2013 10:11 AM|LINK
/* Z-index of #mask must lower than #boxes .window */ #mask { position: absolute; z-index: 9000; background-color: #000; display: none; } .window { position: fixed; width: 483px; height: 157px; display: none; z-index: 9999; padding: 20px; background-color: rgba(163, 205, 243, 0.96); } /* Customize your modal window here, you can add background image too */ #dialog { width: 375px; height: 203px; } <div id="popup1" class="window"> <div id="overlay-panel12"> <b>Fee Estimate</b> <div class="WindowOp"> <img src="../../Content/Images/minimizeButton.png" alt="Minimize" /> <img src="../../Content/Images/restoreButton.png" alt="Restore" /> <img src="../../Content/Images/closeButton.png" id="image1close" alt="Close" /> </div> <div class="insidepop"> <label id="lbltitle"> <u>Info Requested:</u> </label> <div class="insidepop"> <label id="lblDate1"> Initial Date : </label> <input id="txtInitialDate" type="text" /> <label id="lblFormat"> Format: </label> <select id="ddlFormat" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblByWho"> By Who: </label> <select id="ddlByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="insidepop"> <div class="insidepop"> <label id="lblFollow#1"> Followup #1: </label> <input id="txtFollow1" type="text" /> <label id="lblFollow1"> Format: </label> <select id="ddlFormatFollow1" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblFollow1ByWho"> By Who: </label> <select id="ddlFollow1ByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="insidepop"> <label id="lblFollow#2"> Followup #2: </label> <input id="txtFollow2" type="text" /> <label id="lblFollow2"> Format: </label> <select id="ddlFormatFollow2" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblFollow2ByWho"> By Who: </label> <select id="ddlFollow2ByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="insidepop"> <label id="lblFollow#3"> Followup #3: </label> <input id="txtFollow3" type="text" /> <label id="lblFollow3"> Format: </label> <select id="ddlFormatFollow3" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> <label id="lblFollow3ByWho"> By Who: </label> <select id="ddlFollow3ByWho" class="PlanDdl"> <option></option> <option>Option1</option> <option>Option2</option> </select> </div> </div> </div> </div> </div> <script language="javascript" type="text/javascript"> function showpopup(id1) { alert(id1); $("#" + id1).click(function (e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = '#popup1'; //alert(id1); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set height and width to mask to fill up the whole screen // $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); //transition effect $('#popup1').fadeIn(100); // $('#mask').fadeTo("fast", 0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); //transition effect $(id).fadeIn(100); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').hide(); }); //if mask is clicked $('#image1close').click(function () { $('.window').hide(); }); } </script> <div class="InfoTable"> @grid.GetHtml( tableStyle: "Grid", headerStyle: "Head", rowStyle: "Firstrow", alternatingRowStyle: "Alt", columns: new[] { // grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" onclick="show_overlay()" />,@style:"show-overlay" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" onclick="showpopup(this.id)" id="imageId" />,@style:"SelectCol"), grid.Column("First_Name","Tracking",@style:"TrackingCol"), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,@style:"SelectCol" ), grid.Column("","",@<img src="../../Content/Images/flag_green.png" alt="SelectImg" />,"SelectCol"), }) </div>MARK AS ANSWER, if my post helps you...
Thanks & Regards
Ganesh Atkale .