I am showing data usingui-grid.
The ui-grid has three columns. The first column is contains checkbox for each row.
Data populating correctly, row selection works fine except the following issue.
Problem:
When row clicked, the checkbox should also be selected. How i can achieve this? Any Idea?
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
This is how i am defining my field.
{
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;
}
};
This is how i am intercepting row click event
$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;
});
};
By default the selection module provides a row header with checkboxes that allow selection of individual rows.
This can be done using enableRowHeaderSelection: true,
If you set the enableRowHeaderSelection in gridOption to false, then the row header is hidden and a click on the row will result in selection of that row.
If you want to allow both clicking on the row, and also clicking on the rowHeader, you can set enableFullRowSelection to true.
Please follow this tutorial for details:
Row Selection
<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>
Related
I have 2 grids side by side as per design and both will have same no.of rows. i need to apply filter in one column of grid1 and same amount rows should be in both the grids after applying filter also.
Component.ts
GridOptions = <GridOptions>{
enableFilter: true,
rowSelection: 'multiple',
enableSorting: false,
enableColResize: true,
singleClickEdit: true,
animateRows: true,
headerHeight: 50,
rowClass: 'rowClass',
headerClass: 'GridHeader',
overlayNoRowsTemplate: " ",
context: {
componentParent: this
},
onFilterModified: this.GridFilter
};
GridColumnDefs = [{
headerName: "Student Name", field: "name", width: 90, editable: true,
filter: 'agTextColumnFilter'
},];
releaseFilter(params: any) {
var data = params.api.getRenderedNodes()
}
I got the filtered rows of grid1 but dont know how to set the filtered index for the second grid. Thanks in advance
By setting selectable: row. The grid allow you to select an item in each page. I just want to select only one row in the Grid and limit the selected row to 1.
<Grid
{...{
dataSource: dataSource,
sortable: sortable,
selectable: selectable,
scrollable: false,
navigatable: true,
filterable: filterable,
allowCopy: allowCopy,
pageable: pageable,
perPage: perPage,
editable: editable,
change: e => e.sender.selectedKeyNames()),
persistSelection: true,
columns: [
{
template: "<span class='sl-select-check'></span>",
attributes: { class: 'sl-select-check-td' }
},
...columns
]
}}
/>
It would be easier with the new version of the Kendo Grid implemented in React:
https://www.telerik.com/kendo-react-ui/components/grid/selection/
In this demo the selection code is fully customizable and the state of if an item is selected or no is in the item itself.
if (!event.nativeEvent.ctrlKey) {
this.state.data.forEach(item => item.selected = false);
}
//this works across pages.
I'm using Ag-Grid to try and display a series of search results from a database. Almost everything works, the grid table appears, the search field, button, etc. all work, the correct REST interface is called and the data is returned as a Java List...for the example I'm using there are 16 results, and when I run the search what I basically see is 16 blank rows appear in the grid. It seems that it's getting as far as realizing it needs to populate the 16 entries, but something I've misconfigured prevents it from doing so. The event listener even works and kicks off the proper method, it's just that since nothing appears in the individual rows, the arg it collects is just null. Does anyone know what I'm doing wrong? Thanks!
Here is the HTML:
<div id="SearchTable" ng-controller="docSearch">
<div class="searchlabel">
Search Keyword Libraries<br> Search: <input name="searchField"
placeholder="Search..." type="text" ng-model="data.searchField" />
<button ng-click='searchKeywordLibs(data.searchField)'>Find</button>
<br>
</div>
<div ag-grid="SearchKeywordsTableGrid"
style="width: 500px; height: 200px;" class="ag-fresh"></div>
<div ng-if="status" id="status">
<b layout="row" layout-align="start center" class="md-padding">
</b>
</div>
</div>
Here is the grid definition:
$scope.SearchKeywordsTableGrid = {
columnDefs : [ {
headerName : 'Keyword Library Name',
editable : false,
filter: 'text'
},
{
headerName : 'Path',
editable : false,
filter: 'text'
},
],
rowSelection: 'single',
enableSorting: true,
enableColResize: true,
enableFilter: true,
suppressLoadingOverlay: true,
suppressNoRows: true,
sizeColumnsToFit: true
};
And here is the controller function:
$scope.searchKeywordLibs = function(search_term) {
$http.get('/trm/get_keyword_search_results?search_term='+search_term).success(
function(data) {
$scope.data = data;
$scope.SearchKeywordsTableGrid.api.setRowData($scope.data);
// add event listener
if($scope.SearchKeywordsTableGrid.api != 'undefined') {
$scope.SearchKeywordsTableGrid.api.addEventListener('rowDoubleClicked', openSearchResultPage);
}
});
};
Okay Jarod's comment steered me to where I needed to be...it was a simple flub, I didn't have the field attributes defined in the column definitions. It should have been:
$scope.SearchKeywordsTableGrid = {
columnDefs : [ {
headerName : 'Keyword Library Name',
field: 'name',
editable : false,
filter: 'text'
},
{
headerName : 'Path',
field: 'path',
editable : false,
filter: 'text'
},
],
rowSelection: 'single',
enableSorting: true,
enableColResize: true,
enableFilter: true,
suppressLoadingOverlay: true,
suppressNoRows: true,
};
Thanks!
I am trying to learn AngularJS.
The grid displays properly. It loads page properly.
It does NOT go into edit mode.
Double click does not go into edit mode.
F2 does not go into edit mode.
ProductTitle (the second column below) is the example I am using.
I recieve no errors in Chrome. No missing libraries.
I have spent hours researching this (and learned so much) but
I can't get it to go into edit mode.
Does anyone know what I am doing wrong?
module:
app = angular.module('UIGrid_App', [
'ngAnimate', // support for CSS-based animations
'ngTouch', //for touch-enabled devices
'ui.grid', //data grid for AngularJS
'ui.grid.pagination', //data grid Pagination
'ui.grid.resizeColumns', //data grid Resize column
'ui.grid.moveColumns', //data grid Move column
'ui.grid.pinning', //data grid Pin column Left/Right
'ui.grid.selection', //data grid Select Rows
'ui.grid.autoResize', //data grid Enabled auto column Size
'ui.grid.exporter', //data grid Export Data
'ui.grid.edit'
]);
})();
controller:
app.controller('ProductsCtrl', ['$scope', 'CRUDService', 'uiGridConstants',
function ($scope, CRUDService, uiGridConstants) {
$scope.gridOptions = [];
//ui-Grid Call
$scope.GetProducts = function () {
$scope.gridOptions = {
enableCellSelection: true, // jenny changed to editable
enableCellEdit: false, // jenny changed to editable - to be set below ( setting to true doesnt work)
enableCellEditOnFocus: true, // jenny changed to editable
useExternalPagination: true,
useExternalSorting: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,
columnDefs: [
{
name: "ProductID",
displayName: "Product ID",
width: '10%',
headerCellClass: $scope.highlightFilteredHeader
},
{
name: "ProductTitle",
title: "Product Title",
width: '40%',
enableCellEdit: true, // jenny change to editable
headerCellClass: $scope.highlightFilteredHeader
},
more columns
As per the documentation we need module, flags and attribute.
The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.
For individual cells to enable/disable use something like below in the column definition if you don;t want to enable all columns editable:
{ name: 'address.city', enableCellEdit: true, }
You need to add grid edit on your html (ui-grid-edit ui-grid-row-edit)
<div id="grid-create-profile" ui-grid="$ctrl.gridOptions" ui-grid-pagination ui-grid-cellNav ui-grid-edit ui-grid-row-edit ui-grid-resize-columns ui-grid-selection class="grid"></div>
in angulajs i have a ng-grid that i fill with data returned from a server. The field "Active" is a boolean so i have make a template to show a checkbox:
$scope.gridOptions = { data: 'myData', enableCellSelection: true,
enableRowSelection: false, enableCellEdit: true,
columnDefs: [{ field: 'Id', displayName: 'Id', visible: false },
{ field: 'Name', displayName: 'Name', enableCellEdit: true },
{ field: 'Active', displayName: 'Active', enableCellEdit: true, cellTemplate: '<input type="checkbox" ng-model="row.entity.Active" >' }]
Now, when i edit some cell, i want save back to the database the edited row and so i handle the ngGridEventEndCellEdit:
$scope.$on('ngGridEventEndCellEdit', function (data) {
....
}
event. In effect when i edit the cell "Name" the above handler is called but when i check/uncheck the checkbox Active, that event isn't called.
How can i emit the ngGridEventEndCellEdit when i check/uncheck the checkbox? Or how can handle that?
What about emitting ngGridEventEndCellEdit from the checkbox ng-change function?
ng-change="emitEndCellEdit()"
with
$scope.emitEndCellEdit = function() { $scope.$emit('ngGridEventEndCellEdit') }
Try to add ng-change="edit(row)" to your cell template. Handle all your stuff inside $scope.edit function. You should receive clicked grid data as a parameter.