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
US
4,210.07
2,109.23
Germany
1,407.50
927.07
UK
2,511.05
1,106.62
Japan
1,104.79
3,089.69
Italy
1,873.45
3,944.57
Greece
4,965.87
1,426.59
Country
Template
Sales
Expenses
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // This file locates: "Scripts/Lesson/C1FlexGrid/Templates.js". c1.documentReady(function () { // template for "Template" cells var theTemplate = '<button class="btn btn-default" name="{country}">' + '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; } }); |
1 2 3 4 5 6 7 8 | // This file locates: "Content/css/Lesson/C1FlexGrid/Templates.css". .wj-flexgrid { max-height: 350px; margin-top:10px; } .wj-cell img { width: 30px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexGridController : Controller { // GET: Templates public ActionResult Templates() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < 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 ) ) |