@{ 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 = '/Product/Delete/'; $(function () { // set jqrid properties $('#list-grid').jqGrid({ url: '/Product/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='/Product/Update/" + currentid + "?urlReferrer=/Product/ListCrudRedirect'><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", "Product", new { urlReferrer = "/Product/ListCrudRedirect" })"><img src="@Url.Content("~/images/Add.gif")" alt="Add New Product" style="border: none;" /></a> @Html.ActionLink("Add New Product", "Add", "Product", new { urlReferrer = "/Product/ListCrudRedirect" }) <br /><br /> <table id="list-grid"></table> <div id="list-pager"></div> 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> @Html.ActionLink("Add New Products", "Add", "Products") <br /><br /> <table id="list-grid"></table> <div id="list-pager"></div>