Telerik 网格基于多个日期范围的自定义格式

Question

我可以想到至少有 3 种方法可以做到这一点：-

第一种（理想）- 在大约有 8 列的单个 telerik 网格中，第 1 列将列出所有表条目，接下来的 6 列用于显示为每个条目提交的不同日期但不一定每个条目都有一个值，最终的 col 将链接到单独页面上的每个条目，以允许通过日期选择器提交新日期或进行编辑。

主要问题是我需要能够根据每个列以不同的颜色显示网格上的每个日期，我的意思是我在第一列中记录一个日期，该日期每年更新一次，所以如果> 6个月，那么它的颜色1、>1 个月颜色 2、<1 个月颜色 3，最后如果过去 1 年标记则颜色 4。

其他列也有 2 种不同的可能续订长度。

第二个 - 每个不同的更新长度都会有自己的网格，因此第一个代表 1y，第二个代表第二个长度，第三个代表第三个长度。

第三（可能）- 4 个网格来替换颜色，它只会显示每个类别，因此 1 个网格将显示超过 6 个月的所有条目，网格 2 将显示大于 1 个月，网格 3 将显示小于 1 个月，网格 4 将显示过去的时间长度。

我不知道如何最好地以符合我需要的方式对日期进行排序，但我认为选项 1 是可能的，或者选项 3 是最简单的。

编辑 -

using System
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace (...).Models.DTO
{
    public class ...DTO
    {
        public int Id { get; set; }
        public string Name { get; set; }
        //public string C1D
        //{
        //    get
        //    {
        //        if (C1D < DateTime.Today.AddDays(-183)) return "Green";
        //    }
        //}
        public string C1D
        {
            get
            {
                if ((C1D = DateTime.ParseExact(C1D, "yyyy/mm/dd", null)) < DateTime.Today.AddDays(-183)) return "Green";
            }
            set;
        }
        public string C2D { get; set; }

这里它显示了我如何尝试以两种不同的方式设置 C1D 以及对于 C2D 我通常如何设置进入 Telerik 网格的列。

[GridAction]
    public ActionResult _List(int? Id)
    {
        List<...DTO> ret = new List<...DTO>();
        _db.(...).ToList().ForEach(x =>
        {
            ret.Add(new ...DTO
            {
                Id = x.Id,
                Name = x.(...)Name,
                C1D = (x.C1SD.HasValue) ? x.C1SD.Value.ToShortDateString() : "",
                C2D = (x.C2SD.HasValue) ? x.C2SD.Value.ToShortDateString() : "",

这就是我在控制器中进行设置以在 Telerik 网格中显示数据的方式。

下面是我如何设置视图

<% Html.Telerik().Grid<(...).Models.DTO.(...)DTO>()
   .Name("...List")
   .DataKeys(dk => dk.Add(x => x.Id))
   .Columns(c =>
       {
           c.Bound(x => x.Name);
           c.Bound(x => x.C1D)
               .Title("...");
           c.Bound(x => x.C2D)
               .Title("...");
           c.Bound(x => x.C3D)
               .Title("...");
           c.Bound(x => x.C4D)
               .Title("...");
           c.Bound(x => x.C5D)
               .Title("...");
           c.Bound(x => x.C6D)
               .Title("...");
           c.Bound(x => x.C7D)
               .Title("...");
       })
    .Sortable()
    .Filterable()
    .DataBinding(db => db.Ajax().Select("_List", "..."))
    .Render();
%>

编辑 2 - 我也尝试过

.ClientEvents(e => e.OnDataBound("onDataBound"))

function onDataBound(e) {
    if (e.dataItem.C1D > DateTime.Today.AddDays(183)) {
        e.cell.style.backgroundColor = "green";
    }
    if (e.dataItem.C1D > DateTime.Today.AddDays(30)) {
        e.cell.style.backgroundColor = "orange";
    }
    if (e.dataItem.C1D > DateTime.Today) {
        e.cell.style.backgroundColor = "red";
    }
    if (e.dataItem.C1D <= DateTime.Today) {
        e.cell.style.backgroundColor = "purple";
    }

}

，到达此页面后，它会中断代码并显示“Microsoft JScript 运行时错误：'dataItem.C1D' 为 null 或不是对象”和“Microsoft JScript 运行时错误：'cell.style' 为 null或者不是对象”，然后显示包含网格中所有日期的页面，以便这些项目不为空，但是是否还有其他我应该用来执行此功能的代码/格式？

还查看了 http://demos.telerik.com/aspnet-mvc/grid/customformatting 关于 .cellaction 如下所示

.CellAction(cell =>
{
    if (cell.Column.Title == "Title Name")
    {
        if (cell.DataItem.C1D > DateTime.Today.AddDays(183))
        {
            //Set the background of this cell only
            cell.HtmlAttributes["style"] = "background:red;";
        }
    }
})

，我必须将 .Name 更改为 .Title，因为它无法识别 .Name，但我收到错误消息“Error 1 Operator '>'”无法应用于“string”和“System.DateTime”类型的操作数”，因此看来我无法在单元格操作中执行这项复杂的任务。

我还在 telerik 论坛上发布了这个附加到另一个问题，但到目前为止还没有回复 http://www.telerik.com/community/forums/aspnet-mvc/grid/telerik-grid-row-custom-formatting-on-either-bit-int-string-field.aspx

编辑 3 -

附加控制器代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using (Database Name).Models;
using (Database Name).Models.DTO;
using Telerik.Web.Mvc;
using Telerik.Web.Mvc.UI;
namespace (Database Name).Controllers
{
    public class (Controller Name)Controller : Controller
{
(Database Name)Entities _db = new (Database Name)Entities();
public ActionResult List()
    {
        return View();
    }

现在就是这样，我已经没有什么可以提供的了，因为没有其他任何东西可能对 Telerik 网格产生任何影响，所以如果还有其他东西可能隐藏在其他地方，我可以可能会丢失，那么请解释一下可能是什么，因为我唯一没有包含的是与“创建”和“编辑”页面相关的代码，但它们涉及的只是制作每个简单的记录，然后允许用户更改记录的日期。

Answer 1

编辑3：

当你这样做时：

当你这样做时 _db.(...).ToList().ForEach(x =>
{
ret.Add(新...DTO
{
Id = x.Id,
名称 = x.(...)名称,
C1D = (x.C1SD.HasValue) ? x.C1SD.Value.ToShortDateString() : "",
C2D = (x.C2SD.HasValue) ? x.C2SD.Value.ToShortDateString() : "",
}
x

将是 ObjectFromDB，您不想分配 DTO 的每个属性，您想传递 baseObject（巫师是 x），然后从 x 返回您想要的值。

如果您可以使用 putfile 或其他东西向我提供您的解决方案，如果您愿意，我可以看一下，但现在我不知道如何能够为您提供更多帮助...

End Edit 3

Can你放了一些代码吗？

我将采用解决方案 1。

您可以将 css 类添加到使用 ClientTemplate 中，如果它 > > [timespan]，我认为您应该添加一个绑定在属性上的列，该属性可以根据时间跨度返回 css 类的名称或空字符串。假设您有一个 DateCol1 属性，它是一个 DateTime 您可以添加一个 DateCol1Css 属性，如下所示：

public string DateCol1Css
    {
        get
        {
            if(DateCol1 < DateTime.Now.AddMonths(-1)) return "Color1"; //witch is less than a month
            if(DateCol1 < DateTime.Now.AddMonths(-3)) return "Color2"; //witch is less than 3 months
            if(DateCol1 < DateTime.Now.AddMonths(-6)) return "Color3"; //witch is less than 6 months
            return  "";
        }
    }

    public string DateCol2Css
    {
        get
        {
            if (DateCol2 < DateTime.Now.AddDays(-10)) return "Color1"; //witch is less than 10 days
            if (DateCol2 < DateTime.Now.AddDays(-30)) return "Color2"; //witch is less than 30 days
            return "";
        }
    }

    public string DateCol3Css
    {
        get
        {
            if (DateCol3 < DateTime.Now.AddMonths(-1)) return "Color1"; //witch is less than a month
            if (DateCol3 < DateTime.Now.AddMonths(-3)) return "Color2"; //witch is less than 3 months
            if (DateCol3 < DateTime.Now.AddMonths(-6)) return "Color3"; //witch is less than 6 months
            return "";
        }
    }

网格应该如下所示：

    <%= Html.Telerik().Grid<SerializableAdmin>()
                        .Name("Grid")
                        .Columns(colums =>
                         {
                             colums.Bound(c => c.FirstName);
                             colums.Bound(c => c.Id);
                             colums.Bound(c => c.Id).ClientTemplate("<span class=\"<#=DateCol1Css#>\"<#=DateCol1#></span>");
colums.Bound(c => c.Id).ClientTemplate("<span class=\"<#=DateCol2Css#>\"<#=DateCol2#></span>");
colums.Bound(c => c.Id).ClientTemplate("<span class=\"<#=DateCol3Css#>\"<#=DateCol3#></span>");

                         })
                %>

编辑：

看一下这段代码，您传递了对象从数据库到新对象，并仅在 db 对象上使用 get 添加属性。

public class ObjectDTO
{
    public ObjectFromDB BaseObject { get; set; }

    public int Id 
    {
        get { return BaseObject.Id; }
    }

    public string Name 
    {
        get { return BaseObject.Name; }
    }


    public string C1D
    {
        get
        {
            if (BaseObject.C1SC.HasValue && BaseObject.C1SC < DateTime.Now.AddDays(-183)) return "Green";
            return string.Empty;
        }
    }

    public string C2D
    {
        get
        {
            if (BaseObject.C2SC.HasValue && BaseObject.C2SC < DateTime.Now.AddDays(-183)) return "Green";
            return string.Empty;
        }
    }
}
[GridAction]
public ActionResult _List(int? Id)
{
    List<ObjectDTO> ret = new List<ObjectDTO>();
    _db.GetObjectFromDB().ToList().ForEach(x =>
    {
        ret.Add(new ObjectDTO { ObjectFromDB = x } );
    });
}

Answer 2

对于此代码块，您是否尝试将字符串转换为日期时间？

    .CellAction(cell =>
{
    if (cell.Column.Title == "Title Name")
    {
        if (!string.IsNullOrEmpty(cell.DataItem.C1D) && DateTime.ParseExact(cell.DataItem.C1D, "yyyy/mm/dd", null) > DateTime.Today.AddDays(183))
        {
            //Set the background of this cell only
            cell.HtmlAttributes["style"] = "background:red;";
        }
    }
})

你的 CssColor 的 ...Dto 属性应该是这样的：

public class ...DTO
{
        public int Id { get; set; }
        public string Name { get; set; }
        public string C1D
        {
            get
            {
                if (!C1SD.HasValue) return string.Empty;
                return (DateTime.ParseExact(C1SD, "yyyy/mm/dd", null) < DateTime.Today.AddDays(-183)) ? "Green" : "";
            }
        }
}

所以你的 GridAction 应该是这样的：

[GridAction]
    public ActionResult _List(int? Id)
    {
        List<...DTO> ret = _db.(...).ToList();
 ...

如果有帮助，请告诉我！

Answer 3

这就是我从一开始就尝试做的事情，

[GridAction]
public ActionResult _List(int? Id)
{
    List<...DTO> ret = new List<...DTO>();
    _db.(...).ToList().ForEach(x =>
    {
        ret.Add(new ...DTO
        {
            Id = x.Id,
            Name = x.(...)Name,
            C1D = (x.C1SD.HasValue) ? x.C1SD.Value.ToShortDateString() : "",
            C2D = (x.C2SD.HasValue) ? x.C2SD.Value.ToShortDateString() : "",

技巧是在控制器中进行所有计算，并使模型和视图保持非常基本的状态。

模型 - 将它们全部保留为字符串，并且基本上执行了 public string blah { get; set;} 对于每个日期列，然后对于每个列，你想要做一些复杂的事情，比如我的日期计算，你会做一个额外的列，这将用于颜色/你想要的任何功能，你甚至可以设置一个管理功能，因此如果他们没有 win 身份验证或角色不正确等，那么它会破坏数据或取消链接 url 链接。

控制器 - 正如您在上面看到的，这就是我如何整理显示的日期，现在是整理颜色或 w/e 的令人惊讶的简单方法，（示例 blahDTO bdt = new blahDTO(); )

if (x.TestVal1 != null)
                {
                    if ((x.TestVal1) > (DateTime.Today.AddMonths(6)))
                    {
                        bdt.Colourflag1 = "green";
                    }

现在它不必是绿色的，它可以是 true false tom dick 或 jane w/e，但它只需是基于某些独特条件分配的值。

查看-当我意识到这可能这么容易时，我捂住了自己的脸，无论如何，所以 c.Bound(x => x.Colourflag1).Hidden(true); 下一步

.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
<script type="text/javascript">
   function onRowDataBound(e) {

           if (e.dataItem.TestVal1 == "green") {

               e.row.cells[1].style.backgroundColor = "green";
           }

，嘿，你只需转身第一行/列单元格为绿色，可以将其扭曲并用于 w/e e.row.cell[?]。可以用于，你有一个单元格可以完成所有魔法，耶哈滚成了 1。

现在我知道我的 jscript 代码是浪费的，因为我确信此时你可以使绿色成为一个对象，然后影响下一个对象，因此如果是黄色，那么它会使背景颜色代码适合黄色。

如果有人有任何问题或 jscript 建议，请随时提问/评论。