Cell Templates

You can use format function to implement a basic template handling mechanism.

The grid below handles the formatItem event to generate the content for cells in the "Template" column using a template element defined in the markup:

Country

Template

Sales

Expenses

5,852.18

436.25

Germany

6,900.61

2,140.81

2,331.97

3,923.85

Japan

1,260.18

4,226.60

Italy

2,985.53

2,747.61

Greece

4,267.19

746.50

// This file locates: "Scripts/Lesson/C1FlexGrid/Templates.js".
c1.documentReady(function () {
    // template for "Template" cells
    var theTemplate = '<button class="btn btn-default" name="{country}">' +
      '<img src="http://flagpedia.net/data/flags/mini/{abb}.png"/> ' +
      'Click Me!' +
    '</button>';
 
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = getData();
 
    theGrid.formatItem.addHandler(function (s, e) {
        if (e.panel == s.cells && s.columns[e.col].binding == 'template') {
            var item = s.rows[e.row].dataItem,
                    html = wijmo.format(theTemplate, item);
            e.cell.innerHTML = html;
        }
    });
 
    // make rows taller to accommodate buttons
    theGrid.rows.defaultSize = 45;
 
    // handle button clicks
    theGrid.hostElement.addEventListener('click', function (e) {
        var target = wijmo.closest(e.target, 'button');
        if (target instanceof HTMLButtonElement && target.name) {
            alert('Thanks for clicking "' + target.name + '"');
        }
    });
 
    // create some random data
    function getData() {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            abb = 'us,de,gb,jp,it,gr'.split(','),
            data = [];
        for (var i = 0; i < countries.length; i++) {
            data.push({
                country: countries[i],
                abb: abb[i],
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }
});

// This file locates: "Content/css/Lesson/C1FlexGrid/Templates.css".
.wj-flexgrid {
  max-height: 350px; 
  margin-top:10px;
}
.wj-cell img {
  width: 30px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Templates
        public ActionResult Templates()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.Templates_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Templates_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Templates_Text2)
</p>
 
@(Html.C1().FlexGrid().Id("theGrid")
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("country").Header("Country");
        cs.Add().Binding("template").Header("Template").Width("130").IsReadOnly(true);
        cs.Add().Binding("sales").Header("Sales").Format("n2");
        cs.Add().Binding("expenses").Header("Expenses").Format("n2");
    })
    .ShowAlternatingRows(false)
)