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

Process to write data in Columns rather than Rows

Hello,

Is there a process to write data in a SfDataGrid in Columns of data rather than Rows?

Here's an example of how my sfDataGrid displays data now:

First Name
Last Name
Title
Salary
John
Smith
Director
$100K
Susan
Murray
CEO
$500K


Because I have many columns of data and wish to avoid side-scrolling, I'd like to place the data in this format but I'm unsure how to approach this:

John
Smith
Title
Director
Salary
$100K
Susan
Murray
Title
CEO
Salary
$500K



3 Replies

TP Tamilarasan Paranthaman Syncfusion Team October 17, 2022 01:16 PM UTC

Hi Martin,


Currently, DataGrid doesn’t have support for that mentioned format. By default, we map DataGrid row cell content based on the column and row. You need to do it from the sample level from your end by converting the source to required format. You need to give the same no of column and row cell counts. We have prepared a simple sample for that. In that sample, we have converted the source according to your format. Please check the following sample and code snippet.


class EmployeeDataSource extends DataGridSource {

  /// Creates the employee data source class with required details.

  EmployeeDataSource({required List<Employee> employeeData}) {

    for (Employee data in employeeData) {

      int index = 0;

 

      List employee = [

        'ID',

        data.id,

        'Name',

        data.name,

        'Designation',

        data.designation,

        'Salary',

        data.salary

      ];

      for (int i = 0; i <= (employee.length - 1) / 2; i++) {

        DataGridRow dataGridRow = DataGridRow(cells: <DataGridCell>[

          DataGridCell<String>(columnName: 'Header', value: employee[index]),

          DataGridCell<String>(

              columnName: 'Details', value: employee[index + 1].toString()),

        ]);

 

        datagridRows.add(dataGridRow);

        index = index + 2;

      }

    }

  }

 

 

}

 

List<Employee> _getEmployeeData() {

  return <Employee>[

    Employee(10001, 'Lara', 'Project Lead', 80000),

    Employee(10002, 'James', 'Developer', 23000),

    Employee(10003, 'Kathryn', 'Developer', 43500),

    Employee(10004, 'Michael', 'UI Designer', 50000),

    Employee(10005, 'Martin', 'Developer', 25000),

  ];

}


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


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



MA Martin October 20, 2022 03:03 AM UTC

Thank you Tamilarasan, 

Initial testing seems to have worked with the adjusted code - you've been a huge help and I'm very grateful for your assistance!


Have a great rest of the week!

Martin



TP Tamilarasan Paranthaman Syncfusion Team October 20, 2022 12:24 PM UTC

Hi Martin,


We are glad that the provided response meets your requirement. If you are satisfied with our response, please mark it as an answer. Also, please let us know if you have any further queries on this. We are happy to help you.


Regards,

Tamilarasan


Loader.
Live Chat Icon For mobile
Up arrow icon