locked
How to show data when clicking a webgrid row? RRS feed

  • Question

  • User-1651604128 posted

    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.

    Tuesday, March 19, 2019 10:43 PM

Answers

  • User1520731567 posted

    Hi Peter Cong,

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 10:24 AM

All replies

  • User1520731567 posted

    Hi Peter Cong,

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 10:24 AM
  • User-1038772411 posted

    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());
        }
    }

    Wednesday, March 20, 2019 12:48 PM
  • User-1651604128 posted

    Hi Peter Cong,

    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
                   
                });

    Wednesday, March 20, 2019 12:57 PM