Display matrix of check boxes inside a Grid
Hello there!,
We have implemented following functionality using the Grid. As you can see, each site can have different permissions. User can grant permissions by checking one or more check boxes, and saving them as a bulk. For generating header, we are using different collection.
Following is the structure of data bound to check boxes with two-way bindings. Kindly note that I have stripped off unwanted properties and entries. Number of check boxes per row can grow up-to 19. 'checkPermission' property is used to manage the checked state.
[
{
"siteID": 1,
"siteName": "Test Site 1",
"permissionItems": [{
"permission": {
"permissionID": 18,
"name": "RuleCreateEdit",
"displayName": "Rule Create/Edit",
"displayOrderID": 6,
"isDisabled": null,
"applicationModuleID": 1
},
"checkPermission": false
}, {
"permission": {
"permissionID": 4,
"name": "FileUpload",
"displayName": "File Upload",
"displayOrderID": 8,
"isDisabled": null,
"applicationModuleID": 1
},
"checkPermission": false
}
]
}
]
Below view code is used to render checkboxes and other functionalities in the grid.
<ejs-grid #sitePermissionsGrid id='sitePermissionsGrid' allowTextWrap='true' [rowHeight]='25' [allowPaging]='true' [pageSettings]="permissionGridPageOptions"
[allowSorting]="true" [allowFiltering]='true' [filterSettings]='filterOptions' (dataBound)='sitePermissionsGridDataBound()'
[frozenColumns]='1' allowResizing='true' [contextMenuItems]="siteAccessGridContextMenuItems" (contextMenuClick)='sitePermissionGridContextMenuClick($event, data)'
(contextMenuOpen)='sitePermissionsGridcontextMenuOpen($event)' allowScrolling='true' [allowExcelExport]='true'
[selectionSettings]='permissionGridSelectionOptions' height="100%" (rowDataBound)='rowDataBound($event)'>
<e-columns>
<e-column headerTextAlign='center' field='siteName' [customAttributes]='permissionsCustomAttributes'
headerText='Accessibile Sites ' textAlign='left ' width=200 [allowFiltering]='true '>
</e-column>
<e-column headerTextAlign='center' textAlign='left' [customAttributes]='permissionsCustomAttributes' [(width)]="permissionColumnWidth"
[allowFiltering]=' false ' [allowSorting]='false '>
<ng-template #template let-data>
<div *ngFor="let userAccessPermissionInformationItem of data.permissionItems | callback: filterPermission">
<div style="text-align: center; float: left;width: 90px;height: auto;margin-right: 5px;">
<input type="hidden" [(ngModel)]="data.isDirty">
<ejs-checkbox [(checked)]="userAccessPermissionInformationItem.checkPermission" [disabled]="!data.isDirectUserAccess"
(change)='onPermissionCheckBoxChange(userAccessPermissionInformationItem, data) '>
</ejs-checkbox>
</div>
</div>
</ng-template>
<ng-template #headerTemplate>
<div *ngFor="let permission of permissions">
<div style="text-align: center; float: left;width: 90px;height: auto;margin-right: 5px;">
<span>{{permission.displayName}}</span>
</div>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-grid>
Even though above method works and render checkboxes properly binding to the data, if we move scroll bar horizontally up to the last checkbox column and click on it, scroll bar will reset back to default location. Item will be checked/uncheck but user has to use the scroll bar to again move to last checked location. Is there a better way to implement this check box matrix on the Grid. This had been implemented using Silverlight and client need the exact behavior on Angular app. Appreciate your suggestions and support.
Thank you!
Yasas
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
