🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
Get Free Trial

I need a basic exmple of a table using Angular 6

KonektDev asked on November 1, 2018

We are looking at using Flexmonster in our application, and have downloaded the Free Trial for a proof of concept. We are interested in purchasing the product including premium support, however we are unsure of the tool is suitable
We are using .Net for our web APIs and Angular 6 in the front end and we are mainly listing records with properties (e.g. record ID, name, status, etc), without need for any type of aggregation, counts or sums etc. I have included a screenshot of a mock up in Excel 
First question – is Flexmonster a suitable tool for this? Would we use the pivot table or something else?
Second question – would you be able to provide us with a demo sample suitable for this?


4 answers

Tanya Gryshko Tanya Gryshko Flexmonster November 1, 2018

Thank you for writing to us!
Yes, Flexmonster is a suitable tool for this. There is the flat form used to display the data without any type of aggregation.
Please download a zip file with a demo sample. The demo sample shows a basic example of a table using Angular 6. You need to install the npm packages described in the package.json:

npm install

And simply run your application:

ng serve

Hope this sample will be useful. Waiting for your feedback!

KonektDev November 2, 2018

Hi Tanya
That is indeed helpful. Thanks a lot. Another requirement we have is to retrieve the case Id which is the primary key when the user clicks anywhere within the row. From the docs, support etc I think we need need to define the data types of the properties and then in the cellClick event we should be able to retrieve the primary key. I tried 2 approaches.
First approach was to duplicate the caseID property and call it caseIDHidden and give it a type of “id”. I have attached Flexmonster_data1.txt to show how I defined the data types.
Second approach was to duplicate the caseID property and call it caseIDHidden and give it a type of property and hierarchy = “caseID”. Flexmonster_data2.txt is attached and shows how I defined the data types.
 In the OnReportComplete method I logged the cell object. The code looks, like this
onReportComplete(): void {
this.pivot.flexmonster.on(‘cellclick’, function (cell) {
Would you please advise how I can retrieve the caseId when the user clicks on the row? 

Tanya Gryshko Tanya Gryshko Flexmonster November 2, 2018

We’re glad the Angular 6 sample is useful.
Here is a JSFiddle sample showing how the case Id can be retrieved: https://jsfiddle.net/flexmonster/rL73t1wu/. Just click on any cell and see the alert with the caseID property. There is used the first approach you mentioned (with an ‘id’ type). This id is accessed via cell.recordId (line 21).
Please let me know if it works for you.

KonektDev November 5, 2018

Thanks Tanya. It worked.

This question is now closed