2016-05-10 17 views
0

klickte ich Daten zeigt, ui-grid.ui-Raster wie Checkbox auswählen, wenn Zeile

Die ui-grid mit drei Spalten. Die erste Spalte enthält checkbox für jede Zeile.

Die Daten werden korrekt ausgefüllt, die Zeilenauswahl funktioniert bis auf das folgende Problem.

Problem:

Wenn Zeile geklickt, muss die Checkbox auch ausgewählt werden sollte. Wie kann ich das erreichen? Irgendeine Idee?

html

<div class="row"> 
    <div class="col-lg-12"> 
     <div class="datalist-uigrid testGrid"> 
      <div class="grid testGrid" ui-grid="gridOptions" ui-grid-selection ui-grid-auto-resize></div> 
     </div> 
    </div> 
</div> 

-Controller

Dies ist, wie ich mein Feld bin definieren.

{ 
    field: 'selected', 
    displayName: '', 
    type: 'boolean', 
    cellTemplate: uiGridTemplates.cellTemplates.buildCheckboxEditCell('row.entity.IsOneOff', 'row.entity.selected', ' ng-change="grid.appScope.onSelectChange()"'), 
    enableFiltering: false, 
    enableSorting: false, 
    width: '3%' 
}, 

gridOptions

$scope.gridOptions = { 
    enableRowSelection: true, 
    enableRowHeaderSelection: false, 
    enableCellEdit: false, 
    enableCellEditOnFocus: false, 
    enableSorting: true, 
    enableFiltering: true, 
    multiSelect: false, 
    enableColumnMenus: false, 
    enableGridMenu: false, 
    rowHeight: 60, 
    modifierKeysToMultiSelect: false, 
    noUnselect: true, 
    onRegisterApi: function (gridApi) { 
     $scope.gridApi = gridApi; 
    } 
}; 

Dies ist, wie ich Reihe Click-Ereignis

$scope.gridOptions.onRegisterApi = function (gridApi) { 
    $scope.gridApi = gridApi; 
    gridApi.selection.on.rowSelectionChanged($scope, function (row) { 
     $scope.onSelectRowChange(row.entity); 
     var msg = 'row selected ' + row.isSelected; 

    }); 
}; 
+0

warum drehen enableRowHeaderSelection nicht: in gridOptions wahr, es wird Ihnen ein Kontrollkästchen standardmäßig geben –

Antwort

0

standardmäßig am Abfangen des Auswahlmodul einen Zeilenkopf mit Kontrollkästchen bietet die Auswahl der einzelnen Reihen erlauben .
Diese enableRowHeaderSelection: true getan werden kann, verwendet wird,

Wenn Sie die enableRowHeaderSelection in gridOption auf false gesetzt, dann ist der Zeilenkopf versteckt und ein Klick auf die Zeile wird bei der Auswahl dieser Zeile zur Folge haben.
Wenn Sie sowohl das Klicken auf die Zeile als auch das Klicken auf den rowHeader zulassen möchten, können Sie enableFullRowSelection auf true festlegen.

Bitte folgen Sie diesem Tutorial für Details:
Row Selection

0
<kendo-grid-column field="IsChecked" class="uk-text-center"> 
    <template kendoGridCellTemplate let-dataItem> 
     <input type="checkbox" [checked]="dataItem.IsChecked" (click)="SelectCheckbox()" (change)="dataItem.IsChecked = !dataItem.IsChecked" /> 
    </template> 
</kendo-grid-column> 
+0

Sie bitte auf [geprüft] = "dataItem.IsChecked" – 576prakash

Verwandte Themen