How can I use rowTemplate property?

Question

I want to change font color of a row on the basis of column value in Kogrid? Please guide on how can I set it? I have tried following:

<div id="grid" style="height: 700px; width: 650px;"
    data-bind="koGrid: {
                data: gridItems, afterSelectionChange: function (rowItem, event) {

                    if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
                        location.href = '/Home/Index?AcctID=' + selObj()[0].AcctID.toString();
                    }

                }, columnDefs: [{ field: 'AcctID', displayName: '  ',width: 120, cellTemplate: $('#editCellTemplate').html()
                                },
                                { field: 'AcctID', displayName: '  ',width: 120, cellTemplate: $('#openCellTemplate').html()
                                },
                { field: 'FName', displayName: 'First Name', width: '150' },
                { field: 'LName', displayName: 'Last Name', width: '100' },
                { field: 'AcctID', displayName: 'AcctID', width: '100' },
                { field: 'SSN', displayName: 'SSN', width: '100' },
                { field: 'AffinityName', displayName: 'Affinity Name', width: '205' }],
                    autogenerateColumns: false,
                    isMultiSelect: false,
                    showFilter: true,
                    showColumnMenu: true,
                    enablePaging: false,
                    showGroupPanel: true,
                    displaySelectionCheckbox: false,
                    enableColumnResize: false,
                    multiSelect: false,
                    selectedItems: selObj,
                    canSelectRows: true ,
                    rowTemplate:$('#searchRowTemplate').html()
                 }">
</div>

<script type="text/html" id="searchRowTemplate">
     <div data-bind="foreach: $grid.visibleColumns, 
                   css: { red: getProperty(\'SSN\') == '123456789' }"> 
             <div data-bind="attr: { \'class\': cellClass() 
                   \' kgCell col\' + $index() }, kgCell: $data"></div>
              </div>

   </script>

It gives :- Uncaught SyntaxError: Unable to parse bindings. Bindings value: foreach: $grid.visibleColumns, css: { red: getProperty(\'SSN\') == '123456789' } Message: Unexpected token ILLEGAL

Don't know how to get red font color for complete row where my column ssn = 123456789 and fname = john.

Please suggest a solution.

Anders · Accepted Answer · 2014-02-21T20:22:15.260

1

You need to use the cellTemplate on that field defintin like

http://jsfiddle.net/A29GA/4/

{
    field: "age", 
    displayName: "Age",
    cellTemplate: "content"
}

The cell template strangly only take a string literal not a templateId, to define the view in the viewmodel like I did in above example is not nice. Instead create a custom celltemplate add a member to the definition called templateId. Like

http://jsfiddle.net/A29GA/6/

I have put down a lot of time with this example so if you do not acceopt as answer I will strangle you! :D

Update:

http://jsfiddle.net/A29GA/10/

edited Feb 21 '14 at 20:22

answered Feb 21 '14 at 08:20

Anders

17,306
10
76
144

0 down vote accept Thanks Anders. But in my case I want the complete row values to turn red not only a column value. Yours is good example if I have to turn one column value red. Please suggest , how can I get the complete row font change to red. – Priyanka Chandok Feb 21 '14 at 08:25
Thanks Anders. I am suppose to implement it in next 2 hours. If anyone can help me in this concern it would be great. – Priyanka Chandok Feb 21 '14 at 09:59

score 0 · Answer 2 · answered Feb 21 '14 at 10:10

Here's a working JS fiddle with row highlighting where the name == John: http://jsfiddle.net/uyayX/1/

Mark Up:

<div class="gridStyle" data-bind="koGrid: gridOptions"></div>

JS:

function rowTemplateVM() {
    var self = this;
    this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
                     { name: "Tiancum", age: 43 },
                     { name: "Jacob", age: 27 },
                     { name: "Nephi", age: 29 },
                     { name: "John", age: 34 }]);
    this.gridOptions = { 
        data: self.myData,
        rowTemplate: '<div data-bind="foreach: $grid.visibleColumns, 
                           css: { red: getProperty(\'name\') == John }">' +
                     '<div data-bind="attr: { \'class\': cellClass() + 
                           \' kgCell col\' + $index() }, kgCell: $data"></div>'+
                      '</div>',
        columnDefs: [{field: 'name', displayName: 'Name'},
                    {field: 'age', displayName: 'Age'}]
    };
}
ko.applyBindings(new rowTemplateVM());

CSS:

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

.red {
    background-color: red;
    color: white;
    height: 30px;
}

For reference this was taken directly from: KoGrid examples page and adapted.

Thanks Tanner. I could not post my query in a comment here so posted it as answer. Please check the above post begining as - Thanks tanner. — Priyanka Chandok, Feb 21 '14 at 10:38

How can I use rowTemplate property?

2 Answers2