Telerik MVC Grid with Dynamic Columns at Run Time from a Collection or Dictionary
===

After spending the last couple days searching, I'm officially stuck.  I'm working on a binding an object to the Telerik MVC 3 Grid, but the catch is that it needs to have dynamically created columns (not auto generated).  Three of the columns are known, the others are unknown, and this is the tricky part.  Basically, it can be like these examples:

KnownColumn1 | KnownColumn2 | UnknownColumn1 | KnownColumn3
KnownColumn1 | KnownColumn2 | UnknownColumn1 | UnknownColumn2 | UnknownColumn3 | KnownColumn3
etc.

Because I'm putting the unknown columns in a list (I've tried a dictionary too so I can get the column names), this has complicated things for me when binding.  My code is below:

Model (There can be zero to hundreds of rows, but this model is in a view model of type List<VendorPaymentsGLAccount>, there can also be 0 to 20 plus columns that are dynamically added)

    public class VendorPaymentsGLAccount
    {
        public string GeneralLedgerAccountNumber { get; set; }
        public string GeneralLedgerAccountName { get; set; }
        public string DisplayName { get { return string.Format("{0} - {1}", GeneralLedgerAccountNumber, GeneralLedgerAccountName); } }
        public Dictionary<string, double> MonthAmount { get; set; }
        public double Total { get { return MonthAmount.Sum(x => x.Value); } }
        public List<string> Columns { get; set; }
        public List<double> Amounts { get; set; }

        public VendorPaymentsGLAccount() { }
    }

View (The section that's commented out was trying to use the dictionary)

    <fieldset>
        <legend>General Ledger Account Spend History</legend>
        @if (Model.VendorPaymentsGLAccounts != null)
        {

                <br />
                @(Html.Telerik().Grid(Model.VendorPaymentsGLAccounts)
                        .Name("Grid")
                        .Columns(columns =>
                        {
                            columns.Bound(gl => gl.DisplayName).Title("General Ledger Account").Width(200).Filterable(false).Sortable(false);
                            
                            //foreach (var month in Model.VendorPaymentsGLAccounts[0].MonthAmount)
                            //{
                            //    //columns.Bound(gl => gl.MonthAmount[month.Key.ToString()].ToString()).Title(month.Key.ToString()).Width(100).Filterable(false).Sortable(false);
                            //    //columns.Template(v => Html.ActionLink(v.VoucherID, "VoucherSummary", new { id = v.VoucherID, bu = v.BusinessUnitID, dtt = v.InvoiceDate.Ticks })).Title("Voucher").Width(100);
                            //    columns.Template(gl => Html.ActionLink(gl.MonthAmount[month.Key.ToString()].ToString(), "VoucherSummary")).Title(month.Key.ToString()).Width(100);
                            //}
                            
                            for (int i = 1; i <= (Model.VendorPaymentsGLAccounts[0].Columns.Count() - 1); i++)
                            {
                                string colTemp = Model.VendorPaymentsGLAccounts[0].Columns[i - 1];
                                columns.Template(gl => gl.Amounts[i - 1]).Title(colTemp).Width(100);
                            }
                            
                            columns.Template(gl => String.Format("{0:C}", gl.Total)).Title("Total");
                        })
                        .Sortable()
                        .Pageable()
                        .Filterable()
                        .Footer(true))
        }
        else
        {
            <br />
            @:There are no records that match your selected criteria.
        }
    </fieldset>

Using the dictionary approach, I was able to get the columns generated correctly with the right header text, but the values for the columns (in my testing there were only 2 columns) were the same.  Can anyone help with this?  This seems to be an oddball issue.  Just trying to figure out how to do this correctly.