DataGrid Pagination width configuration

[Will Roxby]

Hi,

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`.

Thanks,

Will

Attachment: 5f072735f7f54cca88024b3bd4931fef.png_8b68412d.zip

[Tamilarasan Paranthaman]

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;

 

@override

  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()),

          Row(

            children: [

              Container(

                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')),

              ),

              SizedBox(

                  height: 60,

                  width:

                      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.

Regards,

Tamilarasan