Posted 15 March 2018, 5:40 pm EST
Hi,
Let me give you an example of this approach:
Let’s assume I have a student model:
public class Student {
public int Id { get ;set; }
public string Name{ get ;set; }
public string Gender{ get ;set; }
public DateTime DateOfBirth{ get ;set; }
}
A simple grid displaying this would be:
@(Html.C1().FlexGrid<Student>()
.AutoGenerateColumns(false)
.IsReadOnly(true)
.Bind(Model)
.CssClass("grid")
.Columns(columns =>
{
columns.Add(column => column.Binding("ID").Header("Id");
columns.Add(column => column.Binding("Name").Header("Name");
columns.Add(column => column.Binding("Gender").Header("Gender");
columns.Add(column => column.Binding("DateOfBirth").Header("Date of birth");
})
)
This is fine.
What if I need one more column where I have to display an Identity card (composed out of multiple properties of a student).
I cannot do it like above, since I cannot bind multiple properties on a single column. In this case I would create column bound to ID.
This is what I would do.
@(Html.C1().FlexGrid<Student>()
.AutoGenerateColumns(false)
.IsReadOnly(true)
.Bind(Model)
.CssClass("grid")
.Columns(columns =>
{
columns.Add(column => column.Binding("ID").Header("Id");
columns.Add(column => column.Binding("Name").Header("Name");
columns.Add(column => column.Binding("Gender").Header("Gender");
columns.Add(column => column.Binding("DateOfBirth").Header("Date of birth");
columns.Add(column => column.Binding("ID").Header("Identity Card");
})
.ItemFormatter("itemFormatter")
)
Now I can see a new “IdentityCard” column, but only ID is displayed there. Where as I need to have all the properties of the student, not just ID. This is when I would use ItemFormatter
An itemformatter runs for every single visible cell of Grid.
function itemFormatter(panel, r, c, cell) {
// For Identity Card column
if (panel.columns[c].header === "Identity Card") {
if (panel.cellType === wijmo.grid.CellType.Cell) {
// Get ID of student
var id = panel.getCellData(r, c);
// Get all the properties of student
var student = panel.grid.itemsSource.items[r];
var studentId = student.ID;
var studentName = student.Name;
var studentGender = student.Gender;
var studentDOB = student.DateOfBirth;
// Compose html template which would be displayed in the grid
cell.innerHTML = "<div><h1>Identity Card</h1>
Id: "+studentId +"
Name: "+studentName+"
Gender: "+studentGender +"
Date of Birth: "+studentDOB +"
</div>";
}
}
}
I hope this helps!
~nilay
