I have a webgrid in my mvc web app, I want to add a click event on the row of webgrid, when user click any row, a model popup window is opened with the data related on that row, the data displayed on the model popup window is based on the first hidden column
of the webgrid, which is the key to query the data to be shown on the model popup window.
Appreciative any sample codes, thanks a lot in advance.
According to your requirement,I make a simple demo,you could refer to it:
...your webgrid and other code...
<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
$(function () {
var tr = $('#grid').find('tr'); //note your webgrid's id
tr.bind('click', function (event) {
var values = '';
var tds = $(this).find('td');
$.each(tds, function (index, item) { //here you could open F12 to add breakpoints and write the code that works for you ...
if (index == 1) {
values = values + 'Car Name:' + item.innerText + '<br/>';
}
if (index == 2) {
values = values + 'Images:' + item.innerHTML + '<br/>';
}
if (index == 3) {
values = values + 'Price (In Rs.):' + item.innerText + '<br/>';
} ...
});
$('#myModalContent').html(values);
$("#myModal").modal("show"); //show model popup
// alert(values);
});
});
</script>
How it works:(although the style is too ugly..)
Best Regards.
Yuki Tao
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.Customers.ToList());
}
}
According to your requirement,I make a simple demo,you could refer to it:
...your webgrid and other code...
<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
$(function () {
var tr = $('#grid').find('tr'); //note your webgrid's id
tr.bind('click', function (event) {
var values = '';
var tds = $(this).find('td');
$.each(tds, function (index, item) { //here you could open F12 to add breakpoints and write the code that works for you
...
if (index == 1) {
values = values + 'Car Name:' + item.innerText + '<br/>';
}
if (index == 2) {
values = values + 'Images:' + item.innerHTML + '<br/>';
}
if (index == 3) {
values = values + 'Price (In Rs.):' + item.innerText + '<br/>';
}
...
});
$('#myModalContent').html(values);
$("#myModal").modal("show"); //show model popup
// alert(values);
});
});
</script>
How it works:(although the style is too ugly..)
Best Regards.
Yuki Tao
Hi Yuki,
Thanks a lot for your help...
I also found a simple way like this:
$('#GridID tr').dblclick(function () {
var rowId = $(this).closest("tr").find("td:first").html();
//alert("click test" + rowId);
here add code to fire the model popup
});
Member
366 Points
2214 Posts
How to show data when clicking a webgrid row?
Mar 19, 2019 10:43 PM|Peter Cong|LINK
I have a webgrid in my mvc web app, I want to add a click event on the row of webgrid, when user click any row, a model popup window is opened with the data related on that row, the data displayed on the model popup window is based on the first hidden column of the webgrid, which is the key to query the data to be shown on the model popup window.
Appreciative any sample codes, thanks a lot in advance.
Contributor
3710 Points
1431 Posts
Re: How to show data when clicking a webgrid row?
Mar 20, 2019 10:24 AM|Yuki Tao|LINK
Hi Peter Cong,
According to your requirement,I make a simple demo,you could refer to it:
How it works:(although the style is too ugly..)
Best Regards.
Yuki Tao
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
850 Points
492 Posts
Re: How to show data when clicking a webgrid row?
Mar 20, 2019 12:48 PM|AddWeb Solution|LINK
You Can Also try Using MVC And Javascript.
@model IEnumerable<Customer> @{ Layout = null; WebGrid webGrid = new WebGrid(source: Model, canSort: false); }<body> @webGrid.GetHtml( htmlAttributes: new { @id = "WebGrid", @class = "Grid" }, columns: webGrid.Columns( webGrid.Column("CustomerID", "Customer Id"), webGrid.Column("ContactName", "Customer Name"), webGrid.Column("City", "City"), webGrid.Column("Country", "Country"), webGrid.Column(null, null, format: @<text>@Html.ActionLink("Select", null, null, new { @onclick = "return GetSelectedRow(this);" })</text>) )) <script type="text/javascript"> function GetSelectedRow(link) { var row = link.parentNode.parentNode; var message = "Selected Row:"; message += "\n\nCustomer Id: " + row.getElementsByTagName("TD")[0].innerHTML; message += "\nContact Name: " + row.getElementsByTagName("TD")[1].innerHTML; message += "\nCity: " + row.getElementsByTagName("TD")[2].innerHTML; message += "\nCountry: " + row.getElementsByTagName("TD")[3].innerHTML; alert(message); return false; } </script> </body>In MVC Controller :
public class HomeController : Controller { // GET: Home public ActionResult Index() { NorthwindEntities entities = new NorthwindEntities(); return View(entities.Customers.ToList()); } }Member
366 Points
2214 Posts
Re: How to show data when clicking a webgrid row?
Mar 20, 2019 12:57 PM|Peter Cong|LINK
Hi Yuki,
Thanks a lot for your help...
I also found a simple way like this:
$('#GridID tr').dblclick(function () { var rowId = $(this).closest("tr").find("td:first").html(); //alert("click test" + rowId); here add code to fire the model popup });