// This file locates: "Scripts/Lesson/C1FlexGrid/Index.js".
c1.documentReady(function () {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
active: i % 5 != 0,
downloads: Math.round(Math.random() * 200000),
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
// default grid
var gridDefault = wijmo.Control.getControl('#gridDefault');
gridDefault.itemsSource = data;
// customize columns
var gridCols = wijmo.Control.getControl('#gridCols');
gridCols.initialize({
autoGenerateColumns: false,
itemsSource: data,
columns: [
{ header: 'Country', binding: 'country', width: '*' },
{ header: 'Downloads (k)', binding: 'downloads', format: 'n1,' },
{ header: 'Sales (k)', binding: 'sales', format: 'n1,' },
{ header: 'Expenses (k)', binding: 'expenses', format: 'c1,' },
]
});
// customize properties
var gridProps = wijmo.Control.getControl('#gridProps');
gridProps.itemsSource = data;
var selectionMode = wijmo.Control.getControl('#selectionMode');
selectionMode.selectedIndexChanged.addHandler(function () {
gridProps.selectionMode = selectionMode.text
});
var allowSorting = wijmo.Control.getControl('#allowSorting');
allowSorting.selectedIndexChanged.addHandler(function () {
gridProps.allowSorting = allowSorting.text == 'True';
});
var allowDragging = wijmo.Control.getControl('#allowDragging');
allowDragging.selectedIndexChanged.addHandler(function () {
gridProps.allowDragging = allowDragging.text;
});
var isReadOnly = wijmo.Control.getControl('#isReadOnly');
isReadOnly.selectedIndexChanged.addHandler(function () {
gridProps.isReadOnly = isReadOnly.text == 'True';
});
var headersVisibility = wijmo.Control.getControl('#headersVisibility');
headersVisibility.selectedIndexChanged.addHandler(function () {
gridProps.headersVisibility = headersVisibility.text;
});
});
// This file locates: "Content/css/Lesson/C1FlexGrid/Index.css".
.wj-flexgrid {
max-height: 250px;
margin-bottom: 12px;
}
.header {
display: inline-block;
width: 150px;
text-align: right;
font-weight: normal;
}
using System.Web.Mvc;
namespace LearnMvcClient.Controllers
{
public partial class C1FlexGridController : Controller
{
// GET: Index
public ActionResult Index()
{
return View();
}
}
}
<h1>
@Html.Raw(Resources.C1FlexGrid.Index_Title)
</h1>
<p>
@Html.Raw(Resources.C1FlexGrid.Index_Text1)
</p>
<p>
@Html.Raw(Resources.C1FlexGrid.Index_Text2)
</p>
@Html.C1().FlexGrid().Id("gridDefault")
<p>
@Html.Raw(Resources.C1FlexGrid.Index_Text3)
</p>
@Html.C1().FlexGrid().Id("gridCols")
<p>
@Html.Raw(Resources.C1FlexGrid.Index_Text4)
</p>
@Html.C1().FlexGrid().Id("gridProps")
<label>
<div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text5)</div>
@(Html.C1().ComboBox().Id("selectionMode")
.Bind(new[] { "None", "Cell", "CellRange", "Row", "RowRange", "ListBox" })
.Text("CellRange")
)
</label>
<label>
<div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text6)</div>
@(Html.C1().ComboBox().Id("allowSorting")
.Bind(new[] { "True", "False" })
.Text("True")
)
</label>
<label>
<div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text7)</div>
@(Html.C1().ComboBox().Id("allowDragging")
.Bind(new[] { "None", "Columns", "Rows", "Both" })
.Text("Solumns")
)
</label>
<label>
<div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text8)</div>
@(Html.C1().ComboBox().Id("isReadOnly")
.Bind(new[] { "True", "False" })
.Text("False")
)
</label>
<label>
<div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text9)</div>
@(Html.C1().ComboBox().Id("headersVisibility")
.Bind(new[] { "None", "Column", "Row", "All" })
.Text("All")
)
</label>