How to add a css class to the last row in jsGrid

Question

I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:

var displayData = function (itemViewModelList) {
                var fields = [
                        {
                            name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
                        },
                        {
                            name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
                        },
                        { name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
                        {
                            name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
                            itemTemplate: function (value) {
                                return tisCommon.formatForMoney(value);
                            }
                        },
                        {
                            name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
                            itemTemplate: function (value) {
                                return tisCommon.formatForMoney(value);
                            }
                        },
                        {
                            name: 'Month', type: 'text', width: 100, title: 'Month',
                            itemTemplate: function (value) {
                                return moment(value, 'M').format('MMMM');;
                            }
                        },
                ];

            var options = {
                inserting: false,
                editing: false,
                pageSize: 20,
                fields: fields,
                rowHeaders: false,
                colHeaders: false,

                data: itemViewModelList,
                controller: controller = {
                    loadData: function () {                        
                    },
                },
            };
            $('#investment-grid').tisGrid('', options);

            if (itemViewModelList[0].ConsultantName != null) {
                $("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
            } else {
                $("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
            }
        };

My data being passed "itemViewModelList" is an array of objects

Answer 1

I resolved this by using rowClass as follows:

controller: controller = 
{
    loadData: function () {}, 
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
     if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
     {
         return "totalItem highlight";
     }
}

I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.