ASP NET MVC kendo grid and column name

Question

I have sql table with fields: Id, Field1, Field2, Field3, Field4, Field5 and I have other table with column f1,f2,f3,f4,f5 this table have only one row with this data: code, vendor, model, year, price

I have this model in my project

public class Products
{
  [ScafoldColumn(false)]  
  public Guid Id{get;set;}
  public string Field1{get;set;}
  public string Field2{get;set;}
  public string Field3{get;set;}
  public string Field4{get;set;}
  public string Field5{get;set;}
}

And I want than my kendo grid show column header not like Field1... but Like data in table 2(code, vendor, model, year, price) how can I load this data from table and set to kendo grid column header?

Answer 1

I'm not sure if what your asking can be done. But the Kendo Grid has a title property, so you can set the Header to whatever you please.

@(Html.Kendo().Grid<OMSWeb.Models.OrderGridViewModel>()
 .Name("grid")
.HtmlAttributes(new { style = "width:115%;font-size:10px;line-height:2em" })
.Columns(columns =>
{        
    columns.Bound(m => m.AdvertiserName).Title("Advertiser Name");
});

etc.

Answer 2

You can't actually do what you are trying. You can bind your model like the following and use Title() as #C Sharper says:

@(Html.Kendo().Grid<Models.Products>()
  .Name("YourReportName")
  .Resizable(resizing => resizing.Columns(true))
  .Columns(columns =>
    {
    columns.Bound(p => p.ID).Width(50).Title("ID");
    columns.Bound(p => p.Field1).Width(50).Title("f1");
    columns.Bound(p => p.Field2).Width(50).Title("f2");
    columns.Bound(p => p.Field3).Width(50).Title("f3");
    columns.Bound(p => p.Field4).Width(50).Title("f4");
    columns.Bound(p => p.Field5).Width(50).Title("f5");
    })
  .Scrollable()
  .DataSource(dataSource => dataSource.Ajax()
    .Read(read => read.Action("GetModelData", "Home")))
  .Pageable(pager => pager.Refresh(true))
  .Sortable()
)

It should be achievable if you bind your grid with js and accept JSon and if you want your column name should be Database driven. In code behind you just need convert your object to json with JsonConvert.SerializeObject(Products); and get the required column names from DB, replace "Field1", "Field2" etc with "f1", "f2" etc. Hope this helps. If you need further assistance please leave a comment. Thanks.

Answer 3

Thanks for answers. But I found other solution I create class

public class MyMetadataProvider : AssociatedMetadataProvider
{
    public MyMetadataProvider () : base()
    {
    }

    protected override ModelMetadata CreateMetadata(IEnumerable<Attribute> attributes, Type containerType, Func<object> modelAccessor, Type modelType,
                                                    string propertyName)
    {
        var metaData = new ModelMetadata(this, containerType, modelAccessor, modelType, propertyName);

        if (propertyName == null)
            return metaData;
        if (propertyName.StartsWith("Field"))
        {
            var c = DbHelper.GetProductColumns();//get data from database
            if (c.Count == 1)
            {
                if (c != null && propertyName == "Field1")
                    metaData.DisplayName = c[0].F1;
                if (c != null && propertyName == "Field2")
                    metaData.DisplayName = c[0].F2;
                if (c != null && propertyName == "Field3")
                    metaData.DisplayName = c[0].F3;
                if (c != null && propertyName == "Field4")
                    metaData.DisplayName = c[0].F4;
                if (c != null && propertyName == "Field5")
                    metaData.DisplayName = c[0].F5;
            }
        }
        else
        {
            if (attributes != null)
            {
                foreach (var a in attributes)
                {
                    var type = a.TypeId as Type;
                    if (type != null && type.Name == "DisplayNameAttribute")
                    {
                        var dn = (a as DisplayNameAttribute).DisplayName;
                        if (!string.IsNullOrEmpty(dn))
                            metaData.DisplayName = dn;

                    }
                }
            }
        }
        return metaData;
    }


}

Use this metadata provider I can change any grid in my website without any additional JS code. I hope this helps someone else. Thanks again.