@using System.Text.RegularExpressions; @model NorthwindAPI.ViewModels.ProductsViewModel @{ ViewBag.Title = "List of Products"; string supplierIDSelectValues = ":"; string categoryIDSelectValues = ":"; // set the data that's going to be used by the SupplierID select tag in the jqgrid. foreach (var item in Model.SuppliersDropDownListData.OrderBy(s => s.SupplierID)) { supplierIDSelectValues += ";" + item.SupplierID + ":" + item.SupplierID + " - " + Regex.Replace(item.CompanyName is null ? "" : item.CompanyName, "[^a-zA-Z0-9 -]", ""); } // set the data that's going to be used by the CategoryID select tag in the jqgrid. foreach (var item in Model.CategoriesDropDownListData.OrderBy(c => c.CategoryID)) { categoryIDSelectValues += ";" + item.CategoryID + ":" + item.CategoryID + " - " + Regex.Replace(item.CategoryName is null ? "" : item.CategoryName, "[^a-zA-Z0-9 -]", ""); } } @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-listinline.js" asp-append-version="true"></script> <script type="text/javascript"> var urlAndMethod = '/Products/Delete/'; var errorMessage = ''; // sets up data in json format minus the open and closed {}. function getSerializedData(currentId) { // get values from the jqgrid row based on id/primary key. var rowData = $('#list-grid').jqGrid('getRowData', currentId); // get id/primary key values. var productID = rowData.ProductID; // set a minimum value when id(s)/primary key(s) has no value. if (productID == '') productID = '-1'; var serializedData = "'ProductID':'" + productID + "'," + "'ProductName':'" + $('#' + currentId + '_ProductName').val().replace(/~APOS/g, "'").replace(/~QUOT/g, '"').replace(/~NEWL/g, '\n').replace(/'/g, "\\'") + "'," + "'SupplierID':'" + $('#' + currentId + '_SupplierID').val() + "'," + "'CategoryID':'" + $('#' + currentId + '_CategoryID').val() + "'," + "'QuantityPerUnit':'" + $('#' + currentId + '_QuantityPerUnit').val().replace(/~APOS/g, "'").replace(/~QUOT/g, '"').replace(/~NEWL/g, '\n').replace(/'/g, "\\'") + "'," + "'UnitPrice':'" + $('#' + currentId + '_UnitPrice').val() + "'," + "'UnitsInStock':'" + $('#' + currentId + '_UnitsInStock').val() + "'," + "'UnitsOnOrder':'" + $('#' + currentId + '_UnitsOnOrder').val() + "'," + "'ReorderLevel':'" + $('#' + currentId + '_ReorderLevel').val() + "'," + "'Discontinued':'" + $('#' + currentId + '_Discontinued').is(':checked') + "'"; return serializedData; } // validates data. // returns true when all data is valid, otherwise false. function isDataValid(currentId) { var productName = $('#' + currentId + '_ProductName').val(); var quantityPerUnit = $('#' + currentId + '_QuantityPerUnit').val(); var unitPrice = $('#' + currentId + '_UnitPrice').val(); var unitsInStock = $('#' + currentId + '_UnitsInStock').val(); var unitsOnOrder = $('#' + currentId + '_UnitsOnOrder').val(); var reorderLevel = $('#' + currentId + '_ReorderLevel').val(); // validation if (productName == '') errorMessage += '- Product Name is required.<br/>'; if (productName.length > 40) errorMessage += '- Product Name must be 40 characters or less.<br/>'; if (quantityPerUnit.length > 20) errorMessage += '- Quantity Per Unit must be 20 characters or less.<br/>'; if (unitPrice != '' && !isDecimal(unitPrice)) errorMessage += '- Unit Price must be a decimal.<br/>'; if (unitsInStock != '' && !isNumeric(unitsInStock)) errorMessage += '- Units In Stock must be an integer.<br/>'; if (unitsOnOrder != '' && !isNumeric(unitsOnOrder)) errorMessage += '- Units On Order must be an integer.<br/>'; if (reorderLevel != '' && !isNumeric(reorderLevel)) errorMessage += '- Reorder Level must be an integer.<br/>'; if (errorMessage == '') return true; else return false; } $(function () { var supplierIDSelectValues = '@supplierIDSelectValues'; var categoryIDSelectValues = '@categoryIDSelectValues'; // 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', editable: true }, { name: 'SupplierID', index: 'SupplierID', align: 'left', editable: true, formatter: 'select', stype: 'select', edittype: 'select', editoptions: { value: supplierIDSelectValues } }, { name: 'CategoryID', index: 'CategoryID', align: 'left', editable: true, formatter: 'select', stype: 'select', edittype: 'select', editoptions: { value: categoryIDSelectValues } }, { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left', editable: true }, { name: 'UnitPrice', index: 'UnitPrice', align: 'right', editable: true, formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "$"} }, { name: 'UnitsInStock', index: 'UnitsInStock', align: 'right', editable: true, formatter: 'integer' }, { name: 'UnitsOnOrder', index: 'UnitsOnOrder', align: 'right', editable: true, formatter: 'integer' }, { name: 'ReorderLevel', index: 'ReorderLevel', align: 'right', editable: true, formatter: 'integer' }, { name: 'Discontinued', index: 'Discontinued', align: 'center', editable: true, stype: 'select', edittype: 'checkbox', editoptions: { value: 'True:False' } }, { 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 id='editLink" + currentid + "' href='#' onclick=\"editRow('" + currentid + "', 'ListInlineUpdate');\"><img src='/images/Edit.gif' style='border:none;' /></a>" + "<a id='saveLink" + currentid + "' style='display:none;' href='#' onclick=\"saveRow('" + currentid + "', 'Products', 'ListInline');\"><img src='/images/Checked.gif' style='border:none;' /></a>"; // delete link (trash icon) deleteLink = "<a href='#' id='deleteLink" + currentid + "' onclick=\"deleteItem('" + currentid + "')\"><img src='/images/Delete.png' style='border:none;' /></a>" + "<a id='cancelLink" + currentid + "' style='display:none;' href='#' onclick=\"cancelRow('" + currentid + "');\"><img src='/images/Unchecked.gif' 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="#" id="addLink1" onclick="addRow('ListInlineAdd')"><img src="@Url.Content("~/images/Add.gif")" alt="Add New Products" style="border: none;" /></a> <a href="#" id="addLink2" onclick="addRow('ListInlineAdd')">Add New Products</a> <br /><br /> <table id="list-grid"></table> <div id="list-pager"></div>