When I use valueGetter for columnDefs, instead of showing the values only if the rows are collapsed, it will fill all the cells even if the group is not expanded yet.
Here is an example of the problem
And here is the desired behaviour, I can obtain such a thing with field option:
And here is the code I'm using to define the for each calendar day
{
headerName: moment(day).format("DD"),
colId: moment(day).unix(),
valueGetter: () => "12",
width: 58
}
Related
I have a PrimeVue DataTable (https://primefaces.org/primevue/datatable) that is arranged as such:
<DataTable
:rows = "5"
:value = "apiItems"
>
<Column
v-for="data in columns"
:field="data.field"
:header="data.header"
:key="data.field"
:sortable="true"
/>
</DataTable>
Where the table is being populated by data received from an API call, and the field layout is as listed:
const columns = [
{ field: 'initialDate', header: 'Initial Date'},
{ field: 'finishDate', header: 'Finish Date'}
];
The data being retrieved from the API is in the form of a JS Date() component that is displayed as such: "08/01/2022 08:33:32" for both initialDate and finishDate
How can I the columns via ascending or descending by both the date AND time stamps, whereas now, sorting the columns just rearranges the values based on the first digits available, which happen to be the month; I need them to sort corresponding to not only the correct month, but the time as well.
Any help is appreciated, thanks.
What you are receiving from the API cannot be a Date() object, but is probably a string. And so, if you sort by this column, the rows are sorted lexicographically, but not chronologically.
To avoid that, you should convert the data coming from the API into Date objects. If you convert that to a timestamp, that's very convenient to sort by chronologically:
for (item of apiItems) {
item.initialDateObj = new Date(item.initialDate)
item.initialDateTimestamp = item.intialDateTimeObj.getTime()
}
You can then specify that as the field to sort a column by:
const columns = [
{ field: 'initialDate', sortField: 'initialDateTimestamp', header: 'Initial Date'},
{ field: 'finishDate', sortField: 'finishDateTimestamp', header: 'Finish Date'}
];
I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above
this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}
Any kind of help is appreciated, thanks :)
You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered
onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}
See this implemented in the following plunkr
You may also find the following documentation pages relevant:
Saving and Restoring Filter Models
Grid Events
To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.
gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})
Similarly onFilterChanged event you can capture changes and apply filter dynamically.
My product table is sorted with initialSort by the product release month ascending. I also grouped my products by a codename which is determinate by the ajax json response url and renamed them to readable names with a groupBy function. Now I want to sort my groups individual without loosing the month sorting in my groups. How is that possible?
var table = new Tabulator("#tableid", {
ajaxURL: url,
layout: "fitColumns",
groupBy: "codename",
groupBy:function(data){
if (data.codename == "X123") {
return "Productname for X123";
}
if (data.codename == "X124") {
return "Productname for X124";
}
…
…
},
initialSort:[
{column:"month", dir:"asc"}
],
columns: [
{ title: "Product", field: "codename"},
{ title: "Month", field: "month"},
…
…
…
]
});
Not exactly sure what you mean by "sort my groups individual", but is this what you're looking for ?
https://jsfiddle.net/r3f7pysw/
initialSort:[
{column:"month", dir:"asc"},
{column:"codename", dir:"asc"}
],
NOTE(1) : I dont think you want to return that string for your grouping, when it seems like its just the header Display string, and you're still going to be sorting on "codename" (becoz the string is the same with a change at the end, which really takes a "little" long to compare each time). But maybe you do...
NOTE(2) : Adding the seconds initialSort is like Ctrl-Click on the sorting to sort by multiple criteria. So if you single click on say, Month, remember that destroys the currentSort array and sets it just to Month.
I'm using Extjs for rendering some information inside grid. Columns properties are like:
SEValue: {
dataIndex: "SEValue",
header: MCW.lr.s_lbl_sevalue,
hidden: false,
renderer: MCW.common.DeviceHelper.renderSEValue,
infoGroup: 30
},
Below method is used for manipulation of rendered values:
MCW.common.DeviceHelper.renderSEValue = function (value) {
if (value) return value;
return "Not Available";
};
Problem is that, whenever column value is '' or Null in DB, it doesn't show that column and in case of any value it shows the column.
M.b. need in field dataIndex: "SEValue", from which to draw the column's value set allowNull = true?
I am implementing JQGrid and sending the datatype as JSON. Also, I've set loadonce as true, and I am able to get the footer summary correctly in the footer.
However, on page navigation, the total value changes according to the row data in each page. My requirement is to display the grand total of all the records of the particular column so that the footer value remains same on page change.
I am using the following code to get the footer summary:
var grid=$("#mygrid");
sum = grid.jqGrid('getCol','amount',false,'sum');
grid.jqGrid('footerData','set',{ID:'Total:',amount:sum});
You can use userDataOnFooter option to achieve your goal. First you set this option to true while initializing:
$("#mygrid").jqGrid({
...
footerrow : true,
userDataOnFooter : true,
});
After that you can send the values for footer row in your response, JSON should look something like this:
{
total: x,
page: y,
records: z,
rows : [
{ id: "1", cell: ["value11", "value12", "value13"] },
{ id: "2", cell: ["value21", "value22", "value23"] },
...
],
userdata: { ID: "Total:", amount: <sum counted on server side> }
}
There is also live example available on jqGrid Demos page, you should choose "New in Version 3.5" and then "Summary Footer Row".