Binding to a List<List<generic_column>> type data

[Brian]

I've searched and found a variety of answers regarding binding to dynamic data.  The closest I've come is using a DataTable but I can't format the data specifically using it (i.e. currency, date).  Basically we want to allow our users to see their 'User Defined FIelds' in the grid, in addition to the regular items we have in a grid.  I planned on converting all columns (user defined and our standard columns we have for all customers) into one column object:

public class GenericGridListItemViewModel
{
    public string Name { get; set; } = null!;
    public string? TextValue { get; set; }
    public double? NumberValue { get; set; }
    public DateTime? DateValue { get; set; }
    public decimal? CurrencyValue { get; set; }
    public bool Hidden { get; set; }
    public UdfVariableTypes VariableType { get; set; }
}

And then in then I'd iterate through them an use the variable type for formatting the column and the hidden to define if it's hidden.  The below example does not include all the possible variable types but it shows my attempt at getting something up and running.  I get the correct headers on the grid but no rows are filled

The data is returned from the controller as a List<List<GenericGridListItemViewModel>>

If anyone has some insight I'd be thrilled to figure this out.  Thanks, Brian.

    @(
        Html.Kendo().Grid <List<GenericGridListItemViewModel>>()
            .Name("Grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Contacts_Read", "Contacts", new { area = "Contacts" }))
                .PageSize(1000)
                .ServerOperation(false)
            )
            .Columns(columns =>
            {
                int cdx = 0;
                foreach(var col in Model.Data.First())
                {
                    if (col.VariableType == UdfVariableTypes.Integer) 
                    {
                        columns.Bound(l => l[cdx].NumberValue).Title(col.Name);
                    }
                    else if (col.VariableType == UdfVariableTypes.Text)
                    {
                        columns.Bound(l => l[cdx].TextValue).Title(col.Name);
                    }
                    else if (col.VariableType == UdfVariableTypes.Currency)
                    {
                        columns.Bound(l => l[cdx].NumberValue).Title(col.Name).Format("{0:C}").Hidden(Model.Data.First()[cdx].Hidden);
                    }
                    cdx++;
                }
        })
        .Pageable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .ToolBar(t =>
        {
            t.Excel();
            t.Search();
        })
        .Reorderable(l => l.Columns(true))
    )

 

[Anton Mironov]

Hi Brian,

Thank you for the code snippets and the details provided.

In order to achieve the desired behavior, I would recommend using a DataTable as a Model for the View:

@model System.Data.DataTable

The Grid should be configurated to use dynamic:

@(Html.Kendo().Grid<dynamic>()

Now, we could set the desired format or another visual change either by the name of the column or by using its type.

Here is an example with the condition for the name of the column:

    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            var c = columns.Bound(column.ColumnName);
            if (column.ColumnName == "UnitsInStock")
            {
                c.ClientTemplate("<a href='\\#' class='k-button add-Queue'>View</a>");
            }
        }
    })

Here is an example with the condition for the type of the field for the column:

if (column.DataType.FullName == "System.Boolean")
                    {
                        c.ClientTemplate("<input type='checkbox' #=data." + column.ColumnName + " == true ? checked='checked' :''# class='chkbx'/>").Width(110);
                     
                    }

Here is a sample project that could be used as a template:

• https://www.telerik.com/support/code-library/binding-to-datatable-0191a594e359

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[Brian]

Thanks, I'm trying to make it work with the DataTable.  I won't know all of the columns until run time (they are user defined fields) so I can't do things like:

if (column.name == "...") because that information is not available to me at compile time.

I have resorted to prefixing the column names with the specific data type for formatting.  A double might be a percentage or just a  number so using the types in the example on your sample project won't work.

I suspect with some hacks I can make it work.

[Anton Mironov]

Hi Brian,

Thank you for the additional details provided.

You are totally correct, the prefix is a perfect idea!

This prefix could be used in the condition for the column name. Check if the name of the column contains(includes) the prefix and apply the needed ClientTemplate, Formatting, etc.

I hope this information helps.

Best Regards,
Anton Mironov