-->

Telerik的网格自定义列建筑/格式化(Telerik grid custom column bu

2019-09-18 03:29发布

我有一个动态数据源(网格可使用多达约10完全不同的模型其数据)一个Telerik的网格,所以我要建立的列动态以及(明显)。 其中在网格(某些型号)列的是双代表以毫秒为单位的时间跨度。 我想要做的就是格式这双看起来像一个时间跨度 .The Telerik的代码如下所示:

<% Html.Telerik()
     .Grid(Model.DynamicGridDataSource)
     .Name("statisticalGrid")
     .Columns(a => GridHelper.GenerateColumns(a, Model.SelectedReport))
     .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectGrid", "Reports", new { reportId = Model.ReportId, dateFrom = Model.DateFrom, dateTo = Model.DateTo, date = Model.Date, AvailablePlans = Model.AvailablePlans }))
     .Sortable(GridSortSettingsBuilder => GridHelper.SortColumns(GridSortSettingsBuilder,
                                            Model.DynamicGridDataSource.GetType(),
                                            Model.SelectedReport))
     .Filterable()
     .Pageable(page => page.PageSize(25))
     .Reorderable(reorder => reorder.Columns(true))
     .Groupable
     (
         groupingSettingsBuilder => GridHelper.GroupColumns(groupingSettingsBuilder,
                                    Model.DynamicGridDataSource.GetType(),
                                    Model.SelectedReport)
     )
     .ClientEvents(events => events
          .OnColumnReorder("onReorder"))
     .Render();

和GridHelper.GenerateColumns看起来是这样的:

public static void GenerateColumns(GridColumnFactory<dynamic> columnFactory, Company.Product.Data.Entity.Report reportStructure)
        {
            foreach (var columnLayout in reportStructure.ReportCols.OrderBy(o => o.ColumnSequence))
            {
                var columnBuilder = columnFactory.Bound(columnLayout.ColumnType);

                if (columnLayout.ColumnType.Equals("SessionLength") ||
                 columnLayout.ColumnType.Equals("AverageTime") ||
                 columnLayout.ColumnType.Equals("TotalTime") ||
                 columnLayout.ColumnType.Equals("CallTime"))
                {
                    // disable grouping
                    columnBuilder.Groupable(false);
                    string dataBindProperty = columnLayout.ColumnType;
                    if (columnLayout.DataFormat == "{0:T}")
                    {
                        //Even though the format looks like time ({0:T}), its actually a double which needs to be formatted here to look like a TimeSpan
                    }

                }

                if (!string.IsNullOrEmpty(columnLayout.Label))
                {
                    columnBuilder.Title(columnLayout.Label);
                }

                if (columnLayout.DataFormat != null && columnLayout.DataFormat == "{0:P}")
                {
                    columnBuilder.Format("{0:P}");
                }

                if (columnLayout.SumIndicator)
                {
                    if (columnLayout.DataFormat == "{0:T}")
                    {
                        AddAggregateToColumnTimeSpan(columnBuilder, Aggregate.Sum);
                    }
                    else
                    {
                        AddAggregateToColumn(columnBuilder, Aggregate.Sum);
                    }
                }

                if (columnLayout.HideIndicator)
                {
                    columnBuilder.Column.Hidden = true;
                }

            }
        }

我能够正确地格式化页脚,但我不知道如何在列的其余部分,因为出Telerik的代码的背景下,我没有进入格式化item迭代器或任何东西。 任何建议/想法? 也许columnFactory.Bound(columnType).Format(/*something*/)

Answer 1:

你说,“网格可以使用多达约10完全不同的模型,其数据”,所以也许不是试图代表一个网格中的所有这些模型,你必须为每个模型一个网格。 你可以使用一些机制来决定哪些局部视图加载把每个网格在它自己的局部视图与主视图。 下面是一个简单的例子。

调节器

public ActionResult DynamicReport
{
    //Get your Model
    Model.model1 = model_01 = Model.DynamicGridDataSource.GetDynamicModel()
    //Get the name of what model is being returned so view knows which 
    //partial view to load
    ViewBag.Message = model_01.Name
    ...

    return View(model_01)
}

在视图中有一些条件逻辑来选择哪个局部视图来加载。

视图

<h2>View</h2>
@{
  string pView = "~/Views/Grid/Partial_01.cshtml";
  switch(ViewBag.Message)
  {
      case "p02":
      pView =  "~/Views/Grid/Parital_02.cshtml"
      break;
      .....
  }
}

@Html.Partial(pView)

PartialView_01

@model List<Models.Misc>
@(Html.Telerik().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
      columns.Bound(a => a.Id).Width(120);
      columns.Bound(a => a.Name).Width(100);
      columns.Bound(a => a.Value).Format("{0:#,##0.00}").Width(100).Title("Price");
    })
)

PartialView_02

@model List<Models.Temp>
@(Html.Telerik().Grid(Model)
  .Name("Grid")
  .Columns(columns =>
  {
    columns.Bound(o => o.Name)
            .Aggregate(aggregates => aggregates.Count())
            .FooterTemplate(@<text>Total Count: @item.Count</text>)
            .GroupFooterTemplate(@<text>Count: @item.Count</text>);

    columns.Bound(o => o.Start)
            .Template(@<text>@item.Start.ToShortDateString()</text>)
            .Aggregate(aggreages => aggreages.Max())
            .FooterTemplate(@<text>Max: @item.Max.Format("{0:d}")</text>)
            .GroupHeaderTemplate(@<text>Max: @item.Max.Format("{0:d}")</text>)
            .GroupFooterTemplate(@<text>Max: @item.Max.Format("{0:d}")</text>);

    columns.Bound(o => o.Value)
            .Width(200)
            .Aggregate(aggregates => aggregates.Average())
            .FooterTemplate(@<text>Average: @item.Average</text>)
            .GroupFooterTemplate(@<text>Average: @item.Average</text>);

    columns.Bound(o => o.tsMilliseconds)
          .Width(100)
          .Aggregate(aggregates => aggregates.Sum())
          .Template(@<text>@TimeSpan.FromMilliseconds(@item.tsMilliseconds)</text>)
          .Title("TimeSpan")
          .FooterTemplate(
          @<text>
                <div>Sum: @TimeSpan.FromMilliseconds(@Convert.ToDouble(@item.Sum.Value.ToString())) </div>
            </text>)
      //header if you group by TimeSpan
          .GroupHeaderTemplate(@<text>@item.Title: @item.Key (Sum: @TimeSpan.FromMilliseconds(@Convert.ToDouble(@item.Sum.Value.ToString())))</text>)
      //footer for grouping
          .GroupFooterTemplate(@<text>Sum: @TimeSpan.FromMilliseconds(@Convert.ToDouble(@item.Sum.Value.ToString()))</text>);
  })
    .Sortable()
    .Groupable(settings => settings.Groups(groups => groups.Add(o => o.Start)))
) 

依此类推,每一个不同的模式。 对于具有其自身的局部视图每个模型,你可以很容易地格式化每个网格,同时仍然只有一个主视图,以适应其模型。



文章来源: Telerik grid custom column building/formatting