Пользовательское форматирование сетки Telerik на основе нескольких диапазонов дат - PullRequest
0 голосов
/ 11 марта 2011

По крайней мере, 3 способа, которыми я могу представить, что это можно сделать: -

1-й (идеальный вариант) - в одной сетке Telerik, которая имеет около 8 столбцов, 1-й столбец будет перечислять все записи таблицы со следующими 6 для отображения разных дат, представленных для каждой записи, но не обязательно обязательно иметь значение для каждой записи, окончательный col будет ссылаться на каждую запись на отдельной странице, чтобы новые даты могли быть отправлены через средство выбора даты или отредактированы.

Основная проблема в том, что мне нужно иметь возможность отображать каждую из дат на сетке разными цветами в зависимости от каждого столбца, под этим я подразумеваю, что я записываю дату в 1-й столбец, который имеет ежегодное обновление, поэтому, если> 6 месяцев, то это цвет 1,> 1 месяц, цвет 2, <1 месяц, цвет 3 и, наконец, если отметка за прошлый год, то цвет 4. </p>

Есть также 2 различных возможных продолжительности обновления для других col.

2-й - Каждая отдельная длина обновления получит свою собственную сетку, поэтому 1-й для 1-го, 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 »является нулевым или нет object ", а затем отобразите страницу со всеми датами в сетке, чтобы эти элементы не были нулевыми, но есть ли какой-то другой код / ​​формат, который я должен использовать для выполнения этой функции?

А также посмотрел на 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, но я получаю сообщение об ошибке «Ошибка 1 Оператор»> не может быть применена к операндам типа «строка» и «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();
    }

Вот теперь ничего не осталось, что я могу предоставить, поскольку нет ничего другого, что могло бы оказать какое-либо влияние на сетку телерика, поэтому, если есть еще что-то, что может быть спрятано в другом месте, которое я могу пропустить, тогда, пожалуйста, пожалуйста объясните, что это может быть, поскольку единственное, что я не включил, - это код, который нужно сделать со страницами «Создание» и «Редактировать», но все, что от них требуется, - это сделать каждую простую запись, а затем позволить пользователю изменять записанные даты.

Ответы [ 3 ]

1 голос
/ 11 марта 2011

Редактировать 3:

Когда вы делаете:

Когда вы делаете _db. (...). ToList (). ForEach (x => { ret.Add (new ... DTO { Id = x.Id, Имя = х. (...) Имя, 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.

Вы можете добавить класс 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>");

                         })
                %>

Редактировать:

Взгляните на этот код, вы передаете объект из базы данных в новый объект и добавляете свойство get только для объекта 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 } );
    });
}
0 голосов
/ 23 мая 2011

Это было то, что я пытался сделать с самого начала

[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 auth, или они не в нужной роли и т. д., это приведет к разбросу данных или отмене ссылки на URL-ссылку.

Контроллер - как вы можете видеть выше, вот как я отсортировал отображаемые даты и теперь удивительно простой способ отсортировать цвет или ж / д (пример вещь blahDTO bdt = new blahDTO();)

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

Теперь он не обязательно должен быть зеленым, это может быть истинный фальшивый Том или Джейн, но это должно быть просто значение, назначенное на основе определенных уникальных условий.

Вид - когда я понял, что это может быть так легко, я все равно сделал себе маску, да, так что 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";
           }

и эй, давай, просто сделай зеленую ячейку 1-го ряда / столбца зеленой, и это можно повернуть и использовать в w / e e.row.cell [?]. можно использовать, и у вас есть одна клетка, которая делает всю магию, которую вы ввели в 1.

Теперь я знаю, что мой jscript-код расточителен, так как я уверен, что в этот момент вы можете сделать зеленый цвет объектом, который затем повлияет на следующий объект, так что если желтый, то цвет фона кода будет соответствовать желтому.

Если у кого-либо есть вопросы или советы по jscript, не стесняйтесь спрашивать / комментировать.

0 голосов
/ 08 апреля 2011

Для этого блока кода вы пытались привести строку в datetime?

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

И ваше свойство ... Dto для CssColor должно быть таким:

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();
 ...

Дайте мне знать, если это поможет!

...