Put grid toolbar items in pager div

[Hingle McCringleberry]

Hello,

I want to be able to add some of the grid toolbar items like Export To PDF to the (footer) pager area.  How can I do this?

Thanks

[Balaji Sekar]

Hi Joshua, 

Greetings from the Syncfusion support. 

We have analysed your query with provided information and we have achieve the toolbar item binding on pager using pagerTemplate feature. In below code example, we have defined pdfExport button in pagertemplate and pager component instances were defined in the updateTemplate function, it is call from dataBound event of Grid in initial rendering. We have done the pdfExport option in the pagerTemplate using pdfExport method of Grid. Please refer the below code example and sample for more information. 

[Index.cshtml] 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" actionComplete="actionComplete" dataBound="dataBind" allowPdfExport="true"> 

      

    <e-grid-pagesettings pageSize="10" template="#pagetemplate"></e-grid-pagesettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" validationRules="@(new { required = true })" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script id="pagetemplate" type="text/x-template"> 

    <div class="e-pagertemplate"> 

        <table> 

            <tr> 

                <td> 

                    <div id="Pager"></div> 

                </td> 

                <td> 

                    <button id="pdfExport">PdfExport</button> 

                </td> 

            </tr> 

        </table> 

    </div> 

</script> 

 

<script> 

     var temp = false; 

    var filtering = false;     

    function updateTemplate() { 

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0] // Grid instance 

        var totalRecordsC = grid.pagerModule.pagerObj.totalRecordsCount; 

        var pageS = grid.pagerModule.pagerObj.pageSize; 

        var currentPage = grid.pagerModule.pagerObj.currentPage; 

        var totalPages = grid.pagerModule.pagerObj.totalPages; 

        // Created the new pager control based on the Grid page settings 

        var pager = new ej.grids.Pager({ 

            totalRecordsCount: totalRecordsC, 

            pageSize: pageS, 

            currentPage: currentPage, 

            pageCount:2, 

             

        }); 

        pager.appendTo('#Pager');     

        var button = new ej.buttons.Button({}); 

        button.appendTo('#pdfExport'); 

 

        var pagerEle = pager.element.querySelector('.e-link.e-numericitem'); 

        if (!temp) { 

            // created the last page number button and apped it in after the next page button 

            var clone = ej.base.createElement('a', { attrs: { class: "e-link e-numericitem dummy e-spacing e-pager-default", "role": "link", "aria-label": "Goto Page " + totalPages, "rel='nofollow' href": "javascript:void(0);", "name": "Goto page" + totalPages, "tabIndex": "-1" } }); 

            clone.text = totalPages; 

            pager.element.querySelector('.e-np ').parentElement.after(clone); 

        } 

        // hide the default Grid pager message 

        pager.pagerMessageModule.pageNoMsgElem.style.display = "none"; 

        pager.pagerMessageModule.pageCountMsgElem.style.display = "none";   

    }; 

      var flag = true; 

    function dataBind() { 

        if (flag) { 

            flag = false; 

            updateTemplate(); 

            document.getElementById("pdfExport").addEventListener("click", function () {                 

                var grid = document.getElementById("Grid").ej2_instances[0]; 

                grid.pdfExport();   // Export pdf file in pagerTemplate 

            },this) 

        } 

    } 

    function actionComplete(args) {         

        if (args.requestType === 'paging') { 

            updateTemplate(); // refresh pager template while paging 

        } 

         

    } 

       document.addEventListener('click', function (e) { 

        if (e.target.classList.contains('e-pager-default') || e.target.classList.contains('e-numericitem') || e.target.classList.contains('e-nextprevitemdisabled')) { 

            var pager = document.getElementById('Pager').ej2_instances[0]; 

            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

            var value = parseInt(e.target.text); 

            if (pager.element.querySelector('.e-np').parentElement.nextElementSibling.classList.contains('e-next')) { 

                temp = false; 

            } 

            if (!isNaN(value) && pager.currentPage != value) { 

                temp = true; 

                grid.goToPage(value);  // perform paging while click the newly rendured last page button 

            } else { 

                grid.goToPage(pager.currentPage); // perform paging in Grid based on selected value from the pager  

            } 

        } 

       })  

</script> 

Sample link:  https://www.syncfusion.com/downloads/support/forum/154804/ze/Grid-pagertemplate-708897385.zip  

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar