Making a table with columns as entries

[Sorin]

Hello, I'm working with the EjsGrid component and I have a unique goal.

I need to make the Grid such that the elements can be as columns instead of rows.

For example, here is the default type grid from https://ej2.syncfusion.com/blazor/documentation/grid/templates/

In this type, each employee is a row.

My goal however is to make it so that each employee is a column (see concept below)

Does anyone have any advice on how to achieve this?

I was able to write some code to convert the employee structures in to where each structure represents one parameter (such as First Name, Title, etc).

So I am able to programatically achieve the bottom three rows, 

Though the code is a little unnecessarily complicated.

If there was a cleaner way for the grid to receive the original inputs and still display the column based entries that would be much easier

But I'm not sure how to handle the top row.

Obviously I looked in to the row templates, however I understand that the row templates will apply to every row, and this wouldn't work for me since I only need it to apply to the first row.

Is there any way to make the row templates apply to only one row?

Thanks,

Sorin

[Sorin]

Or if there was some way to make the table like the example, but then transpose the values..

[Vignesh Natarajan]

Hi Sorin,  

Greetings from Syncfusion support.  

Query: “I need to make the Grid such that the elements can be as columns instead of rows.” 

 

Currently we do not have direct support to achieve your requirement (transpose the Grid). But as an workaround we have achieved your requirement by transposing the DataSource and bound it to Grid. Refer the below code example.  

<EjsGrid DataSource="@CustomerList" Height="500"> 

    <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 

    <GridColumns> 

        @foreach (DataColumn col in dtFlat.Columns) 

        { 

            <GridColumn Field[email protected] Width="100px" /> 

        } 

    </GridColumns> 

</EjsGrid> 

 

  

@code{ 

    DataTable dtFlat; 

    public List<ExpandoObject> CustomerList; 

    protected override async Task OnInitializedAsync() 

    { 

        dtFlat = OrdersDetails.GetAllRecords(); 

        //transpose the datatable  

        dtFlat = GenerateTransposedTable(dtFlat); 

        //generate list from datatable 

        GenerateListFromTable(dtFlat); 

    } 

 

    //convert datatable to list 

 

    public void GenerateListFromTable(DataTable input) 

    { 

        CustomerList = new List<ExpandoObject>(); 

        foreach (DataRow row in input.Rows) 

        { 

. . . . . . ..  

        } 

    } 

 

    //Transpose the DataTable 

 

    private DataTable GenerateTransposedTable(DataTable inputTable) 

    { 

         . . . .. . . . . 

    } 

} 

Note: Since it is a sample level, it has some limitations. It can be used only for display purpose. Data Operations such as filtering, grouping etc or CRUD operations cannot be performed. 

Kindly download the sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/151663/ze/BlazorApp1-496986218  

If you dataSource is of IEnumerable type, then kindly convert the list to DataTable and transpose the datatable using above method and bind it to Grid.   

Regards, 

Vignesh Natarajan. 

 

[Sorin]

Hi Vignesh,

Thank you so much for your feedback!

The sample code you provided is fantastic, and is much better and more flexible than my initial attempt

(I was not familiar with the use of System.Data.DataTable or ExpandoObject)

It's not a problem for me if data operations such as grouping or CRUD are not available since I don't need them.

However I still have one more display related problem that I'm running in to.

I'm struggling about how to get the row of photos to work without affecting the rest of the table.

I'll explain more in detail below.

What I mean is that the grid view of the transposed data looks great when it's only just text data.

With this I can make adjustments like FrozenColumns="1" and GridLines="GridLine.Vertical" and it works well.

However, things get messy when I try to add the photos in the first row (like below)

I followed examples from syncfusion's documentation (https://ej2.syncfusion.com/blazor/documentation/grid/templates/) to utilize the 

<GridTemplates>  <RowTemplate>

to achieve adding of the photos.

I use an if statement to set photos if it's the first row, or regular data otherwise.

The result works ok, however it removes all the formatting, and functions like FrozenColumns and GridLines no longer work properly.

For example, here is the data without photos (I'm working with housing data):

And here it is with photos:

As you can see, the first column is frozen, but then also shows up to the right of the frozen line.
Also the centering of the text no longer applies, and neither do the grid lines.

I understand that I could probably come up with some CSS to fix the text centering and grid lines, however that kind of defeats the purpose of using the Syncfusion component in the first place (at that point I might as well use a regular HTML table).

Do you know if there is some way to only apply the RowTemplate to only a specific row?

I tried looking through the API but couldn't find anything yet. (https://help.syncfusion.com/cr/blazor/)

If not then I might just go the route of using a regular HTML table.

I appreciate your feedback if you have any ideas!

Thank you!

Sorin

[Vignesh Natarajan]

Hi Sorin,  

 

Sorry for the delay in getting back with you. 

 

Query: “With this I can make adjustments like FrozenColumns="1" and GridLines="GridLine.Vertical" and it works well. However, things get messy when I try to add the photos in the first row (like below)” 

 

We have achieved your requirement using Column Template feature of EjsGrid. Refer the below code example.  

 

<EjsGrid TValue="ExpandoObject" FrozenColumns="1" GridLines="GridLine.Vertical" RowHeight="60" Width="900" DataSource="@Transposed">    <GridColumns>        @foreach (var col in Cols)        {            <GridColumn Field="@col" Width="100">                <Template>                    @{                        dynamic data = (context as ExpandoObject);                        if (data.Columns0 == "EmployeeID")                        {                            if (((IDictionary<String, Object>)data)[col].ToString() != "EmployeeID")                            {                                <div class="image">                                    <img src="@($"scripts/Images/Employees/{((IDictionary<String, Object>)data)[col]}.png")" />                                </div>                            }                        }                        else                        {                            <span>@(((IDictionary<String, Object>)data)[col])</span>                        }                    }                </Template>            </GridColumn>        }    </GridColumns></EjsGrid><style>    .image img {        height: 42px;        width: 55px;        border-radius: 50px;        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);    }    .e-grid .e-gridcontent {        border-top: 1px solid rgb(224, 224, 224);    }    .e-grid .e-gridheader {        display: none;    }</style>@code{    public List<Order> Orders = new List<Order>();    public List<ExpandoObject> Transposed = new List<ExpandoObject>();    public List<string> Cols = new List<string>();    protected override void OnInitialized()    {        Orders = Enumerable.Range(1, 45).Select(x => new Order()        {. . . . . .. .         }).ToList();         //created a columns based on the records.so that it matches the records after transposing         for (var i = 0; i < Orders.Count; i++)        {            Cols.Add("Columns" + i);        }        //generating a transposed records        foreach (PropertyInfo prop in Orders[0].GetType().GetProperties())        {            dynamic list = new ExpandoObject();            var dictionary = (IDictionary<string, object>)list;            dictionary.Add("Columns" + 0, prop.Name);            for (var i = 1; i <= Orders.Count; i++)            {                var dict = (IDictionary<string, object>)list;                dict.Add("Columns" + i, Orders[i - 1].GetType().GetProperty(prop.Name).GetValue(Orders[i - 1], null));            }            Transposed.Add(list);        }    }}

 

 

Refer the below screenshot for the output 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/151663/ze/Transposed671412188  

 

Refer the below UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/columns/#column-template  

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan. 

 

[Sorin]

Hello Vignesh,

Thank you so much for your feedback!

I appreciate you taking the time to create the example and provide the demo code, this is great!

Sorin

[Vignesh Natarajan]

Hi Sorin,  

Thanks for the update.  

We are glad to hear that you are able to achieve your requirement using our solution.  

Kindly get back to us if you need any further assistance from us.  

Regards, 

Vignesh Natarajan.