【问题标题】:Telerik grid custom formatting based on multiple date ranges基于多个日期范围的 Telerik 网格自定义格式
【发布时间】:2011-03-11 09:47:25
【问题描述】:

我能想到的至少 3 种方法可以做到这一点:-

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

主要问题是我需要能够根据每个列以不同颜色显示网格上的每个日期,我的意思是我在第一个列中记录一个日期,其中每年更新一次,所以如果 >6months 然后它是颜色 1,>1month 颜色 2,

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

第 2 - 每个不同的更新长度都会有自己的网格,因此第 1 为 1y,第 2 为第 2 长度,第 3 为第 3 长度。

第 3 个(可能)- 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' 为空或不是对象”和“Microsoft JScript 运行时错误:'cell.style' 为空或不是对象”,然后在网格中显示包含所有日期的页面,以便这些项目不为空,但是否还有其他一些我应该用来执行此功能的代码/格式?

并且还查看了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 '>' cannot be applied to '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 网格产生任何影响,所以如果还有其他东西可能隐藏在其他我可能会丢失的地方,那么请解释这可能是什么,因为我唯一没有包含的是与创建和编辑页面有关的代码,但它们所涉及的只是制作每个简单的记录,然后允许用户更改记录的日期。

【问题讨论】:

  • 想知道标题是否不够准确,或者只是这个问题太复杂而无法快速解决

标签: c# asp.net-mvc asp.net-mvc-3 telerik telerik-grid


【解决方案1】:

编辑 3:

当你这样做时:

当你做 _db.(...).ToList().ForEach(x => { ret.Add(new ...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 或其他方式为我提供您的解决方案,如果您愿意,我可以看看它,但现在我不知道如何才能为您提供更多帮助...

结束编辑 3

你能放一些代码吗?

我会选择解决方案 1。

您可以向使用 ClientTemplate 添加一个 css 类,如果它是 > [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 对象上添加属性。

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

【讨论】:

  • 我还没有任何编码,因为我不知道从哪里开始,这取决于通过我在这里的帮助可以做什么,关于你的截止日期,我也会需要能够设置记录在 6 个字段中的每个字段中的任何日期,然后为相关的 cols 记录 3 个额外的日期,然后有人让到期日期在 Telerik 网格中工作,并查看过期日期中的每个日期作为以哪种颜色显示?如果有类似的事情,那么我仍然需要知道去做,反正周末休息,所以星期一。
  • 所以没有更多的帮助或者您只是忘记了这个话题?
  • 我不太确定你想做什么......你有什么问题,也许你可以尝试做,然后带一些代码,这样我就可以帮助你,我仍然补充道更多代码,希望对您有所帮助,请告诉我。
  • 我在我的问题中解释了我的问题的 3 种可能的解决方案,总体目标是在记录日期记录提交,例如一个新产品问世,它需要 5 种不同的安全检查有不同的续期长度,现在对于每张支票,用户将提交一个日期,根据所提到的支票,有些会具有不同的续期长度,但都将遵循相同的指导方针,剩下的 6 个月以上将显示该支票为 colour1,更多比 1month = colour2 等颜色 4 这将是解决方案 1,将其全部放在同一个网格上。
  • 然后正如我的问题中所解释的,有 2 个其他解决方案取决于 sol 1 是否可行,我希望这可以解决问题,关于代码以及 1st 这是我的第二个项目待办事项列表等进入第 2 点,第 2 点除了想出 3 个最有可能的解决方案之外,我不知道如何实施此问题愿意指导我完成我需要采取的步骤,因此非常感谢任何指导/帮助。
【解决方案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();
 ...

如果有帮助请告诉我!

【讨论】:

  • 对 CellAction 位进行编码没有问题,唯一的问题是 telerik.com/community/forums/aspnet-mvc/grid/…,它于 2009 年 12 月发布并表明它仅适用于服务器端是否仍然如此我不知道但你可以从我的代码中看到它是 ajax,bk 到它的其余部分,DTO 中的所有内容或多或少都有效,因为 _list 操作有问题,我必须将 if (!C1SD.HasValue) 替换为 (C1SD == null) 但是是的,我认为这是由于 _list 我不知道在 ToList(); 之后我应该如何处理所有事情;
  • 错误 1 ​​无法将类型 'System.Collections.Generic.List' 隐式转换为 'System.Collections.Generic.List 是我得到的错误,如果我完全按照你的说法,用 ofc 输入实际名称
  • @VinnyG 还有其他想法或解决方案吗?也可以帮助我使用 Visual Studio 2010 来编程所有这些
  • 我不知道我还能解释什么,但如果你把你的代码发给我,我可以看看......
  • 在控制器中解决了所有问题并欺骗网格显示它需要的内容,我将尝试发布 l8r 今天我是如何让它工作的。
【解决方案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() : "",

诀窍是在控制器中进行所有计算,让模型和视图保持非常基本的状态。

Model- 将 em 全部保留为字符串,基本上为每个日期 col 做了 public string blah { get; set;},然后对于每个 col,你想做一些复杂的事情,比如我的日期计算,你会做一个额外的 col,这将是颜色/任何东西你想要的功能,你甚至可以设置一个管理功能,所以如果他们没有 win auth 或没有正确的角色等,那么它会破坏数据或取消链接 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 =&gt; 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 建议,请随时提问/评论。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-12-14
    • 2012-06-17
    • 2011-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多