Absence of left border

[Andrey Kuchmasov]

When I use SfDataGrid, there is no border at the left side of the  table. Is it a bug?

SfDataGridThemeData(

          gridLineColor: colorMain.withOpacity(0.5),

          gridLineStrokeWidth: 1.0,

          rowHoverColor: colorBack1,

          rowHoverTextStyle: TextStyle(color: colorWhite),

          columnResizeIndicatorColor: colorBack1,

          //selectionColor: colorBack1,

          headerColor: colorBack1,

          headerHoverColor: colorMain,

          sortIconColor: colorWhite),

      child: SfDataGrid(

        controller: dataGridController,

        selectionMode: SelectionMode.single,

        navigationMode: GridNavigationMode.cell,

        gridLinesVisibility: GridLinesVisibility.both,

        headerGridLinesVisibility: GridLinesVisibility.both,

        source: documentDataSource,

        columnWidthMode: ColumnWidthMode.fill,

        allowSorting: true,

        allowMultiColumnSorting: true,

        allowColumnsResizing: true,

        allowEditing: true,

[Tamilarasan Paranthaman]

Hi Andrey Kuchmasov,

By default, we didn’t draw the DataGrid left and top outer borders. This is the behavior of the DataGrid. Also, we have planned to provide the support to show the “top and left outer DataGrid borders”. This feature will be implemented in our 2022 Volume 3 release which is expected to be rolled out at the end of September 2022. We will let you know when this feature is implemented. We appreciate your patience until then. You can follow up with the below feedback for further details,  

Feedback Link: https://www.syncfusion.com/feedback/34100/support-to-draw-the-top-and-left-outer-border

Until then, load the DataGrid as a child of the Container widget and set the left border for the Container.decoration property. We have prepared a sample for that. Please check the following sample and code snippet.

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

          title: const Text('Flutter SfDataGrid'),

        ),

        body: Card(

            margin: const EdgeInsets.all(30),

            child: Container(

                decoration: BoxDecoration(

                    border: Border(

                        left: BorderSide(

                            width: 1.0, color: Colors.grey.withOpacity(0.45)))),

                child: SfDataGrid(

                    source: _employeeDataSource,

                    gridLinesVisibility: GridLinesVisibility.both,

                    headerGridLinesVisibility: GridLinesVisibility.both,

                    columnWidthMode: ColumnWidthMode.fill,

                    columns: getColumns))));

  }

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-669694711

We hope this helps. Please let us know if you need any further assistance.

Regards,

Tamilarasan

[Tamilarasan Paranthaman]

Hi Andrey Kuchmasov,

We are glad to announce that our Essential Studio 2022 Volume 3 Main Release V20.3.0.47 is rolled out with the mentioned feature and is available for download under the following link.

https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Tamilarasan