Is there any way for make my ng-grid JUST SOME CELLS editable?
$scope.gridOptionsReports = {
data: 'Reports',
enableCellEdit: true,
columnDefs: [
{ field: 'Row', displayName: ' Row ', width: 40 },
{ field: 'OperationStatus', displayName: 'Operation', width: 120 },
{ field: 'Date', displayName: 'Date', width: 100 },
{ field: 'Consideration', displayName: 'Consideration', width: 80 },
{ field: 'Description', displayName: 'Description', width: 400 }
]
};
I want to make my Date and Description field editable.But now all of my fields are editable.
Thanks.
Related
I am trying to create a table to list all of my users in one go but I am having trouble getting it to display properly.
If I have two arrays to mix in (one of column names and one for where the main array user list should these go inside the return statement? I am stuck at the minute were it is either outputting nothing on a blank screen or throwing this error.
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstname', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{ field: 'userName', headerName: 'Username', width: 130},
{ field: 'userEmail', headerName: 'Email', width: 180 },
{ field: 'userRole', headerName: 'Role', width: 80}
];
const rows = [
{ id: userLists.userID, firstname: userLists.userFirstName, lastName: userLists.userSurname, userName: userLists.username, userEmail: userLists.userEmail, userRole: userLists.userRoleID },
];
return (
<div style={{ height: 400, width: '100%' }}>
{userLists.map(( {}) => {
return <DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
})}
</div>
);
}
you should map your data this way :
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstname', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{ field: 'userName', headerName: 'Username', width: 130},
{ field: 'userEmail', headerName: 'Email', width: 180 },
{ field: 'userRole', headerName: 'Role', width: 80}
];
const rows =userLists.map(user=>({ id: user.userID, firstname: user.userFirstName, lastName: user.userSurname, userName: user.username, userEmail: user.userEmail, userRole: user.userRoleID }));
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
</div>
);
}
I am using ag-grid-react and would like to sortable columns in it.
When I put enableSorting=true on , it enables sorting on all the columns. I don't want all columns to be sortable and instead would like sorting to be driven from the columnDef.(E.g sort the column only if its respective columnDef contain sortable=true.
Attaching the sample and columnDef with codesandbox link
<AgGridReact
columnDefs={this.state.columnDefs}
enableColResize={true}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.rowData}
enableSorting={true}
/>
columnDefs: [
{
headerName: "Athlete",
field: "athlete",
width: 150,
suppressSizeToFit: true
},
{
headerName: "Age",
field: "age",
width: 90,
minWidth: 50,
maxWidth: 100
},
{
headerName: "Country",
field: "country",
width: 120
},
{
headerName: "Year",
field: "year",
width: 90
},
{
headerName: "Date",
field: "date",
width: 110
},
{
headerName: "Sport",
field: "sport",
width: 110
},
{
headerName: "Gold",
field: "gold",
width: 100
},
{
headerName: "Silver",
field: "silver",
width: 100
},
{
headerName: "Bronze",
field: "bronze",
width: 100
},
{
headerName: "Total",
field: "total",
width: 100
}
],
Please refer : https://codesandbox.io/s/jz317zpo43
Please suggest what needs to be added.
Please check it here. maybe it will help. https://www.ag-grid.com/javascript-grid-sorting/
only enable sorting for a particular column
gridOptions: {
// enable sorting on name and age columns only
columnDefs: [
{field: 'name', sortable: true},
{field: 'age', sortable: true},
{field: 'address'},
]
}
I was able to achieve it by upgrading the ag-grid-react and ag-grid-community versions to 20.0.0. Refer AG-644 in https://www.ag-grid.com/ag-grid-changelog/
I'm currently trying to read my column footer to make sure that the total sum from the aggregate is exactly 100. However I can not find a way to get that value from the grid functions. Maybe I missed a function in the docs. Is there a way to accomplish this or will I have to manually loop through my grid and sum the values?
You can use aggregates on the column footer to automatically show the sum of all the values in the column.
you can have your grid config like below
$scope.gridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
columnDefs: [
{ field: 'name', width: '13%' },
{ field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
{ field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
{ name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
{ name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
{ name: 'customCellTemplate', field: 'age', width: '14%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
{ name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
],
data: data,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
http://plnkr.co/edit/nv1eJAIyD5xNDn8XI6L9?p=preview
To get the value from the footer, provided you know the column index and have a reference to the gridApi.
$scope.getFooterValue = function()
{
console.log($scope.gridApi);
alert($scope.gridApi.grid.columns[2].getAggregationValue());
}
I have angular ui grid in application and I want a field to be hide if any field value is null or empty.
$scope.gridOptions = {
paginationPageSize: 10,
columnDefs: [
{ displayName: 'First Name', field: 'firstName', headerCellClass: "GridHeader" },
{ displayName: 'Last Name', field: 'lastName', headerCellClass: "GridHeader" },
{ displayName: 'Active Status', field: 'activeStatus', headerCellClass: "GridHeader" },
{ displayName: 'RoleName', field: 'roleName', headerCellClass: "GridHeader" },
]
};
How to put a filter in field. Suppose if my rolename in above code is empty/null then hide the role field from grid.
Any help and suggestion highly appreciated. Thanks in advance:)
Yes, I fixed it.
var result = [];
var gridValue= [
{ displayName: 'First Name', field: 'firstName', headerCellClass: "GridHeader" },
{ displayName: 'Last Name', field: 'lastName', headerCellClass: "GridHeader" },
{ displayName: 'Active Status', field: 'activeStatus', headerCellClass: "GridHeader" },
{ displayName: 'RoleName', field: 'roleName', headerCellClass: "GridHeader" },
];
in the response I checked for null value.
if(response.data != null)
{
if (response.data.roleName === null) {
result = gridValue.slice(0, 3);
}
else {
result = gridValue;
}
$scope.gridOptions = {
paginationPageSize: 10,
columnDefs: result,
};
}
this helped me :)
I would recommend just using
that.grid.columnDefs[3].visible = false;
I haven't tested, but it should be more efficient than removing the column from your definition and re-applying the definition to the grid.
I think you could also set the visibility as a function that checks the data.
that.grid.columnDefs[3].visible = function () {
// replace with code checking grid.data
return false;
}
I have implemented a jqgrid with grouping, but recently I found that another grouping tab is getting created for the same name(warning) when ever I insert a new record in the db.
enter image description here
I want all the records with warning to be in the same group and not in separate group tab.
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
width: gwdth - 30,
height: 580,
colNames: ['ID', 'Icon', 'Path', 'Source', 'Name', 'Severity', 'Resolution State', 'Age', 'Created Date', 'Repeat Count'],
colModel: [
{ name: 'id', hidden: true, width: 1, key: true },
{ name: 'severity', width: 20, edittype: 'image', formatter: imageIcon, align: "center" },
{ name: 'path', width: 30 },
{ name: 'source', width: 30 },
{ name: 'name', width: 30 },
{ name: 'severity', width: 30, hidden: true },
{ name: 'resolutionState', width: 30 },
{ name: 'age', width: 30 },
{ name: 'createdDate', width: 30, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
{ name: 'occuranceCount', width: 30, align: "center" }
],
loadonce: true,
rowNum: 25,
rowList: [20, 30, 50],
gridview: true,
mtype: 'GET',
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
sortable: true,
pager: "#jqGridPagerA2log",
grouping: true,
groupingView: {
groupField: ['severity'],
groupColumnShow: [true],
groupText: ['<b>{0}({1})</b>'],
groupOrder: ["asc"],
groupSummary: false,
groupCollapse: true
}
});
I need to group based on severity column.
On seeing your image, and content that you have posted, I believe that by getting the data in order (order by) would solve your problem.