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
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
<%@ 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. |