sap.m.table pagination issue - sapui5

table defined as follows
<Table id="idSC_HdrList" mode="MultiSelect" editable="false"
growing="true" growingThreshold="10"
A search function populates the table from an Odata call, the first result works fine.
However when I click on the More button, the number of records correctly show 20 rows ( 10 + 10 ), but the more button overall count has jumped from 39 to 49.
This continues on each subsequence more button
Anyone come across this before and why this is happening? I have set the binding to one way on the odata model (not sure if it has anything to do with it, but it was mentioned in the growing property)

OK, thanks for the comments on this question, when I was copying out the code to give more details for the Odata service in Component.js, I noticed I had disabled the setCountSupported on the service.
Once I commented this out and re-tested, the pagination function works correctly now.
//oModel.setCountSupported(false);

Related

Is Ionic Virtual Scroll very buggy or not?

I am working with Ionic 4 and trying to get Virtual Scroll to work properly with no success, for long actually.
I find the Docs very unexhaustive and with poor grammar sometimes. As at the ItemHeight part which says:
An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by ion-virtual-scroll leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance
Now, I have no degree from Oxford, but this paragraph is plenty of mistakes, there is no clear explanation and it is confusing.
So now.
Would this ItemHeight be helpful somehow for performance or it can bring to performance issues?
Do I have any chance to get this code to work, cause till now I couldn't
((item: any, index: number) => number)
second number here looks like a typo, isn't it?
I think I found the solution.
The bug was caused by ion tags inside ion-virtual-scroll
So instead of having
<ion-virtual-scroll [items]="list">
<ion-card *virtualItem="let item" (click)="goTo(item)">
...
</ion-card>
</ion-virtual-scroll>
I changed my code to
<ion-virtual-scroll [items]="list">
<div *virtualItem="let item" (click)="goTo(item)">
...
</div>
</ion-virtual-scroll>
which seems to work fine, even with items with different heights and with no
approxItemHeight
attribute definition

How to implement drag and drop functionality in Angular Material Table?

I am able to to implement drag and drop functionality using ng2-dragula but the problem I am facing that it drags the header row as well and also unable to get the dragged row values(its row data )and the row above and below from the dragged row.
Can anyone help me this ?
I also found the same issue on github
https://github.com/valor-software/ng2-dragula/issues/831
<mat-table [dataSource]="dataSource"
matSort matSortActive="categoryName" matSortDirection="asc" matSortDisableClear
[dragula]='"seventh-bag"'>
<ng-container matColumnDef="seqNo">
<mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>
<mat-cell *matCellDef="let row;let i=index;">
{{(paginator.pageSize * (paginator.pageIndex)) + i+1}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header (mouseenter)="nameIcon=false" (mouseleave)="nameIcon=true">
Category Name
<i *ngIf="nameIcon && sort.active=='join'" class="fa fa-sort"></i>
</mat-header-cell>
<mat-cell
*matCellDef="let catg;">
name
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row._id}"
(mouseenter) ="dragRow = row" (mouseleave) ="mouseLeave('div A')"
>
{{row}}
</mat-row>
</mat-table>
When I use the above approach, then I am unable to fetch the dragged row data and its new position
2.) When I implement ng2-dragula
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [dragula]='"seventh-bag"'
>
then the drag and drop functionality not works well
Please refer to the picture below
Image Source:- https://user-images.githubusercontent.com/6483007/36256531-4a34b638-124b-11e8-9b13-cd15391886ae.gif
This may not be an exact answer to your question regarding dragula but seeing no-one has had a go yet here is a possible solution that seems to be working for me: I tried getting drag and drop working with mat-table as well. I didn't use ng2-dragula (i used jquery ui-sortable in the past), but i did get somewhere with angulars new CDK drag and drop system. (now in 7.0.0).
https://material.angular.io/cdk/drag-drop/overview
The only issue i had with this is that if you are wanting to do sorting, the cdkDropList directive had to be a direct parent to the cdkDrag elements, not sure if there is a way around this and i couldn't find an option saying otherwise.
seeing that mat-tables don't seem to be constructed in a way that works nicely with d&d I've turned to lists or expansion-panels (if you want the drop down for extended forms on each row) as they seem to behave better when being nested and work well with the drag and drop tools by cdk. (you will probably need to do some custom styling to get it looking like a table)
I realise it wont come with the sorting, filtering features mat-table comes with but if you are prioritising the d&d you may have to find another way around it.
Hope that gives you something to work with!

Mixing and aligning non-Smart fields in a SAPUI 5 Smartform

The attached screen below works just fine but underneath the covers I have a slight problem ^^
Smartform with both simple and smart fields
Behind the view there's a smartform (no annotations used). Field "Agreement Action Type" and the last two pairs of fields are not smartfields (found no "smartcombo" or something similar to use) they are just pairs of labels and comboboxes and here comes the issue. While the smart fields were all perfectly aligned, comboboxes (aka simple fields I suppose) were not aligned along. In order to solve this for the moment, I used a couple of SAPUI5 formatting classes and...width declaration in pixels in the combo definition within the view. Results works fine, even in different size monitors but, even though I'm currently in the process of learning and understanding the technology, I already know that the latter is a crime against SAPUI5. Is there a way to align smart and simple fields in the same view (or an equivalent dropdown control for smartforms alternatively) or I will have eventually to get rid of my smartform (losing small bonuses like the togglable attribute) and use a simple form instead?
Thanks for taking time to read it.
Regards,
Greg
The GroupElement aggregation manages the SmartLabel for you so try to remove the label inside the GroupElement aggregation like this:
<smartForm:GroupElement label="Label">
<Input type="Text" value="someValue"/>
</smartForm:GroupElement>
On the contrary, if you want to change the appearence of your SmartField, you can use ControlType to configure the internal control.

SAPUI5: How to create a control hierarchy?

I hope you can help me with this. After reading all the documentation several times, googling for days, etc I don't find the way to do what i'm going to explain in a clean way, and in think I'm missing something because it's a really basic scenario.
I'm working with oData models, in this case 2 named models, "Model1", "Model2". Now what I want is to show a "parent" ComboBox based on an oData path, and a table that changes its items depending on the selection, in other words.
Model1 { //JSON representation of the data.
Accounts:[
"account 1": {invoices: ["invoice1", "invoice2", "invoice3"]},
"account 2": {invoices:["invoice4", "invoice5"]}
]
}
Combo Box:
<... items={Model1>/Accounts} /> -- This works and shows Account 1, and Account2.
Table
<Table... items="{Model1>Invoices}">
..
<items>
....
</items>
</Table>
What I want is the table to change it's context to the account selected on the ComboBox. The point is that this works, but the first time it loads the view, as there is no account selected, it calls the wrong odata path MYSERVICE/Invoices, instead of doing nothing, as the Account is not set yet, and the path for the invoices, once selected the account, shoud be MYSERVICE/Account('Account1')/Invoices for example.
I know I can achieve this with code, but I'm sure there must be a clean way to do this.
Seriously, this is driving me crazy.
Thanks for your help.
Are you sure that
items="{Model1>Invoices}"
triggers odata call? Because this is a relative path (without leading slash), normally it should not do the call.
What you can do:
Handle ComboBox selectionChange event;
In this event handler, create a path that you will bound the table to. In your case the path could look like this: "/Account(Account1)" - "/{EntitySetName}({KEY})". You can make use of createKey method of ODataModel2;
Set the table's context using the path:
oTable.bindObject({
path: sPath,
model: "Model1",
parameters: {
$expand: "Invoices"
}
});
Once the context is set, the relative binding will start working automatically and table will get the "Invoices"
I assume that the Account and Invoices are linked via navigation property and one-to-many cardinality, that's why the $expand parameter will load the corresponding invoices.

ObjectDataSource.Select with Parameters Time Out

I'm using an ObjectDataSource with a 2008 ReportViewer control and Linq to CSV. The ODS has two parameters (the SQL is spelled out in an XSD file with a table adapter). The Reportviewer takes a very long time to render the output after a button is clicked to generate the report. That's my first problem. Even though it works (most of the time), the processing time worries me, and subsequent requests don't seem to be changing the results shown on the screen. The next issue is that when I go to export the ODS to CSV I'm getting a time out exception on the select method of the ODS (shown below). This works for ODS without parameters, but it seems like now that I've added parameters that it doesn't want to cooperate. I'm fresh out of ideas, any thoughts?
<asp:ObjectDataSource ID="obsGetDataAllCustomers" runat="server"
SelectMethod="GetDataAllCustomers"
TypeName="my.myAdapter.AllCustomers"
OldValuesParameterFormatString="original_{0}" >
<SelectParameters>
<asp:ControlParameter ControlID="StartDate" Name="Start" PropertyName="Text"
Type="DateTime" />
<asp:ControlParameter ControlID="EndDate" Name="_End" PropertyName="Text"
Type="DateTime" />
</SelectParameters>
</asp:ObjectDataSource>
After button click to view report -
rvAllCustomers.LocalReport.Refresh()
Export to CSV (adding the items returned to a list which is then processed by working code) -
For Each dr As DataRow In CType(obs.Select(), DataView).Table.Rows
l.Add(New FullOrderOutput(dr))
Next
Unfortunately (or fortunately I suppose in this case - loads of data here) I didn't find a direct solution to this problem. Instead, I used a query (probably using a SQLAdapter or something like that - it's been a while) and specified the parameters manually within that bit of code, then if I recall, supplied the report's datasource the adapter.