Value Template

You can use the value template on the column to more-easily specify formatting for the cell contents, espically when a lot of HTML is involved.

Here is the value template for the example column below:

ValueTemplate = "You can access any of the item's properties: <strong>{Model.FirstName}</strong> <br />or the current column value: <span class='label {Value}'>{Model.Active}</span>";

Format String

The ValueTemplate format string is like a String.Format string, but you can access data from the current row.

  • Model.PropertyName - Use this to access propeties on the current row's generic object
  • Row.ColumnName - Use this to get the evaluated value of the specified column name
  • Value - Use this to get the evaluated value of the current cell
Id First Name Last Name Example
370PatrickAdamsEditDeleteYou can access any of the item's properties: Patrick
or the current column value: False
493KarenAdamsEditDeleteYou can access any of the item's properties: Karen
or the current column value: True
570NancyAdamsEditDeleteYou can access any of the item's properties: Nancy
or the current column value: False
599EricAdamsEditDeleteYou can access any of the item's properties: Eric
or the current column value: False
635ChristineAdamsEditDeleteYou can access any of the item's properties: Christine
or the current column value: False
663BonnieAdamsEditDeleteYou can access any of the item's properties: Bonnie
or the current column value: False
778RonaldAdamsEditDeleteYou can access any of the item's properties: Ronald
or the current column value: False
820SeanAdamsEditDeleteYou can access any of the item's properties: Sean
or the current column value: False
897JudithAdamsEditDeleteYou can access any of the item's properties: Judith
or the current column value: True
857MichaelAlexanderEditDeleteYou can access any of the item's properties: Michael
or the current column value: True
652HowardAlexanderEditDeleteYou can access any of the item's properties: Howard
or the current column value: False
339JerryAlexanderEditDeleteYou can access any of the item's properties: Jerry
or the current column value: False
55SusanAlexanderEditDeleteYou can access any of the item's properties: Susan
or the current column value: True
190AmyAlexanderEditDeleteYou can access any of the item's properties: Amy
or the current column value: True
250NicholasAllenEditDeleteYou can access any of the item's properties: Nicholas
or the current column value: True
472DeniseAllenEditDeleteYou can access any of the item's properties: Denise
or the current column value: True
171JessicaAlvarezEditDeleteYou can access any of the item's properties: Jessica
or the current column value: False
127JanetAlvarezEditDeleteYou can access any of the item's properties: Janet
or the current column value: False
661MildredAlvarezEditDeleteYou can access any of the item's properties: Mildred
or the current column value: False
855MarieAlvarezEditDeleteYou can access any of the item's properties: Marie
or the current column value: False
Showing 1 to 20 of 1000 entries
Inside MVCGridConfig.cs
MVCGridDefinitionTable.Add("ValueTemplate", new MVCGridBuilder<Person>(colDefauls)
    .WithAuthorizationType(AuthorizationType.AllowAnonymous)
    .AddColumns(cols =>
    {
        cols.Add("Id").WithSorting(false)
            .WithValueExpression((p, c) => c.UrlHelper.Action("detail", "demo", new { id = p.Id }))
            .WithValueTemplate("<a href='{Value}'>{Model.Id}</a>", false)
            .WithPlainTextValueExpression(p => p.Id.ToString());
        cols.Add("FirstName").WithHeaderText("First Name")
            .WithValueExpression(p => p.FirstName);
        cols.Add("LastName").WithHeaderText("Last Name")
            .WithValueExpression(p => p.LastName);
        cols.Add("Edit").WithHtmlEncoding(false)
            .WithSorting(false)
            .WithHeaderText(" ")
            .WithValueExpression((p, c) => c.UrlHelper.Action("detail", "demo", new { id = p.Id }))
            .WithValueTemplate("<a href='{Value}' class='btn btn-primary' role='button'>Edit</a>");
        cols.Add("Delete").WithHtmlEncoding(false)
            .WithSorting(false)
            .WithHeaderText(" ")
            .WithValueExpression((p, c) => c.UrlHelper.Action("detail", "demo", new { id = p.Id }))
            .WithValueTemplate("<a href='{Value}' class='btn btn-danger' role='button'>Delete</a>");
        cols.Add("Example").WithHtmlEncoding(false)
            .WithSorting(false)
            .WithHeaderText("Example")
            .WithValueExpression((p, c) => p.Active ? "label-success" : "label-danger")
            .WithValueTemplate("You can access any of the item's properties: <strong>{Model.FirstName}</strong> <br />or the current column value: <span class='label {Value}'>{Model.Active}</span>");
    })
    .WithSorting(true, "LastName")
    .WithPaging(true, 20)
    .WithRetrieveDataMethod((context) =>
    {
        var options = context.QueryOptions;
        int totalRecords;
        var repo = DependencyResolver.Current.GetService<IPersonRepository>();
        string sortColumn = options.GetSortColumnData<string>();
        var items = repo.GetData(out totalRecords,
            options.GetLimitOffset(), options.GetLimitRowcount(),
            sortColumn, options.SortDirection == SortDirection.Dsc);
        return new QueryResult<Person>()
        {
            Items = items,
            TotalRecords = totalRecords
        };
    })
);