DataGrid：How to adaptively adjust the width and height of self defined sub views

[zhangdc]

Hello, I have two questions that I need help with during use

Development requirement background: 1.The first column grid is frozen and fixed with a width of 140 2.When selecting a column, the comparison percentage should be displayed, and the comparison data is hidden by default

1.Does the sub view support OverflowBox In the first column of data, if the store name is too long, it needs to overflow the parent component area for display

2. Does the sub view support fully customizable widgets and adapt to width and height In the second column of data, a custom view was used, but the adaptive width and height were incorrect

[abineshPalanisamy]

Hi @zhangdc ,

Based on the details and provided images, you are facing an overflow issue with the DataGrid. You can use a respective widget for the cell value in the DataGridRowAdapter.cells within the buildRow method of DataGridSource. Additionally, you need to maintain the parent GridColumn constraints within the widget used in buildRow to avoid overflow issues. In our example, based on the information you provided, we have prepared a simple sample that demonstrates overflow handling using OverflowBox and a custom view in the second column, along with percentage comparison visibility when selection is applied.

We’ve included a sample for your reference. Please review it for further details.

• Sample : SfDataGrid.zip

If there are any misunderstandings regarding your requirements, or if your needs differ, please provide specific and clear details on how you wish to display the comparison details and expected behavior for the detailed view. This additional information will help us thoroughly address your request and provide an appropriate solution.

Regards, Abinesh P

[zhangdc]

The above is the overflow text effect that we want to achieve.

When selected, the currently selected column will display comparison data, while other unselected columns will hide comparison data.

[abineshPalanisamy]

Hi @zhangdc

Overflow text effect :

• As per the requirements, we have prepared a sample for the overflow text effect. You can use the respective widget (OverflowBox) for the cells in the DataSource.buildRow method to achieve this effect.

For the selected column, it will display comparison data :

• For the selected column, it will display comparison data. As of now, DataGrid does not have support column selection. We have considered your request as a feature. We will implement this feature in any of our upcoming releases. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We appreciate your patience and understanding until then. You can follow up with the below feedback for further details,

  Feedback link: 61880

• We have implemented a workaround to display comparison data when the header cell is tapped using the onCellTap callback. This callback is triggered when a tap occurs on a cell. By introducing a boolean flag, we can control the display of the comparison data based on its value. We also call notifyListeners() to refresh the grid and update the UI.

• Please note that this workaround does not select the column; it only allows the comparison data to be displayed when the header is tapped. As a result, we cannot retrieve the selected data for further processing.

We’ve included a sample and video reference for your reference. Please review it for further details.

• Sample : SfDataGrid.zip

Regards, Abinesh P

[zhangdc]

Wow, thank you so much

[zhangdc]

Will cells adapt to custom view width and height?

[abineshPalanisamy]

Hi @zhangdc ,

In the SfDataGrid, you can add custom and standard widgets for the cells as needed. You can use the appropriate widget for the cell value in the DataGridRowAdapter.cells within the buildRow method of DataGridSource. Additionally, you need to maintain the parent GridColumn constraints within the widget used in buildRow to avoid overflow issues. You cannot maintain different constraints for each cell. Based on the column width and the height set for the rows , you need to adjust the constraints of the cell's loading widget accordingly. In the previously provided sample, we used a custom view for the second column. Please refer to it for more details.

We’ve included a code snippet for your reference. Please review it for further details.

     // with a fully customizable view and adaptive width and height.
      Container(
        padding: const EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                row.getCells()[1].value,
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(
                "Salary: ${row.getCells()[2].value}",
                style: const TextStyle(color: Colors.grey),
              ),
            ],
          ),
        ),
      ),

Regards, Abinesh P

[zhangdc]

Thank you

[zhangdc]

Hi @zhangdc

Overflow text effect :

• As per the requirements, we have prepared a sample for the overflow text effect. You can use the respective widget (OverflowBox) for the cells in the DataSource.buildRow method to achieve this effect.

For the selected column, it will display comparison data :

• For the selected column, it will display comparison data. As of now, DataGrid does not have support column selection. We have considered your request as a feature. We will implement this feature in any of our upcoming releases. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We appreciate your patience and understanding until then. You can follow up with the below feedback for further details, Feedback link: 61880
• We have implemented a workaround to display comparison data when the header cell is tapped using the onCellTap callback. This callback is triggered when a tap occurs on a cell. By introducing a boolean flag, we can control the display of the comparison data based on its value. We also call notifyListeners() to refresh the grid and update the UI.
• Please note that this workaround does not select the column; it only allows the comparison data to be displayed when the header is tapped. As a result, we cannot retrieve the selected data for further processing.

We’ve included a sample and video reference for your reference. Please review it for further details.

• Sample : SfDataGrid.zip

Regards, Abinesh P

Overflow text effect

  Widget _wrapInsideContainer() => Container(
      key: widget.key,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
          border: _getCellBorder(dataGridStateDetails(), widget.dataCell)),
      alignment: Alignment.center,
      child: _wrapInsideCellContainer(
        dataGridConfiguration: dataGridStateDetails(),
        child: widget.child,
        dataCell: widget.dataCell,
        key: widget.key!,
        backgroundColor: widget.backgroundColor,
      ));

Due to internal cropping settings, using OverflowBox within the cell did not take effect

[abineshPalanisamy]

Hi @zhangdc ,

Based on the image you previously provided regarding overflow text behavior, we have achieved the desired overflow text behavior for the first column in the SfDataGrid, as illustrated in the sample we shared earlier. Additionally, we have included a two-way approach to achieve this behavior by adding the respective widget in the DataSource.buildRow method, specifically for the first column (Store). For your reference, we have attached an image and the new sample. Please take a moment to review it for further clarity.

If there are any misunderstandings regarding your requirements or if your needs differ, please provide specific and clear details about the expected behavior for the detailed view. This additional information will help us thoroughly address your request and provide an appropriate solution.

• Screenshot of the behavior based on the image you provided earlier:

• Sample : SfDataGrid.zip

• code snippet :

    // This is the first column that exhibits overflow text behavior. 
   // You can use any one of the methods to achieve this behavior.
  
    // First Method to Achieve Overflow Text First colum.
  
    // Container(
    //   padding: const EdgeInsets.all(8.0),
    //   alignment: Alignment.centerLeft,
    //   width: 140,
    //   child: OverflowBox(
    //     child: Text(
    //       row.getCells()[0].value,
    //       softWrap: false,
    //       style: const TextStyle(color: Colors.orange),
    //     ),
    //   ),
    // ),
  
    // Second Method to Achieve Overflow Text for First colum.
    Container(
      padding: const EdgeInsets.all(8.0),
      alignment: Alignment.centerLeft,
      constraints: const BoxConstraints(
        // Ensures minimum width for the cell.
        minWidth: 140,
        // Allow the content to extend beyond bounds.
        maxWidth: double.infinity,
      ),
      child: Text(
        row.getCells()[0].value,
        // Allow overflow.
        overflow: TextOverflow.visible,
        // Disable wrapping so text flows into other cells.
        softWrap: false,
        style: const TextStyle(color: Colors.orange),
      ),
    ),

Regards, Abinesh P