Create Advanced Custom Header

Adding HTML to the grid

Adding HTML to the grid is template based. You will define a template page and the grid will replace certain predefined values with variables to localize the HTML to a certain Cartella Object.

The following is a code example of a functional template header, that is a button that takes the user to the folio

CopyC#

 public class CustomTemplateHeader : SettingsHeadersWrapper
{

    public override string PropertyName
    {
        get { return "FolioLinkTemplate"; }
    }

    public override string FriendlyName
    {
        get
        {
            return "Folio Link Template";
        }
    }

    public override SettingsTypes SettingType
    {
        get { return SettingsTypes.Folio; }
    }

    //DO not want to sort the HTML
    public override bool CanSort
    {
        get
        {
            return false;
        }
    }

    //Can only be viewed when the folio is not deleted
    public override bool CanBeUsed(SettingsViewType viewType, IFolio folio)
    {
        return viewType == SettingsViewType.normal;
    }

    //Don't client side sort it
    public override bool CanDoClientSideFilter
    {
        get
        {
            return false;
        }
    }

    //The width of the header
    public override string WidthString
    {
        get
        {
            //Set to 150px
            return GetWidthString("150", WidthTypes.Absolute);
        }
    }

    //Must be set to true to look for the template
    public override bool NeedExternalTemplate
    {
        get
        {
            return true;    
        }
    }

    //Path to the template from the settings folder
    public override string ExternalTemplateName
    {
        get
        {
            return "templates/foliobutton";
        }
    }

    //Replaces the ReplaceValue string at runtime
    public override string GetDisplayValue(ICartellaObject x, IFolio folio)
    {
        return x.Name;
    }
}

The following is the corresponding header referenced above

CopyC#

<%@ Import Namespace="Cartella.Models" %>
<%@ Import Namespace="Cartella.Models.EditForm" %>
<%@ Import Namespace="Cartella.Classes" %>
<%@ Import Namespace="Cartella.Interfaces" %>
<%@ Import Namespace="Cartella.Support" %>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Cartella.Models.GridTemplateWrapper>" %>

<%
    //A place holder for the item's ID. Will be replaced at runtime
    string replaceId = Cartella.GlobalConstants.ReplaceID;
    //A place holder for the value returned from GetDisplayValue
    string valueId = Cartella.GlobalConstants.ReplaceValue;

    string folioUrl = Url.Action("Index", "Folio", new { folioID = replaceId });

    ButtonWrapper b = new ButtonWrapper()
    {
        Url = folioUrl,
        Label = "Goto Folio",
        DisplayDiv = true,
        Title = valueId
    };

    Html.RenderPartial("Button", b);
%>

A quick explaination of the functionality

ExternalTemplateName

This is the path from the Views\Settings folder to the defined template.

WidthString

This returns the width string used to define the width of the header and columns. It is recommened that you used the GetWidthString function. There are 3 different width types avaliable.

WidthTypes.Absolute: This is the absolute size of the column in pixels.
WidthTypes.Percent: This is a percentage of the width of the total grid you want.
WidthTypes.Relative: This is the size of the header in relation to the other columns. The default value of the headers is 2. Hence 1 would be half the size and 3 would be 50% larger.

Creating Template

The template defines the HTML that will be displayed to the User. You can specify values to customize the HTML to the given object by using the strings Cartella.GlobalConstants.ReplaceID and Cartella.GlobalConstants.ReplaceValue . The ReplaceID will be replaced with the ID of the object and ReplaceValue will be replaced with what ever is in returned by GetDisplayValue.

Caution
The HTML will be render at the load of the page and the values will not be replaced until they are needed. THis is accomplished by a simple string replace. This means that you can not use ReplaceID or replaceValue like the values themselves, because they will be the placeholder text until the replace occurs. Also this means that javascript will not have the correct values at load. To use dojo it is recommeneded that you use the igxClickType type instead of dojoType because this will be constructed on click instead of at page load.

Caution

The HTML will be render at the load of the page and the values will not be replaced until they are needed. THis is accomplished by a simple string replace. This means that you can not use ReplaceID or replaceValue like the values themselves, because they will be the placeholder text until the replace occurs. Also this means that javascript will not have the correct values at load. To use dojo it is recommeneded that you use the igxClickType type instead of dojoType because this will be constructed on click instead of at page load.