Panel Expansion and Button Appear Per Table Row - MVC 5/Bootstrap 3

Question

I have been learning and playing with both MVC and Bootstrap and now I am wanting to take on a new challenge in order to make my dummy site more flexible and less congested. To do this I want to implement two more features on my display tables but I am unsure how I should go about this.

The first feature is to make all my buttons hidden, except for when my mouse is on the table's respective row. i.e. As I move my mouse down the table, each row's buttons will briefly appear while the mouse is over their row.
The second feature is that I also want to be able to expand each row to display additional information i.e. Right now my table shows data for movie name, actor, role, and release date. When I click on a row, I want it to slightly expand down to show all the additional information I have, such as movie description, rating, ect...

Here is my current page online.

enter image description here

Here is my View code.

@model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
    </div>

    <div class="row">
        <div class="col-xs-12">

            <button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3"  onclick=" location.href='@Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3"  onclick=" location.href='@Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>

        </div>
    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">
        <tr>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Role)</span></h3>
            </th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieName)</span>
                </td>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.employeeName)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Role)</span>
                </td>
                <td class="col-lg-3">
                    <button type="button" class="btn btn-warning col-lg-3" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>

                    <button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>

                    <button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                </td>
            </tr>
        }

    </table>
</div>

And here is my ViewModel. (Which has some extra information that I would like to display upon a row being clicked)

namespace WebApplication2.ViewModels.Starring
{
    public class StarringViewModel
    {
        public int movieID { get; set; }
        public int roleID { get; set; }
        public int employeeID { get; set; }
        public string movieName { get; set; }
        public string movieDescription { get; set; }
        public DateTime? movieReleaseDate { get; set; }
        public string Role { get; set; }
        public string employeeName { get; set; }
        public DateTime employeeBirthdate { get; set; }
    }
}

Thank you!

score 1 · Accepted Answer · edited May 23 '17 at 12:24

I can help you with the first one by looking at some old code.

All my rows have the '.element-row' class. The last <td> in each row, has a <div> (hidden by default, with a '.element-options' class) with some buttons.

Then some JavaScript & jQuery:

$('.element-row').hover(
    function () {
        hideAllElementOptions();
        var row = $(this);
        var elementOptions = row.find(".element-options");
        elementOptions.css({
            opacity: 0,
            display: 'inline-block'
        }).animate({ opacity: 1 }, 0); // your parameters here
    },
  function () {
      var row = $(this);
      var elementOptions = row.find(".element-options");
      elementOptions.css({
          display: 'inline-block'
      }).animate({ opacity: 0 }, 0); // your parameters here
  }
);

For the second feature, you could add some onClick event listener (to the table row) that performs an AJAX request to get the necessary data (return JSON or a Partial View) and populate something in the page.

I'm not sure how you can expand a table row (if it was a <div>, it would be easier), but check this question: Can a table row expand and close?

Panel Expansion and Button Appear Per Table Row - MVC 5/Bootstrap 3

1 Answers1