@{
    ViewBag.Title = "List of Products";
}
 
@section AdditionalCss {
    <link rel="stylesheet" href="~/css/ui.jqgrid.min.css" />
}
 
@section AdditionalJavaScript {
    <script src="~/js/jqgrid-i18n/grid.locale-en.min.js" asp-append-version="true"></script>
    <script src="~/js/jquery-jqgrid-4.13.2.min.js" asp-append-version="true"></script>
    <script src="~/js/jqgrid-listcrudredirect.js" asp-append-version="true"></script>
 
    <script type="text/javascript">
        var urlAndMethod = '/Products/Delete/';
 
        $(function () {
            // set jqrid properties
            $('#list-grid').jqGrid({
                url: '/Products/GridData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Product ID','Product Name','Supplier ID','Category ID','Quantity Per Unit','Unit Price','Units In Stock','Units On Order','Reorder Level','Discontinued', '', ''],
                colModel: [
                    { name: 'ProductID', index: 'ProductID', align: 'right' },
                    { name: 'ProductName', index: 'ProductName', align: 'left' },
                    { name: 'SupplierID', index: 'SupplierID', align: 'right' },
                    { name: 'CategoryID', index: 'CategoryID', align: 'right' },
                    { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
                    { name: 'UnitPrice', index: 'UnitPrice', align: 'right', formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "$"} },
                    { name: 'UnitsInStock', index: 'UnitsInStock', align: 'right', formatter: 'integer' },
                    { name: 'UnitsOnOrder', index: 'UnitsOnOrder', align: 'right', formatter: 'integer' },
                    { name: 'ReorderLevel', index: 'ReorderLevel', align: 'right', formatter: 'integer' },
                    { name: 'Discontinued', index: 'Discontinued', align: 'center', formatter: 'checkbox' },
                    { name: 'editoperation', index: 'editoperation', align: 'center', width: 40, sortable: false, title: false },
                    { name: 'deleteoperation', index: 'deleteoperation', align: 'center', width: 40, sortable: false, title: false }
                ],
                pager: $('#list-pager'),
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'ProductID',
                sortorder: 'asc',
                viewrecords: true,
                caption: 'List of Products',
                height: '100%',
                width: '1200',
                gridComplete: function () {
                    // get all the ids into an array
                    var ids = $('#list-grid').jqGrid('getDataIDs');
 
                    for (var i = 0; i < ids.length; i++) {
                        // id/primary key
                        var currentid = ids[i];
 
                        // edit link (pencil icon)
                        editLink = "<a href='/Products/Update/" + currentid + "'><img src='/images/Edit.gif' style='border:none;' /></a>";
 
                        // delete link (trash icon)
                        deleteLink = "<a href='#' onclick=\"deleteItem('" + currentid + "')\"><img src='/images/Delete.png' style='border:none;' /></a>";
 
                        // assign the editLink to the editoperation located in the jqgrid's colModel
                        $('#list-grid').jqGrid('setRowData', ids[i], { editoperation: editLink });
 
                        // assign the deleteLink to the deleteoperation located in the jqgrid's colModel
                        $('#list-grid').jqGrid('setRowData', ids[i], { deleteoperation: deleteLink });
                    }
                }
            });
        });
    </script> 
}
 
<h2>@ViewBag.Title</h2>
<br /><br />
<div id="errorConfirmationDialog"></div>
<div id="errorDialog"></div>
 
<a href="@Url.Action("Add", "Products")"><img src="@Url.Content("~/images/Add.gif")" alt="Add New Products" style="border: none;" /></a>&nbsp;@Html.ActionLink("Add New Products", "Add", "Products")
<br /><br />
 
<table id="list-grid"></table>
<div id="list-pager"></div>