Dynamic columns and style in angular grid

[Warren]

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>'
           }]
       };

 

 

 

[Dimo]

Hello Warren,

Dynamic columns are supported only if the columns are autogenerated from the top-level keys of the data array, and all data fields are of string type.

Nevertheless, there is a way to achieve the desired behavior, and it is described at:

http://www.telerik.com/forums/binding-kendoui-grid-to-dynamic-column-and-values-kendo-ui-complete-resources-buy-try

With regard to conditional custom styling, please check

http://docs.telerik.com/kendo-ui/web/grid/how-to/style-rows-cells-based-on-data-item-values

Regards,
Dimo
Telerik

[Warren]

I'm not sure I follow on the dynamic columns.  I was able to get them to work doing this:

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') } })
            },
            dataBound: function(e) {
            // get the index of the UnitsInStock cell
                var columns = e.sender.columns;
                var columnIndex = 0;
                for (var j = 0; j < columns.length; j++) {
                    if (columns[j].field == "UnitsInStock") {
                        break;
                    }
                    columnIndex++;
                }

                // iterate the table rows and apply custom row and cell styling
                var rows = e.sender.tbody.children();
                for (var j = 0; j < rows.length; j++) {
                    var row = $(rows[j]);
                    var dataItem = e.sender.dataItem(row);

                    var units = dataItem.get("UnitsInStock");
                    var discontinued = dataItem.get("Discontinued");

                   // if (discontinued) {
                        row.addClass("warning");
                    //}

                    var cell = row.children().eq(columnIndex);
                  //  console.log(cell);
                  //  cell.addClass("warning");//getUnitsInStockClass(units));
                }
            },
            columns: columns()
        };




        function columns() {
            var cols = [];
            cols.push({ title: "Entry", value: name, field: "Name" });
            [0,1,2,3,4].forEach(function (c) {
                cols.push({
                    title: c.toString()
                   // , value: c
                    , width: "50px"

                    //, template: '#: Standings[' + c + '].TeamId #'
                    //, template: '<span class="#: Standings[0].Loss == 1? " warning""" #"><img src="../Content/images/LogoSmall/#: Standings[' + c + '].TeamId #.png" alt="#: Standings[' + c + '].TeamId #" />#: Standings[0].Loss #</span>'
                    ,template: '<img src="../Content/images/LogoSmall/#: Standings[' + c + '].TeamId #.png" alt="#: Standings[' + c + '].TeamId #" />'
                });
            });
            // 'class="#: Discontinued ? " discontinued""" #"'
            return cols;
        }

 

As you can see I'm trying different things to get the styling to work, can you offer any other advice on that?

 I'd like to be able to style a table cell based on the following:

Column: Standings[0].TeamId  would get its styling from Standigs[0].Loss

 

  ​

[Dimo]

Hi Warren,

The idea of the provided dynamic columns example is the following:

The Grid is using local data binding, i.e. it is not the Grid, which retrieves the data via a remote request. The purpose of this is for the developer to parse the data before creating the Grid widget, so that the correct number of column objects can be created with the correct settings.

A possible alternative to the above is for you to make a separate request to the remote data, find out what columns need to be created, use this information in the Grid initialization statement, and configure the Grid to use remote data binding.

===

The idea of the provided custom styling example is that the Grid data items or table rows are iterated, and information from the data items is used to determine whether to apply custom styling or not. Can you specify what is the step with which you are experiencing problems? 

- retrieving the desired data item values
- applying custom styles to table cells

What I see in the column template code is that a ternary operator is not used with the correct syntax:

Standings[0].Loss == 1? " warning"""

On a side note, please note that you can't apply custom styling to table cells from within the column template. This is only possible via the dataBound event.

Regards,
Dimo
Telerik