I want to create a grid in the following scenario:
My data is an array of objects and within each object will be another array. The main array is entries and the child array is standings. The standings array will vary in size but every entry will have the same number of objects in standings. So if entry 1 as 4 standings objects then every entry will have 4 standings. They will also be in the same order.
I'd like my grid to then be:
entry.name | entry.standings[0].team | entry.standings[1].team | entry.standings[n].team
In addition to this I need to be able to color the table cell depending on a different value in standings: entry.standings[0].loss for it's respective cell.
This is what I have so far:
dataBound: function () { $('td').each(function () { if ($(this).text() == 'MIA') { $(this).addClass('warning') } }) },
This will change the background based on the value or team but I need it based on the value of loss
[
{
$id: "1",
$type: "FootballMn.Data.Entry, FootballMn.Data",
EntryId: 3,
UserId: 72,
Name: "My Test Entry",
NameNbr: 1,
CurrentStrikes: 0,
WeekOut: 0,
SortOut: 0,
Standings: [
{
$id: "2",
$type: "FootballMn.Data.Standing, FootballMn.Data",
EntryId: 3,
Week: 1,
Sort: 1,
TeamId: "SEA",
Loss: 1
},
{
$id: "3",
$type: "FootballMn.Data.Standing, FootballMn.Data",
EntryId: 3,
Week: 2,
Sort: 1,
TeamId: null,
Loss: null
},
{
$id: "4",
$type: "FootballMn.Data.Standing, FootballMn.Data",
EntryId: 3,
Week: 3,
Sort: 1,
TeamId: null,
Loss: null
},
{
$id: "5",
$type: "FootballMn.Data.Standing, FootballMn.Data",
EntryId: 3,
Week: 4,
Sort: 1,
TeamId: null,
Loss: null
},
{
$id: "6",
$type: "FootballMn.Data.Standing, FootballMn.Data",
EntryId: 3,
Week: 5,
Sort: 1,
TeamId: null,
Loss: null
}
]
]
vm.mainGridOptions = {
dataSource: {
type:
"json"
,
transport: {
read:
"http://localhost:55666/breeze/FootballData/EntriesWithStandings"
//StandingsTest"
},
serverPaging:
false
,
serverSorting:
false
,
},
sortable:
true
,
pageable:
true
,
dataBound:
function
() {
$(
'td'
).each(
function
() {
if
($(
this
).text() ==
'MIA'
) { $(
this
).addClass(
'warning'
) } })
},
columns: [{
field:
"Name"
,
title:
"First Name"
,
width:
"120px"
}, {
title:
"1"
,
value:
'test'
,
template:
'#: Standings[0].TeamId #'
//}, {
// title: "2",
// template: '<span class="#: setBackground() #">#: Standings[0].Loss #</span>'
}]
};