DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Data Grid

Header and Footer

The DataGrid allows you to customize a header and a footer in the exported PDF file. Follow the steps below to configure a header/footer:

  1. Call the exportDataGrid(options) method.

  2. Use the following API to specify header/footer layout settings:

    • For a header
      Use the topLeft object to specify a start position for DataGrid export. This position should be below the header.

    • For a footer
      Use the customDrawCell function to calculate the coordinates of the last right cell of the DataGrid.

  3. Execute a promise after the exportDataGrid(options) method. In this promise, specify position and appearance of the header/footer.

Thank you for your interest in our ASP.NET MVC product libraries and UI component suite. We are moving ASP.NET MVC-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo