Skip to content

Row Template Library

timothyswt edited this page Dec 8, 2012 · 1 revision

If you have your own custom templates, please add to this!


All Cells Editable

<div data-bind="foreach: $grid.visibleColumns">
    <div data-bind="attr: { 'class': 'kgCell col' + $index() }, kgCell: $data"> <!-- Required for proper cell alignment using foreach -->
        <!-- Using the kgCell binding will set the contents to the cellTemplate field on the column Definitions.-->
    </div>
</div>

Declarative Non-Foreach

Note: Doing this breaks the hide/show/reorder columns model. Recommended turning off reorderable columns this way

    <div class='kgCell col0' data-bind="text: $data.entity['Field1']"></div>
    <div class='kgCell col1' data-bind="text: $data.entity['Field2']"></div>
    <div class='kgCell col2' data-bind="text: $data.entity['Field3']"></div>
    <div class='kgCell col3' data-bind="text: $data.entity['Field4']"></div>

Change row color based on an entity field

<div data-bind="foreach: $grid.visibleColumns, style:{ 'background-color' : $data.entity['hasError'] ? 'red' : 'green' }" >
    <div data-bind="attr: { 'class': 'kgCell col' + $index() }, kgCell: $data"> <!-- Required for proper cell alignment using foreach -->
       <!-- Using the kgCell binding will set the contents to the cellTemplate field on the column Definitions.-->
    </div>
</div>

Something went wrong with that request. Please try again.