I am trying to get my Material table to first load with a column sorted and have the header arrow set to show that it is sorted. I added the following to my table to sort the table by default when loaded:
<table matSort matSortActive="name" matSortStart="asc" matSortDisableClear>
This seems to work and the data is sorted but the header arrow does no reflect the sort.
You can define the default sort before you set the sorter of your datasource.
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;
}
Working Stackblitz example
There are some known issues with mat sort arrow not being displayed.
One issue, while not exactly the same as yours, provides a working, programmatic solution: https://github.com/angular/components/issues/10242
It was the only workaround that worked for me.
For specific code see this answer: https://stackoverflow.com/a/65501143/407758
Related
I am using mat table below structure in my project.
**<mat-paginator></mat-paginator>
<mat-table></mat-table>
<mat-paginator></mat-paginator>**
In my ts file look like
**#ViewChild(MatPaginator) paginator: MatPaginator;**
**Actual problem is first one paginator is working fine and trigger events correctly.
bottom mat paginator is not working and event is not triggered ,also page,pageIndex is not
refelecting from first paginator**
#ViewChild queries only one component reference. But you have two components in your view. So, you have to query both the components separately, as shown below.
<mat-paginator #topPageinator></mat-paginator>
<mat-table></mat-table>
<mat-paginator #bottomPageinator></mat-paginator>
#ViewChild('topPageinator') paginator: MatPaginator;
#ViewChild('bottomPageinator') paginator: MatPaginator;
OR
You can use #ViewChildren instead of #ViewChild
#ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>;
I am using the jsPDF AutoTable plugin (v3.1.1) and my table needs 4 columns but the first row of my form has only 2 columns so I need to use colspans in the first row. AutoTable doesn't seem to do colspans right if the first row doesn't have all the columns there will be. If my first row contains 4 blank cells, everything works fine but I get an unnecessary row on the top of my table. Here's some code that demonstrates the issue:
var doc = new jsPDF();
var desiredDefinition = [
[{"content":"Field 1","colSpan":2}, {"content":"201901300654","colSpan":2}],
[{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];
doc.autoTable({ body: desiredDefinition });
var workaroundDefinition = [
[{"content":""},{"content":""},{"content":""},{"content":""}],
[{"content":"Field 1","colSpan":2}, {"content":"201901300654","colSpan":2}],
[{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];
doc.autoTable({ body: workaroundDefinition });
doc.save("table.pdf");
Here's a codepen with the issue: https://codepen.io/sirhcybe/pen/rgpKEJ
I played around with the columns property but couldn't find any way to tell AutoTable how many columns I need without creating an extra row. Is there a work around for this issue?
This has been marked as a bug in the jsPDF AutoTable repo:
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/500
I did not find a decent workaround but since I am using my own fork of jsPDF AutoTable I was able to make the code fix described in the GitHub issue.
EDIT:
This was fixed as a bug in jsPDF-AutoTable v3.2.
This week, i ran into a problem where dropdown control of angular material was not populating the default value coming from the API. My datasource looked like this:
public selectDataSource = [{
id: 1,
name: 'Option 1'
}, {
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}];
Value was coming from the API as:
{
'selectedOption': {
id: 2,
name: 'Option 2'
}
}
But somehow, when i assigned the value to reactive form control field, it didn't get auto populated, which ideally should be the expected behavior.
Reason, answer below.... Go on
After all the research, I came to conclusion that Angular will only make a value as default selected if it points to the same memory location as in the original dataSource array.
In the example above, selectDataSource is stored in different memory location whereas the value coming from the API is pointing to different memory location.
Solution: Loop through the original datasource and filter the matched entry with result from API, to get the selected object from the original dataSource and that's it you are done. Something like below:
selectedOption = selectedDataSource.filter((option) => option.id === selectedOption.id)[0];
Now, we have selectedOption pointing to the same memory location from the original dataSource array.
Below is the link to solution. Try toggeling the variable solveProblem to see the default behaviour(when pointing to different memory loctaion).
https://stackblitz.com/edit/angular-reactive-dropdown-control
In a Hope, it'll help someone someday.
Thanks,
Manish Kumar
I had the same problem with dropdowns not showing already saved / selected choices and this answer to another question finally helped.
The solution is using the [compareWith]="compareFunction" property on the select tag to override the default comparison happening. By referencing a custom compare function you can tailor how the matching of initial value to dropdown values should work.
My current solution:
<mat-form-field>
<mat-select formControlName="gender" [compareWith]="compareSelectValues">
<mat-option *ngFor="let gender of genderValues" value="{{gender.id}}">{{gender.label}}</mat-option>
</mat-select>
</mat-form-field>
And Typescript function:
private compareSelectValues(selectedValue, compareValue): boolean {
return Number(selectedValue) === compareValue;
}
Number() is needed as the value is converted to a string after setting it in HTML. Using material design components here but looking at the other post, this shouldn't change the general functionality. Hope this helps someone, who finds this question before the other one, like I did.
After grouping a column in the UI grid, count of no. of records in that category is displayed next to it, how can I remove it as shown in the below image
It's a little hard to find in the documentation, but you can hide these by setting the groupingShowCounts property of the grid options to false.
eg.
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
$scope.gridOptions = {
data: $scope.data,
groupingShowCounts: false
};
ref - documentation, In AG grid 23.x.x, this can be solved by autoGroupColumnDef.cellRendererParams.suppressCount = true
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.