HTML5 Report rendering using webservices, JQuery, CSS

General information for the website: MaxBlox is a complete application development platform. The entire system is web-based and allows the ability to build applications that operate over the web. This is architected as a Platform as a Service (PaaS) system.
Num. of web pages/modules: 1
Description of requirements/features: We have a report designer in our application that outputs a straight forward HTML statement report using RDLC technology. Now we are moving our report rendering technology from RDLC to "HTML5 & Bootstrap" technology.

Currently we have the data retrival webservice api to get the report configurations and records for the report.

Consuming the report api we need to render the reports using jquery, css, html5.

We use dotNet and Bootstrap framework – so it needs to be consistent with those. It is responsive design so the app is available on phone and tablet too.

Requirement is creating report using Jquery, HTML5 and CSS. You need to create it from your imagination with the below features mentioned.

Report Requirements :

1) It needs to look very modern and current

2) It needs to look clean and easy to read

3) It should have a nice sense of coloring and theme support that is also modern

4) It should sort, group, in an attractive and clear way.

5) Parameter support
1) Based on the object control type it need to render the control for the parameter.
2) Dependent parameter support.

6) Dynamic Group headers and footers across many levels should be clear and meaningful
1) Group header
* Header Fields caption with value (i.e Status : Completed)
* Collapse and expand groups (rows) and hide and display details – inside the report itself
* SubTotal rows
* Money fields currency support based on localization.

7) Report Page header & Page footer need to be configurable in dynamic way.
1) Report Page header
* Report Title
* Logo (Configurable Logo Postioning i.e left, right, center)

2) Report page footer
* Page Number (i.e Page 1 of 1)
* Date of the report rendered.

8) Report header and Report footer.
1) Report header
* Column Headers (if possible seperate color support for column headers)
* Columns with sorting icon
* Dynamic Column width changing option (like excel content wrapping needs to happen)
* Dynamic Column hide and display option.
2) Report footer
* GrandTotal (if subtotal fields specified that grandtotal need to show in report footer)

9) Records and its configurations
1) Text & date fields need to be left aligned.
2) Numeric fields need to be right aligned.
3) Wrapping text need to applied.
4) Localization support on date, numeric, amount fields.

10) Font, font size need to be attractive and professional.

11) Proper Indentation should be there inside each cell values in grid

12) Need field value word-wrap feature (it should be a dynamic configurable feature).

13) First field can have drill-through

14) Find/Search a value in the report

15) Filter ability, Criteria selection and modification should be designed

16) Change colors of data based on conditions similar to MS Excel Conditional Formatting.

17) Exporting Options
1) Excel (XLS)
2) Excel (XLSX)
3) Excel (XLS) Without Header
4) Excel (XLSX) Without Header
5) Word (DOC)
6) Word (DOCX)
7) Word (DOC) Without Header
8) Word (DOCX) Without Header
9) PDF (PDF)
10) CSV (CSV)
Similar urls: https://airtable.com/templates/sales-and-customers/expvjTzYAZareV1pt/sales-crm
Extra notes: We are working on report UI. soon we will be updating the UI screenshots and Assets to get your output should be in this job.

Don's :

* Don't use tables while rendering the data. we need table less design.
* Don't use inline styles or scripts.
* Don't use any third-party controls or plugins.