Angular ControllerJS and MVC C# application

Emmmanuel FIADUFE

Hello Team,
Please am using angular controllerJS in my MVC application and bootstrap template to print transactions after sales,
but in the process of printing, the template sidebar and the invoice print together and want i want to do is to hide the sidebar

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Joshi3y ago

Accepted answer

Hello Emmanuel,

Replace the below code with the function 'GetAllPrintSalesRecord()'.

function GetAllPrintSalesRecord() {
            const urlParams = new URLSearchParams(window.location.search);
            const OrderNo = urlParams.get('OrderNo');         
           .then(function (response) {
               var data = response.data.modifiedData;
               $scope.PrintSalesRecordList = data;
               $scope.Total = response.data.total;
               $scope.DiscountTotal = response.data.discount;
               $scope.VatTotal = response.data.tax;
               if ($scope.$$phase) {
                   $scope.$apply();
               }
               $('#accordionSidebar').css('display', 'none');
               $('.panel-body').css('visibility', 'visible');
               $('#exampleInputUser').css('display', 'none');
               window.print();
               $('#accordionSidebar').css('display', '');
               $('body').css('visibility', 'visible');
           });
        }
    }]);
}).call(angular);

Thanks

Vishal Joshi

Emmmanuel FIADUFE3y ago
Thank you Vishal and Mohammed for your support
+2

Tahir Ansari3y ago

In your HTML template, you can create a separate print CSS to hide the sidebar when printing:

Modify your script to handle the printing action

$(document).ready(function () {
    // Print Script
    $('#invoice-printed').click(function () {
        $('body').css('visibility', 'hidden');
        $('#accordionSidebar').css('display', 'none');
        $('.panel-body').css('visibility', 'visible');
        $('#exampleInputUser').css('display', 'none');

        // Trigger the print action
        window.print();

        // Restore the original visibility and display settings
        $('#accordionSidebar').css('display', '');
        $('body').css('visibility', 'visible');
        $('#exampleInputUser').css('display', '');
    });
});

the code is wrapped in a $(document).ready function to ensure it runs when the document is fully loaded. It hides the sidebar, prints the page, and then restores the visibility and display settings after printing.

Please make sure to include the above CSS and script in the appropriate places within your HTML file, and ensure that the #invoice-printed element corresponds to the button or link that triggers the printing action.