Spinner or numeric up down cell in WebGrid in MVC

The following code shows how to insert jquery spinner control in your WebGrid in MVC project. For it i am showing you a simple example of WebGrid.

The following example contains a webgrid with the employee’s details including their department and salary. The code is implementing spinner into salary field so that user can change the salary through up and down buttons.

Here is the table ‘tbl_Employee‘:

EmployeeId	Empname	Age	Department_id	Salary
1	David	30	1	25000.0000
2	A. John	28	2	15000.0000
3	Orato bens	35	3	28000.0000
4	Ban G	50	2	50000.0000
5	Alfredo	30	1	20000.0000

Model Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcApplication1.Models
{
    public class Employee 
    {
        public List<SelectListItem> Department_List { get; set; }
        public List<Employee> Employee_Grid { get; set; }
        public int EmployeeId { get; set; }
        public string EmpName { get; set; }
        public Nullable<int> Age { get; set; }
        public Nullable<decimal> Salary { get; set; }
        public Nullable<int> Department_id { get; set; }
        public string Department { get; set; }
    }
 
}

View
This is the main view named ‘Index.cshtml’ that contains a WebGrid.

@model MvcApplication1.Models.Employee
@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<table>
    <tr>
        <td>
            <div id="EmployeeViewGrid">
            @{  
                var grid1 = new WebGrid(source: Model.Employee_Grid, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "gridContent");
        @grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            rowStyle: "description",
            htmlAttributes: new { id = "positionGrid" },
            fillEmptyRows: false,
            columns: grid1.Columns(
             grid1.Column("EmployeeId", header: "EmployeeId"),
             grid1.Column("EmpName", header: "EmpName"),
             grid1.Column("Age", header: "Age"),
             grid1.Column("Salary",format: (item) => Html.TextBox("Salary", (int)item.Salary, new { @class = "spinnertxt" }), header: "Salary")))
            }
            </div>   
        </td>
    </tr>
</table>
 
<script type="text/javascript">
     $(".spinnertxt").spinner();
     $(".spinnertxt").spinner({ min: 0 });
</script>
<style>
    .spinnertxt
    {
        width:150px;
    }
</style>

From the above, we have create a TextBox template for the salary field. Now to add spinner to this field, you just have to call jQuery method ‘spinner() on the TextBox ‘s class selector.

Notice that your view have the correct implementation of the jQuery libraries otherwise you will not be able to call ajax methods. So include the bundle of the jQuery libraries.

Here is the controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;
 
namespace MvcApplication1.Controllers
{
    public class EmployeeController : Controller
    {
        private EmployeeDatabaseEntities1 db = new EmployeeDatabaseEntities1();
 
        //
        // GET: /Employee/
 
        public ActionResult Index()
        {
            Employee _model = new Employee();
 
            var qq = (from e in db.tbl_Employee
                      select new Employee
                      {
                          Department_id = e.Department_id,
                          EmployeeId = e.EmployeeId,
                          EmpName = e.EmpName,
                          Age = e.Age,
                          Salary = e.Salary
                      }).ToList();
 
            _model.Employee_Grid = qq;
            return View("Index", _model);
        }
        }
}

So this is the way to show the spinner cell in the your WebGrid. When WebGrid is loaded, the jQuery method .spinner() converts the simple salary Textbox in to the spinner input.