pdf and excel export issue and other grid questions

[issam]

Hi,

i am using the grid component in my cshtml view in pure javascript (no typescript, no nodejs)

i have copied all the css/js files from the essential studio installation directory to my web application an came up with something like this

also ihave delete all the .ts files

before i start, the grid work correctly with the data returned from my web api method

only the pdf and excel export don't work 

here what i got so far 

    <!-- imported related css files as well -->

    <script src="~/lib/Syncfusion/ej2-base/dist/global/ej2-base.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-data/dist/global/ej2-data.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-buttons/dist/global/ej2-buttons.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-inputs/dist/global/ej2-inputs.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-popups/dist/global/ej2-popups.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-compression/dist/global/ej2-compression.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-calendars/dist/global/ej2-calendars.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-excel-export/dist/global/ej2-excel-export.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-file-utils/dist/global/ej2-file-utils.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-grids/dist/global/ej2-grids.min.js"></script>

    <script src="~/lib/Syncfusion/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"></script>

    <script src="~/lib/airdatepicker/js/datepicker.min.js"></script>

        function setupgrid(r) {

            grid = new ej.grids.Grid({

                allowExcelExport: true,

                allowPdfExport: true,

                allowPaging: true,

                allowGrouping: true,

                toolbar: ['PdfExport'], // this cause error in the console

                groupSettings: { showDropArea: false, columns: ['Institution'] },

                columns: [

                    { field: 'Institution', width: 140, headerText: 'السجن', type: 'string' },

                    { field: 'FullName', headerText: 'اسم المودع', textAlign: 'Right', width: 120 },

                    { field: 'ResidentName', headerText: 'اسم السجين', textAlign: 'Right', width: 120, type: 'string' },

                    { field: 'Date', headerText: 'تاريخ الايداع', width: 140},

                    { field: 'DeliveryDate', headerText: 'تاريخ الاستلام', width: 140,},

                    { field: 'Amount', headerText: 'المبلغ', textAlign: 'Right', width: 120, type: 'number' },

                    { field: 'State', headerText: 'الحالة', textAlign: 'Right', width: 120, type: 'number' }

                ],

                aggregates: [{

                    columns: [{

                        type: 'Sum',

                        field: 'Amount',                    

                        footerTemplate: 'المجموع : ${Sum}',

                    }],

                    columns: [{

                        type: 'Count',

                        field: 'Amount',

                        //format: 'C2',

                        groupCaptionTemplate: 'عدد التحويلات: ${Count}'

                    }]

                }]

            });

          

            grid.dataSource = r;

            grid.appendTo('#Grid');      

        }

        $(document).ready(function () {

             

              

            $.ajax({

                url: "/Admin/GetReportOrders",

                type: "GET" ,

                success: function (result) {

                    

                    setupgrid(result);

                    

                }

            });

        });

when i run this code i get an error in the console

if i remove the toolbar configuration line, it work as expected .

2 - do i need any server code for this to work ?

3 - other qiestion : is it possible to customize the group rows and add custom elements for avg, sum and count values 

4 - is it possible to customize the groups titles?

thanks .

[Sujith Kumar Rajkumar]

Hi Issam, 

 

Greetings from Syncfusion support. 

 

The Grid’s toolbar is a dependent component of the Toolbar in the Navigations package. So you need to import the navigations package also in your application for initializing the Toolbar in the Grid, 

 

<script src="~/lib/Syncfusion/ej2-navigations/dist/global/ej2-navigations.min.js"></script> 

 

Also you need to call the Grid’s pdfExport method on toolbar click to execute this operation. 

 

grid.toolbarClick = function (args) { 

        if (args['item'].id === 'Grid_pdfexport') { 

            grid.pdfExport(); 

        } 

} 

 

Pdf export documentation: https://ej2.syncfusion.com/javascript/documentation/grid/pdf-export/?no-cache=1#pdf-export 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R