koGrid 행에서 특정 셀을 선택하는 방법은 무엇입니까?

Question

나는 koGrid가 있고 행에서 somes 셀 (2 셀) 만 선택하려고합니다. canSelectRows: true 속성을 사용하면 전체 행을 선택할 수 있습니다. 필요하지 않습니다. koGrid 행에서 특정 셀을 선택하는 방법은 무엇입니까?

그리드 소스 : 그 난 단지 클릭으로 하나 개의 셀을 원하는 경우 이었지만

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()] 

    };  

Answer 1

나는 이것에 대한 열 템플릿을 사용했습니다.

<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> 

내가 HTML 페이지에서 그 템플릿을 가지고, 내가 백 엔드의 UI 생성을 갖는 큰 팬이 아니에요, 그것은을 숨 깁니다.

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

원하는 경우 행 템플릿으로 함께 롤백 할 수 있습니다.