Добавление колонки с изображением в стандартный элемент «Dynamic Grid»

В системе имеется возможность добавить иконки для объекта, реализовать возможность выбора нужной иконки в зависимости не только от типа объекта, но и от пользовательских требований.

В примере показана реализация точки расширения для объекта IMyObject, созданного в модуле, который содержит базовый набор свойств и одно свойство типа «Выпадающий список», элементами которого являются строковые значения: Звонок, Встреча, Письмо, ICQ.  Для данного объекта, объединяющего 4 различных типа взаимоотношений, реализован механизм отображения различных иконок для каждого типа.

Пример отображения данных

Рис. 1. Пример отображения иконок в стандартном элементе«Dynamic Grid»

Методы расширения (интерфейса)

Точка расширения (интерфейс) IObjectIcon имеет два основных метода:

  1. public bool CheckType(Type type) - определяет тип объекта, для которого предназначено данное расширение, в качестве параметра передается объект.
  2. public string Icon(UrlHelper url, ObjectIconFormat format, object obj) - возвращает строку, содержащую адрес иконки

Пример класса точки расширения

using System;
using System.Web.Mvc;
using EleWise.ELMA.ComponentModel;
using EleWise.ELMA.Model.Services;
using EleWise.ELMA.Web.Mvc.ExtensionPoints;
using ObjectIconModule.Models;

namespace ObjectIconModule.Web.ExtensionPoint
{
    [Component]
    public class ObjectIcon : IObjectIcon
    {
        public bool CheckType(Type type)
        {
            return InterfaceActivator.UID(type) == InterfaceActivator.UID<IMyObject>();
        }

        public string Icon(UrlHelper url, ObjectIconFormat format, object obj)
        {
            var icon = "#x16/Task.png"; // # указывает на глобальную папку изображений "Каталог_установки_системы\Web\Content\Images"

            var myObject = obj as IMyObject;
            if (myObject != null)
            {
                if (myObject.Type.Value != null)
                    switch (myObject.Type.Value)
                    {
                        case "Письмо": icon = "#x16/type_mail.png"; 
                            break;
                        case "Встреча": icon = "#x16/type_meeting.png"; 
                            break;
                        case "Звонок": icon = "#x16/type_call.png"; 
                            break;
                        case "ICQ":
                            icon = string.Format("{0}x16/icq.png", RouteProvider.ImageFolder); 
                            break;
                        default:
                            break;
                    }
            }
            return icon;

        }
    }
}

Как можно заметить в примере класса точки расширения используется выбор иконок из системых иконок, а так же из иконок, добавленных непосредственно в модуль:

1. 

case "Звонок": icon = "#x16/type_call.png"; // type_call.png – иконка ELMA, расположенная по пути "Каталог_установки_системы\Web\Content\Images\x16"

2. 

case "ICQ": icon = string.Format("{0}x16/icq.png", RouteProvider.ImageFolder); // icq.png – ваша иконка, которая расположена по пути "Каталог_установки_системы\Web\Modules\Ваш_модуль\Content\Images\x16"

Чтобы использовать собственные иконки необходимо:

  1. В вашем решении создать необходимые каталоги, чтобы получить путь "/Content/Images/x16"
  2. Добавить в RouteProvider.cs следующий код:

public const string ImageFolder = "~/Modules/" + AreaName + "/Content/Images/";

Расширение используется в качестве первого атрибута к Html-хелперу «Html.Image()» . Пример использования:

@(DynamicGrid("MyObject", Model)
        .Columns(c =>
        {
            c.For(" ").Template(m => @Html.Image(Url.ObjectIcon(ObjectIconFormat.x16, m), ""));
            c.For(m => m.Name).Link(m => Url.Entity(m));
            c.For(m => m.Type);
            c.For(m => m.CreationAuthor);
        )

Ссылки на элементы API

IObjectIcon