How to select certain cells from koGrid row?

Question

I have a koGrid and I want to select only somes cells (2 cells) from the row. If use canSelectRows: true property I can select the entire row - I don't need this. How to select certain cells from koGrid row ?

grid source:

 this.gridOptions = {
        data: self.people,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        useExternalSorting: true,
        sortInfo: self.sortingOptions,
        enableColumnResize: false,
        keepLastSelected: false,
        multiSelect: true,
        showColumnMenu: false,
        showFilter: false,
        canSelectRows: false,
        columnDefs: [{
            field: "Age",
            displayName: "Age",
            width: "33.3%",
            sortable: true
        },
        {
            field: "Address",
            displayName: "Address",
            width: "33%",
            sortable: true
        },
         {
             field: "Website",
             displayName: "Website",
             cellTemplate:
                 '<div>' +                   
                ' <a data-bind="attr: {href:\'linkAddress'">People</a>' +
                '</div>',
             width: "33%"
         }],

        selectedItems: self.selectedItems,
        plugins: [new koGridSetDefaultSortingPlugin(this.sortingOptions), new koGridSetNextPagePlugin()]

    };

When you say you only want to select 2 cells, do you mean that you want to be able to select the row based only on those 2 cells, or do you want to run an action when clicking on those 2 cells? — Paul Manzotti, Jun 05 '13 at 11:57
I want to run an action when clicking on those 2 cells; Thanks! — pisi, Jun 05 '13 at 12:12

score 1 · Accepted Answer · answered Jun 05 '13 at 12:34

I've used column templates for this, though that was when I only wanted one cell to be clickable.

<script type="text/html" id="removePostCodeTmpl">
    <div data-bind="attr: { 'class': 'kgCellText colt' + $index() },
    text: $data.getProperty($parent),
    click: function (itemRow, event) { $userViewModel.removePostcode($parent.entity); },
    style: { cursor: 'pointer' }"></div>
</script>

<script type="text/html" id="addPostCodeTmpl">
    <div data-bind="attr: { 'class': 'kgCellText colt' + $index() },
    text: $data.getProperty($parent),
    click: function (itemRow, event) { $userViewModel.addPostcode($parent.entity); },
    style: {
        cursor: $parent.entity.PostcodeGroupId === null ? 'pointer' : 'default',
        backgroundColor: $parent.entity.PostcodeGroupId === null ? '' : '#cc4444'
    }"></div>
</script>

I have those templates in the html page, I'm not a big fan of having the UI generation in the back end, it hides it.

columnDefs:
    [
        { field: 'Name', displayName: 'Search Results', cellTemplate: $('#removePostCodeTmpl').html(), width: '*' },
        { field: 'Data', displayName: 'Search Results', cellTemplate: $('#addPostCodeTmpl').html(), width: '*' }
    ]

You could roll them together into a row template too though, if you wanted to.

How to select certain cells from koGrid row?

1 Answers1