@page
@model NorthwindRazor.Pages.Products_ListInlineModel
@using System.Text.RegularExpressions;
@{
    ViewData["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/Products_ListInline';
        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';
 
            $('#list-grid').jqGrid({
                url: '/Products/Products_ListInline?handler=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,
                pageable: true,
                jsonReader:
                {
                    page: "d.page"
                },
                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', '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 });
                    }
                }
            });
        });
 
        // rename the page parameter to _page because asp.net core razor's page model
        // does not recognize the page parameter when passed
        $.extend(jQuery.jgrid.defaults, {
            prmNames: {
                page: "_page"
            }
        });
    </script> 
}
 
<h2>@ViewData["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="bordernone;" /></a>&nbsp;<a href="#" id="addLink2" onclick="addRow('ListInlineAdd')">Add New Products</a>
<br /><br />
 
<table id="list-grid"></table>
<div id="list-pager"></div>