We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DataGrid Pagination width configuration


I'm having issues with the DataGrid Pagination - Currently the pagination bar is shown but due to the way sizing works it reduces to hide the `items per page` (please refer to the attached images). The pagination bar takes the width from the widget it is within and not the screen size and it would be helpful if we could configure the web variable set `_kMobileViewWidthOnWeb`.



Attachment: 5f072735f7f54cca88024b3bd4931fef.png_8b68412d.zip

1 Reply

TP Tamilarasan Paranthaman Syncfusion Team October 24, 2022 01:16 AM

Hi Will,

By default, the parent width is set as the DataPager width, and the DataPager will be rendered based on that width. Based on the provided image, we suspect you’re wrapping the DataPager as a child of the Row widget. If you wrap the DataPager as a child of the Row widget, then the DataPager gets a width of infinity since the Row widget width is infinite. In that case, we set the DataPager default width as 300 if the DataPager has infinite width. It's the behavior of the DataPager. You can set the width by wrapping the DataGrid as a child of the SizedBox widget and setting the width as MediaQuery.of(context).size.width to the SizedBox.width property. Please check the following code snippet.

 double downloadButtonWidth = 200;



  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: const Text('PageNavigation Demo')),

      body: LayoutBuilder(builder: (context, constraints) {

        return Column(children: [

          SizedBox(height: constraints.maxHeight - 60, child: buildDataGrid()),


            children: [


                width: downloadButtonWidth,

                decoration: const BoxDecoration(

                    borderRadius: BorderRadius.all(Radius.circular(15))),

                child: ElevatedButton.icon(

                    onPressed: () {},

                    icon: const Icon(Icons.download, size: 16),

                    label: const Text('Download')),



                  height: 60,


                      MediaQuery.of(context).size.width - downloadButtonWidth,

                  child: buildDataPager()),








  buildDataPager() {

    return SfDataPager(

      delegate: _customerDataSource,

      pageCount: pageCount,




We hope this helps. In case we misunderstood your requirement, please provide more specific or clear use case details. It will be helpful for us to check and provide an appropriate solution.



Live Chat Icon For mobile
Up arrow icon