Hi Destinykid,
I have created a sample which full fill your requirement and the required js,css need to be downloaded from below link.
https://github.com/twlikol/GridViewScroll
Refer below sample.
Model
public class Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string CompanyName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
List<Customer> customers = (from customer in this.Context.Customers
select customer).ToList();
return View(customers);
}
}
View
@using EF_Core_MVC.Models;
@model IEnumerable<Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="~/GridviewScroll/gridviewScroll.css" rel="stylesheet" />
<script src="~/GridviewScroll/gridviewScroll.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#gvCustomers').gridviewScroll({
width: 600,
height: 300,
freezesize: 1, // Freeze Number of Columns.
headerrowcount: 1, //Freeze Number of Rows with Header.
arrowsize: 30,
varrowtopimg: "Images/arrowvt.png",
varrowbottomimg: "Images/arrowvb.png",
harrowleftimg: "Images/arrowhl.png",
harrowrightimg: "Images/arrowhr.png"
});
});
</script>
</head>
<body>
<h4>Customers</h4>
<hr />
<table cellpadding="0" cellspacing="0" id="gvCustomers">
<tr>
<th>ID</th>
<th>Name</th>
<th>Company</th>
<th>Address</th>
<th>City</th>
<th>Country</th>
<th>PostalCode</th>
<th>Phone</th>
</tr>
@foreach (Customer customer in Model)
{
<tr>
<td>@customer.CustomerID</td>
<td>@customer.ContactName</td>
<td>@customer.CompanyName</td>
<td>@customer.Address</td>
<td>@customer.City</td>
<td>@customer.Country</td>
<td>@customer.PostalCode</td>
<td>@customer.Phone</td>
</tr>
}
</table>
</body>
</html>
