Premmerce Documentation > Table or Grid > Custom Column Template

About Premmerce

Introduction

Full Features

Installation

Prerequisite

Setup & Installation

Table or Grid

Basic Usage

Disable Column Sorting

Disable Column Export

Change Search Placeholder

Custom Column Template

Add Buttons to Action Column

Hyperlink Column Text

Specific Roles to View Column

Add or remove column

Filter column

CSS and JS

Edit Color

File validation

General

Password Validation

Bulk Import

Other

It’s easy. Let’s go! The steps:

1. Go to Helpers folder > TableConfig.cs

2. Go to the specific TableConfig class that you want to modify.

3. Add a ColumnHtmlTemplate property to the custom column definition. For example:

   public static List<ColumnProperty> TableColumns = new List<ColumnProperty>() {
   		new ColumnProperty { HeaderKey =nameof(TicketViewModel.Code),ColumnHtmlTemplate = "_MyCustomTemplate"} 
   };
   

4. Add a partial view named _MyCustomTemplate.cshtml in one of the following locations:

   1. /Views/Shared
   2. /Views/TheController

5. The examples below demonstrates how it works.

TableConfig.cs > class ManageOrderTableConfig

public static class ManageOrderTableConfig
{
    public static List<ColumnProperty> TableColumns = new List<ColumnProperty>() {
         new ColumnProperty { HeaderKey =nameof(OrderViewModel.Id), ColumnHtmlTemplate = "_Checkbox",ColumnMinWidth="50",  IsCheckbox = true,Sortable=false }
        };
}

/Views/Order/_Checkbox.cshtml

@model ColumnHtmlTemplateViewModel
@{
    object id = Model.ColumnsInCurrentRow.Where(a => a.HeaderKey == nameof(OrderViewModel.Id)).Select(a => a.Value).FirstOrDefault() ?? "";
    object statusCode = Model.ColumnsInCurrentRow.Where(a => a.HeaderKey == nameof(OrderViewModel.StatusCode)).Select(a => a.Value).FirstOrDefault() ?? "";
}

<!-- Display checkbox only when order is not "Refunded" -->
<!-- Status cannot be changed once an order is refunded -->
@if (Convert.ToString(statusCode) != ProjectEnum.OrderStatus.Refunded.ToString())
{
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="@id">
    </div>
}