Displaying data from keyvaluepairs

[Ulrich]

Hello,

i am quite new to syncfusion and trying to use the sfgrid to display generic data from List<KeyValuePair<string,string>>.

Here is the sourcecode but i have no glue how to render the row data. I already did to google a solution, searched the forum but did not find a solution.

I have a table with viewcolumns and rows. Rows are of type KeyValuePair<string,string>, viewcolumns represent the columns of the grid and added dynamically.

How can i render the data of the KeyValuePair based on the schemaname ?

I tried my best to describe what i want to achieve. 

Thanks for some hints.

Ulrich

@page "/"

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Inputs

<SfGrid DataSource="@ds.Rows" @ref="TableGrid">

<GridColumns>

</GridColumns>

</SfGrid>

@code{

    SfGrid<TableRow> TableGrid;

    public Table ds = null;

    protected override Task OnInitializedAsync()

    {

        ds = new Table();

        ds.ViewColumns.Add(new ViewColumn { Headertext = "First Name", Position = 1, Schemaname = "firstname" });

        ds.ViewColumns.Add(new ViewColumn { Headertext = "Last Name", Position = 2, Schemaname = "lastname" });

        ds.ViewColumns.Add(new ViewColumn { Headertext = "Day Of Birth", Position = 3, Schemaname = "birthdate" });

        var Row = new TableRow();

        Row.RowData.Add(new KeyValuePair<string, string>("firstname", "Martin"));

        Row.RowData.Add(new KeyValuePair<string, string>("lastname", "Muster"));

        Row.RowData.Add(new KeyValuePair<string, string>("birthdate", "04.02.1988"));

        ds.Rows.Add(Row);

        Row = new TableRow();

        Row.RowData.Add(new KeyValuePair<string, string>("firstname", "Michael"));

        Row.RowData.Add(new KeyValuePair<string, string>("lastname", "Meier"));

        Row.RowData.Add(new KeyValuePair<string, string>("birthdate", "04.05.1968"));

        ds.Rows.Add(Row);

        Row = new TableRow();

        Row.RowData.Add(new KeyValuePair<string, string>("firstname", "Hans"));

        Row.RowData.Add(new KeyValuePair<string, string>("lastname", "Muster"));

        Row.RowData.Add(new KeyValuePair<string, string>("birthdate", "26.02.1990"));

        ds.Rows.Add(Row);

        Row = new TableRow();

        Row.RowData.Add(new KeyValuePair<string, string>("firstname", "Fritz"));

        Row.RowData.Add(new KeyValuePair<string, string>("lastname", "Müller"));

        Row.RowData.Add(new KeyValuePair<string, string>("birthdate", "26.05.1990"));

        ds.Rows.Add(Row);

        return base.OnInitializedAsync();

    }

    protected override Task OnAfterRenderAsync(bool firstRender)

    {

        if ( firstRender)

        {

            foreach ( var v in ds.ViewColumns)

            {

                TableGrid.Columns.Add(new GridColumn { HeaderText = v.Headertext });

            }

        }

        return base.OnAfterRenderAsync(firstRender);

    }

    public class Table

    {

        public List<TableRow> Rows;

        public List<ViewColumn> ViewColumns;

        public Table()

        {

            Rows = new List<TableRow>();

            ViewColumns = new List<ViewColumn>();

        }

    }

    public class TableRow

    {

        public List<KeyValuePair<string, string>> RowData;

        public TableRow()

        {

            RowData = new List<KeyValuePair<string, string>>();

        }

    }

    public class ViewColumn

    {

        public int Position { get; set; }

        public string Headertext { get; set; }

        public string Schemaname { get; set; }

    }

}

[Jeevakanth Palaniappan]

Hi Ulrich, 

Greeting from Syncfusion support. 

We have validated the provided information and we would like to inform you that you can simply assign IEnumerable object to DataSource property to display the data in Grid, no need to use KeyValuePair. By default, when you specify the DataSource property, we have auto generated the columns from the data field or you can specify the columns through GridColumn component. Please refer the below documentation and the demo sample for more information. 

Documentation: 

https://blazor.syncfusion.com/documentation/datagrid/getting-started/#defining-row-data 

https://blazor.syncfusion.com/documentation/datagrid/data-binding/ 

Demo Sample: https://blazor.syncfusion.com/demos/datagrid/default-functionalities?theme=bootstrap4 

Please get back to us if you require further assistance on this. 

 

Regards, 

Jeevakanth SP. 

[Ulrich]

Hello,

thanks for your help.

Unfortunatly i need the solution to use the dictionary.

All metadata and data are read from database and displayed in the datagrid. 

Is it possible to use my models to display the data in the datagrid ?

Thanks

Ulrich

[Jeevakanth Palaniappan]

Hi Ulrich, 

You can use dictionary values to display data in the grid only by using the Column template feature of the grid(Template property of GridColumn). Please refer the below documentation for more information. 

https://blazor.syncfusion.com/documentation/datagrid/how-to/using-dictionary-values-in-grid-datasource/ 

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

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[Ulrich]

Hello,

thank you for your help. I have solved the problem using the dictionary.

Thanks

Ulrich

[Jeevakanth Palaniappan]

Hi Ulrich, 

Thanks for the update. Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.