CyberStore Documentation
OrderHistory_Grid Widget

A sales order history widget. Introduced in v2.21.

 Remarks
The OrderHistory_Grid widget is designed to provide a front-end user interface that allows Shoppers to view the sales order history. They may view and print  individual sales orders (via the linked DocumentViewer_Popup widget.
By default the widget can be seen by navigating to /ecommerce/CustomerOrderLookup.aspx as a logged in Shopper. 

Order history can be searched using date range, purchase order, or order number criteria.

Individual orders can be viewed or printed by clicking the View button for an individual sales order.

 Widget Option Usage

Widget options provide a way to customize widgets in various ways. Widget options are sent to the widget when loaded with the LoadWidgetControl.

 

 Widget Conventions
 Example

See an example of how to load and configure this widget in SitePages.config.

<Control src="LoadWidgetControl.ascx" 
    FileLocation="OrderHistory_Grid.html" 
    RequireLogin="true" 
/>
 Widget Source

The following is the source code for this widget.

Developer's Note:

To create a custom version of the widget, copy all of the code below into a file of the same name and place it into your Site's widgets folder (e.g., ../YourSiteFolder/Widgets). The CyberStore page engine will then override the default source with your customized version.

<style>
    .sidebarcontent {
        /*    height: 100vh;*/
    }

    div#gridContainer {
        font-size: 16px;
    }

    .popup {
        width: auto;
        scroll-behavior: auto;
        overflow: scroll;
    }

    div#dateForm {
        width: auto !important;
    }

    .dx-button-has-text .dx-button-content {
        padding: 2px 18px 8px;
    }

    .dx-widget {
        font-family: 'Usual', 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    }

    .row.inputWrapper {
        display: initial;
    }

    .dx-form-group-with-caption .dx-form-group-content {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .dx-form-group-caption {
        font-size: 14px;
        font-weight: 600;
    }

    .dx-datagrid-header-panel,
    .dx-datagrid-headers {
        border-bottom: 0px solid #ddd;
    }

    .dx-form-group-with-caption > .dx-form-group-content {
        border-top: 0px solid #ddd;
    }

    .scrollbarContainer {
        padding-right: 5px;
    }

    .dx-datagrid .dx-link {
        margin: 5px 6px !important;
        background: #ee3a43;
        height: 35px;
        width: fit-content;
        padding: 8px 10px !important;
        display: inline-flex;
        position: relative;
        border-width: 0;
        color: #fff;
        justify-content: center;
        text-decoration: none;
    }

    span.dx-sort {
        margin-top: 2px;
    }

    .dx-datagrid-content .dx-datagrid-table.dx-datagrid-table-fixed .dx-column-indicators .dx-sort.dx-sort-none {
        display: block;
    }

        .dx-datagrid-content .dx-datagrid-table.dx-datagrid-table-fixed .dx-column-indicators .dx-sort.dx-sort-none:after {
            display: block !important;
            font-family: 'FontAwesome';
            content: "\f0d7";
            font-size: 20px;
            margin: 0 9px;
            position: relative;
            top: -4px;
        }

    .dx-datagrid .dx-sort-up:before {
        font-family: 'FontAwesome';
        content: "\f0d8";
        font-size: 20px;
        margin: 0 9px;
    }

    .dx-datagrid .dx-sort-down:before {
        font-family: 'FontAwesome';
        content: "\f0d7";
        font-size: 20px;
        margin: 0 9px;
    }
    .dx-item.dx-box-item {
        flex: auto !important;
    }
    div#dateForm label {
        position: absolute;
        top: -9999999px;
        left: -99999999px;
    }

    div#purchaseOrderForm,
    div#orderNumberForm {
        max-width: 410px;
    }

    #dateSearchBtn.dx-button-has-icon .dx-button-content {
        padding: 0;
    }

    div#dateSearchBtn,
    #poSearchBtn,
    #onSearchBtn {
        position: relative;
        top: 22px;
        background-color: #68a4c4;
        width: auto;
        max-height: 35px;
        margin: 0 15px;
    }

      div#dateSearchBtn:hover,
    #poSearchBtn:hover,
    #onSearchBtn:hover  {
            background-color: #68A4C4;
    background-image: -webkit-linear-gradient(top, #68A4C4 0%, #578CA8 100);
    background-image, #578CA8 100);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#68A4C4), to(#578CA8));
    background-image, #578CA8 100);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff68A4C4', endColorstr='#ff578CA8', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    }

    td.dx-calendar-cell {
        display: table-cell !important;
    }

    @media (max-width:912px) {

        .dx-datebox {
            max-width: 170px !important;
        }
    }

    @media (max-width:767px) {
        label.orderdisplayLabel {
            width;
            margin-top: 10px;
            margin-bottom: 0;
        }

        td.dx-calendar-cell {
            display: table-cell !important;
        }

        div#dateSearchBtn {
            /*           position: relative;
            top: -15px;*/
        }

        .dx-datebox {
            max-width: 170px !important;
        }
    }


    @media (max-width:909px) {
        td.dx-calendar-cell {
            display: table-cell !important;
        }

        td {
            display: block;
            /* width: 600px;*/
        }

        /* change mobile display of table to look like floated divs */
        .dx-datagrid-headers {
            display: none;
        }

        .dx-datagrid-content .dx-datagrid-table.dx-datagrid-table-fixed {
            table-layout: auto !important;
        }

        .dx-datagrid-content .dx-datagrid-table .dx-row > td:first-child:before {
            content: 'Order Date: ';
        }

        .dx-datagrid-content .dx-datagrid-table .dx-row > td:nth-child(2):before {
            content: 'Order Number: ';
        }

        .dx-datagrid-content .dx-datagrid-table .dx-row > td:nth-child(3):before {
            content: 'P.O. Number: ';
        }

        .dx-datagrid-content .dx-datagrid-table .dx-row > td:nth-child(4):before {
            content: 'Status: ';
        }

        .dx-datagrid-rowsview .dx-row {
            border-top: 1px solid transparent;
            border-bottom: 1px solid #eee;
        }

        /* change mobile display of order detail table to look like floated divs */
        .orderdisplayTable > tbody > tr {
            display: flex;
        }

            .orderdisplayTable > tbody > tr > td.orderdisplayLabel {
                display: block;
                width: fit-content;
                padding-right: 20px;
            }

            .orderdisplayTable > tbody > tr > td.orderdisplayField {
                display: block;
                width: 165px;
            }

        td.orderdisplayField:empty,
        .orderdisplayTable td:empty {
            width: 0px !important;
        }

        .orderdisplayTable tr.detailhdg2 {
            display: none;
        }

        .orderdisplayTable tr table {
            table-layout: auto !important;
        }

        .orderdisplayTable table {
            border-width: 1px 0;
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:first-child:before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:first-child:before {
            font-weight: 700;
            content: 'Stock Code: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(2):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(2):before {
            font-weight: 700;
            content: 'Description: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(3):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(3):before {
            font-weight: 700;
            content: 'Qty: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(4):before,
        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(4),
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(4):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(4) {
            font-weight: 700;
            content: '';
            display: none;
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(5):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(5):before {
            font-weight: 700;
            content: 'Shipped Qty: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(6):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(6):before {
            font-weight: 700;
            content: 'B/O Qty: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(7):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(7):before {
            font-weight: 700;
            content: 'Price: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(8):before,
        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(8),
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(8):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(8) {
            font-weight: 700;
            content: '';
            display: none;
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(9):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(9):before {
            font-weight: 700;
            content: 'Value: ';
        }

        .orderdisplayTable tr.TableRow td.orderdisplaydetailField:nth-child(10):before,
        .orderdisplayTable tr.HighlightTableRow td.orderdisplaydetailField:nth-child(10):before {
            font-weight: 700;
            content: 'Est. Ship Date: ';
        }

        .orderdisplayTable table td {
            white-space: normal;
        }

        @media (max-width:767px) {

            div#onSearchBtn,
            div#poSearchBtn {
                /*            position: relative;
            top: 0px;*/
            }

            div#orderNumberForm {
                /*margin-top: 15px;*/
            }
        }

        .dx-overlay-content .dx-popup-content {
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            overflow: scroll;
        }
</style>

<div id="divWrapper_newGrid">
    <h1 id="h4Headline_OrderHistory_Grid"></h1>
    <div class="row">
        <h3>Order History</h3>
    </div>
    <div class="row inputWrapper">
        <div class="col-xl-6 col-lg-10 col-md-12 col-sm-12" style="display:flex;margin-bottom: 20px;">
            <div id="dateForm" class="col-xs-5 form"></div>
            <div id="dateSearchBtn" class="col-sm-3 button"></div>
        </div>
        <div class="col-xl-3 col-lg-8 col-md-12 col-sm-12" style="display:flex;margin-bottom: 20px;">
            <div id="purchaseOrderForm" class="col-lg-6 col-md-8 col-sm-6 col-xs-8 form"></div>
            <div id="poSearchBtn" class="col-sm-6 col-xs-4 button"></div>
        </div>
        <div class="col-xl-3 col-lg-8 col-md-12 col-sm-12" style="display:flex;margin-bottom: 20px;">
            <div id="orderNumberForm" class="col-lg-6 col-md-8 col-sm-6 col-xs-8 form"></div>
            <div id="onSearchBtn" class="col-sm-6 col-xs-4 button"></div>
        </div>
    </div>
    <div id="popupContainerOHG" class="popUp"></div>
</div>
<div class="dx-viewport">
    <div id="gridContainer" class="orderHistory"></div>
</div>


<script type="text/javascript">

    $(function () {

        //Set dates for initial load
        var a = new Date();
        var b = new Date();

        b.setDate(b.getDate() - 30);
        var SearchEndDate = a.toLocaleDateString();
        var SearchStartDate = b.toLocaleDateString();

        //date Range search
        var dateForm = $("#dateForm").dxForm({
            labelLocation: "top",
            visible: isVisible(widgetOptions.showDateRangeSearch),
            colCount: "2",
            items: [{
                itemType: "group",
                colCount: "2",
                colCountByScreen: {
                    md: 2,
                    sm: 1
                },
                screenByWidth: function (width) {
                    return width < 720 ? "sm" : "md";
                },
                caption: "Select Date Range",
                items: [{
                    dataField: "startDate",
                    editorType: "dxDateBox",
                    editorOptions: {
                        showClearButton: true,
                        useMaskBehavior: true,
                        displayFormat: "shortdate",
                        type: "date",
                        value: SearchStartDate,
                        showClearButton: true,
                    }
                },
                {
                    dataField: "endDate",
                    editorType: "dxDateBox",
                    editorOptions: {
                        showClearButton: true,
                        useMaskBehavior: true,
                        displayFormat: "shortdate",
                        type: "date",
                        value: SearchEndDate,
                        showClearButton: true,
                    }
                },
                ]
            }]
        }).dxForm("instance");

        var dateSearchBtn = $("#dateSearchBtn").dxButton({
            // icon:"search",
            text: "Search",
            visible: isVisible(widgetOptions.showDateRangeSearch),
            stylingMode: 'contained',
            type: 'default',
            onClick: function () {
                //check date format
                var StartDate = checkDate(dateForm.getEditor("startDate").option("value"));
                var EndDate = checkDate(dateForm.getEditor("endDate").option("value"));
                MakeAJAXCall("Order.GetOrdersByDateRange", {
                    StartDate,
                    EndDate
                }, loadDataInGrid);
            }
        }).dxButton("instance");

        //purchase Order search
        var poForm = $("#purchaseOrderForm").dxForm({
            labelLocation: "top",
            visible: isVisible(widgetOptions.showCustomerPOSearch),
            colCount: 1,
            items: [{
                dataField: "customerPO",
                editorType: "dxTextBox",
                editorOptions: {}
            }]
        }).dxForm("instance");

        var poSearchBtn = $("#poSearchBtn").dxButton({
            text: "Search",
            visible: isVisible(widgetOptions.showCustomerPOSearch),
            stylingMode: 'contained',
            type: 'default',
            onClick: function () {
                var CustomerPO = poForm.getEditor("customerPO").option("value");
                MakeAJAXCall("Order.GetOrdersByPurchaseOrder", {
                    CustomerPO
                }, loadDataInGrid);
            }
        }).dxButton("instance");

        //order Number search
        var onForm = $("#orderNumberForm").dxForm({
            labelLocation: "top",
            visible: isVisible(widgetOptions.showOrderNumberSearch),
            colCount: 1,

            items: [{
                dataField: "orderNumber",
                editorType: "dxTextBox",
                editorOptions: {}
            }]
        }).dxForm("instance");

        var onSearchBtn = $("#onSearchBtn").dxButton({
            text: "Search",
            visible: isVisible(widgetOptions.showOrderNumberSearch),
            stylingMode: 'contained',
            type: 'default',
            onClick: function () {
                OrderNumber = onForm.getEditor("orderNumber").option("value");
                MakeAJAXCall("Order.GetOrdersByOrderNumber", {
                    OrderNumber
                }, loadDataInGrid);
            }
        }).dxButton("instance");

        var grid = $("#gridContainer").dxDataGrid({
            onCellPrepared: function (e) {
                if (widgetOptions.addShippingLink) {
                    addShippingLink(e);
                };
            },
            columns: [{
                dataField: "OrderDate",
                dataType: "string"
            },
            {
                dataField: "SalesOrder",
                caption: "Order Number",
                dataType: "string"
            },
            {
                dataField: "CustomerPoNumber",
                caption: "P.O. Number",
                dataType: "string"
            },
            {
                dataField: "OrderStatus",
                caption: "Status",
                dataType: "string",
                calculateCellValue: function (item) {
                    return item.OrderStatus + ' - ' + item.OrderStatusText;
                }
            },

            {
                dataField: "OrderStatus",
                caption: "Track Order",
                visible: widgetOptions.addShippingLink,
                calculateCellValue: function (item) {
                    if (item.OrderStatus != 1) {
                        return item.OrderStatus;
                    } else {
                        return "";
                    }
                }
            },
            {
                type: "buttons",
                buttons: [{
                    text: "View",
                    onClick: function (e) {
                        if (widgetOptions.viewOrderDetailType == 'newWindow') {
                            PopupCenter('CustomerOrderDisplay.aspx?OrderNumber=' + e
                                .row.data.SalesOrder, 'target');
                        } else {
                            showDocumentViewerPopUp('Order', e.row.data.SalesOrder);
                            //MakeAJAXCall("Order.GetOrderDetailView", {
                            //    OrderNumber: e.row.data.SalesOrder
                            //}, getOrderPopup);

                        }
                    }
                }]
            }
            ],
            allowColumnReordering: true,
            noDataText: "No rows returned!",
            showBorders: false,
            showColumnHeaders: true,
            showColumnLines: false,
            paging: {
                enabled: widgetOptions.enablePaging,
                pageIndex: 0,
                pageSize: widgetOptions.pageSize
            },
            searchPanel: {
                highlightCaseSensitive: false,
                highlightSearchText: true,
                placeholder: "Search...",
                searchVisibleColumnsOnly: true,
                text: "",
                visible: true,
                width: 160
            },
        }).dxDataGrid("instance");

        function addShippingLink(e) {
            var fieldHtml = "";
            if (e.rowType === "data" && e.column.caption === "Track Order" && e.value != "") {
                if (e.row.data.SalesOrder != null && e.row.data.SalesOrder.length > 0) {
                    MakeAJAXCall("Order.GetCustomDataFromOrder", {
                        OrderNumber: e.row.data.SalesOrder,
                        CustomFields: 'SHI001'
                    }, function (DATA) {
                        if (DATA != null) {
                            var data = JSON.parse(DATA);
                            if (data.Result.Success && data.Data.SHI001.length > 0) {
                                fieldHtml += '<a href="' + data.Data.SHI001 +
                                    '" target="_blank">Shipped</a>';
                            } else {
                                fieldHtml = "";
                            }
                            e.cellElement.html(fieldHtml);
                        }
                    });
                }
            }
        }

        function loadDataInGrid(DATA) {
            if (DATA != null) {
                var data = JSON.parse(DATA);
                if (data.Result.Success) {
                    var orders = data.Data;
                    orders = data.Data;
                    grid.option("dataSource", orders);
                }
            }
        }

        function getOrderPopup(DATA) {
            var data = JSON.parse(DATA);
            if (DATA != null) {
                if (data.Result.Success) {
                    var order = data.Html;
                    $("#popupContainerOHG").dxPopup({
                        title: "Order Display",
                        toolbarItems: [{
                            location: "before"
                        }, {
                            widget: "dxButton",
                            location: "after",
                            options: {
                                text: "Print",
                                onClick: function (e) {
                                    var divToPrint = document.getElementById('printOrderDiv');
                                    var newWin = window.open('', 'Print-Window');
                                    newWin.document.open();
                                    newWin.document.write('<html><head><link href="/Ecommerce/site/themes/css/printInvoice.css" rel="stylesheet" /></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
                                    newWin.document.close();
                                    setTimeout(function () { newWin.close(); }, 10);
                                }
                            }
                        }],
                        visible: true,
                        width: 'auto',
                        closeOnOutsideClick: true,
                        resizeEnabled: true,
                        contentTemplate: function (contentElement) {
                            contentElement.append(
                                $('<div />').attr('id', 'scrollbarContainer')
                                    //.append($('<div />').attr('id', 'printOrderDiv').attr('class', 'invoice-box'))
                               , $('<div />').attr('id', 'printOrderDiv').attr('class', 'print-box')
                                    .append(order)
                                    .dxScrollView({
                                        direction: 'both',
                                        scrollByThumb: true,
                                        scrollByContent: true,
                                        useNative: false
                                    })
                            )
                        }
                    });
                }
            }
        }

        function checkDate(DATE) {
            if (DATE == null) {
                var dateString = '';
                return dateString;
            }
            if (typeof DATE != 'string') {
                var dateString = DevExpress.localization.formatDate(new Date(DATE), "shortDate");
                return dateString;
            }
            return DATE;
        }

        function isVisible(wOption) {
            if (wOption === false) { return false; } else { return true; }
        }
    });

</script>