ASP NET MVC kendo网格和列名

时间:2014-01-28 13:53:02

标签: asp.net-mvc kendo-ui kendo-grid

我有带有字段的sql表: Id,Field1,Field2,Field3,Field4,Field5 我有其他表格列 f1,f2,f3,f4,f5这个表只有一行包含这个数据: 代码,供应商,型号,年份,价格

我的项目中有这个模型

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;}
}

我希望比我的剑道网格显示列标题不像Field1 ... 但是与表2中的数据一样(代码,供应商,型号,年份,价格) 如何从表中加载此数据并设置为kendo网格列标题?

6 个答案:

答案 0 :(得分:12)

我不确定你的要求是否可以做到。但是Kendo Grid有一个title属性,所以你可以将Header设置为你想要的任何东西。

@(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.

答案 1 :(得分:2)

你实际上无法做你正在尝试的事情。您可以像下面那样绑定模型,并使用Title()作为#C Sharper说:

@(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()
)

如果您使用js绑定网格并接受JSon并且您希望列名称应该是数据库驱动的,那么它应该是可以实现的。在后面的代码中,您只需要使用 JsonConvert.SerializeObject(Products); 将对象转换为json,并从DB获取所需的列名,将“Field1”,“Field2”等替换为“f1”,“ f2“等希望这会有所帮助。如果您需要进一步的帮助,请发表评论。感谢。

答案 2 :(得分:2)

感谢您的回答。但我找到了其他解决方案 我创建了类

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;
    }


}

使用此元数据提供程序我可以更改网站中的任何网格,而无需任何其他JS代码。我希望这有助于其他人。 再次感谢。

答案 3 :(得分:1)

嘿,我在通过Jquery生成的kendo网格中也做了同样的事。

第1步: 根据第二个表的数据(代码,供应商,型号,年份,价格)创建一个数组。

第2步: 构建一个ColumnList,使其对象的'field'属性指向表1,'title'将从我们创建的数组元素中获取。

第3步: 将此columnList分配给您的kendo columns属性。

唯一需要注意的是两个表中的列数应该相等。

答案 4 :(得分:1)

如果可用,请使用您的模型。像这样

@Html.Kendo().Grid(Model.Records).Name("ProfessionalScheduleGrid").Columns(x=>
    {
        x.Bound(item => item.Staff.User.Email).Title("Email");
        x.Bound(item => item.Discipline.Name).Title("Discipline");
        x.Bound(item => item.Day1Activity.Activity.Code).Title(Model.SelectedSchedule.ScheduleDays.OrderBy(y => y.DayNumber).Where(y => y.DayNumber == 1).First().Day.ToString("ddd(dd)"));
        x.Bound(item => item.Day2Activity.Activity.Code).Title(Model.SelectedSchedule.ScheduleDays.OrderBy(y => y.DayNumber).Where(y => y.DayNumber == 2).First().Day.ToString("ddd(dd)"));
        x.Bound(item => item.Day3Activity.Activity.Code).Title(Model.SelectedSchedule.ScheduleDays.OrderBy(y => y.DayNumber).Where(y => y.DayNumber == 3).First().Day.ToString("ddd(dd)"));
        x.Bound(item => item.Day4Activity.Activity.Code).Title(Model.SelectedSchedule.ScheduleDays.OrderBy(y => y.DayNumber).Where(y => y.DayNumber == 4).First().Day.ToString("ddd(dd)"));
        x.Bound(item => item.Day5Activity.Activity.Code).Title(Model.SelectedSchedule.ScheduleDays.OrderBy(y => y.DayNumber).Where(y => y.DayNumber == 5).First().Day.ToString("ddd(dd)"));
        x.Bound(item => item.EntireWeekActivity).Title("Set Entire Week");
}).Sortable().Filterable().Pageable().Selectable().DataSource(dataSource => dataSource.Server().Model(model => model.Id(p => p.Id)))

答案 5 :(得分:0)

正如本文所述...... http://www.somedave.com/posts/automatically-generating-column-titles-for-a-kendoui-mvc-grid

使用:

columns.Bound(p => p.YourField).DisplayNameTitle();

添加代码:

public static GridBoundColumnBuilder<TModel> DisplayNameTitle<TModel>(
this GridBoundColumnBuilder<TModel> builder) where TModel : class, new()
{
    // Create an adapter to access the typed grid column
    // (which contains the Expression)
Type adapterType = typeof(GridBoundColumnAdapter<,>)
    .MakeGenericType(typeof(TModel), builder.Column.MemberType);
IGridBoundColumnAdapter adapter =
    (IGridBoundColumnAdapter)Activator.CreateInstance(adapterType);

// Use the adapter to get the title and set it
return builder.Title(adapter.GetDisplayName(builder.Column));
}

private interface IGridBoundColumnAdapter
{
    string GetDisplayName(IGridBoundColumn column);
}

private class GridBoundColumnAdapter<TModel, TValue>
: IGridBoundColumnAdapter where TModel : class, new()
{
    public string GetDisplayName(IGridBoundColumn column)
    {
    // Get the typed bound column
    GridBoundColumn<TModel, TValue> boundColumn =
        column as GridBoundColumn<TModel, TValue>;
    if (boundColumn == null) return String.Empty;

    // Create the appropriate HtmlHelper and use it to get the display name
    HtmlHelper<TModel> helper = HtmlHelpers.For<TModel>(
        boundColumn.Grid.ViewContext,
        boundColumn.Grid.ViewData,
        new RouteCollection());
    return helper.DisplayNameFor(boundColumn.Expression).ToString();
    }
}