@model MyAppApi.ViewModels.ProductViewModel
@{
    ViewBag.Title = "List of Products By Category";
}
 
@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 type="text/javascript">
        $('#selCategoryID').selectmenu({
             'change': function (event, ui) {
                 selectProductByCategoryID(ui.item.value);
             }
        });
 
        // formats the SupplierID in the jqgrid as a hyperlink
        // so that the link redirects to the record details page when clicked
        function supplierIDLink(cellvalue, options, rowObject) {
            return "<a href='/Supplier/Details/" + cellvalue + "?urlReferrer=/Product/ListByCategoryID'>" + cellvalue + "</a>";
        }
 
        // formats the CategoryID in the jqgrid as a hyperlink
        // so that the link redirects to the record details page when clicked
        function categoryIDLink(cellvalue, options, rowObject) {
            return "<a href='/Category/Details/" + cellvalue + "?urlReferrer=/Product/ListByCategoryID'>" + cellvalue + "</a>";
        }
 
        // used by the selCategoryID select tag.
        // when selection changes, new data is loaded from the database
        // based on the selected CategoryID and resets the page number to 1
        function selectProductByCategoryID(selectValue) {
            $('#list-grid').jqGrid('setGridParam',{ url: '/Product/GridDataByCategoryID/?categoryID=' + selectValue }).trigger('reloadGrid', [{ page: 1 }]);
        }
 
        $(function () {
            // set jqrid properties
            $('#list-grid').jqGrid({
                url: '/Product/GridDataByCategoryID/?categoryID=' + $('#selCategoryID').val(),
                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', formatter: supplierIDLink },
                    { name: 'CategoryID', index: 'CategoryID', align: 'right', formatter: categoryIDLink },
                    { 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' },
                ],
                pager: $('#list-pager'),
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'ProductID',
                sortorder: 'asc',
                viewrecords: true,
                height: '100%',
            });
        });
    </script> 
}
 
<div align="center" class="ctnr-mrgn">
    <h2 id="page-title" class="ta-lf">@ViewBag.Title</h2>
    <br />
 
    <div id="listby-div" class="ta-lf">
        @if (Model.CategoryDropDownListData != null)
        {
            <select id="selCategoryID" class="selectbox" asp-for="Product.CategoryID" asp-items="@(new SelectList(Model.CategoryDropDownListData, "CategoryID", "CategoryName"))"><option value="">Null (no value)</option></select>
        }
        else
        {
            <text>Category:</text> <select id="selCategoryID"><option value="">Category table data is required</option></select>
        }
    </div>
    <br />
    <table id="list-grid"></table>
    <div id="list-pager"></div>
</div>