Set up an empty component in your HTML page. If Flexmonster is not yet embedded – return to Quick start. Your code should look similar to the following example:
<div id="pivotContainer">The component will appear here</div> <script src="flexmonster/flexmonster.js"></script> <script> var pivot = new Flexmonster({ container: "pivotContainer", toolbar: true, licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX" }); </script>
Add the following dependencies to your project:
Flexmonster.Compressor.dll
– located in the Pivot Table for Databases/server/.net/
folder of the download package.Below is a connection and query sample for MS SQL Server:
string connectionString = "Server=localhost;Database=XXX;"; SqlConnection sqlConnection = new SqlConnection(connectionString); sqlConnection.Open(); string query = "SELECT * FROM YYY"; DbCommand command = new SqlCommand(query, sqlConnection); DbDataReader reader = command.ExecuteReader();
Then the following line of code will convert DbDataReader
to a compressed Stream
:
Stream inputStream = Flexmonster.Compressor.CompressDb(reader);
Now, you can create a response from the Stream
. For simple cases, it is suitable to read all of the content at once:
string output = new StreamReader(inputStream).ReadToEnd();
It is also possible to create a streaming response. This means that the end user will get the response with minimal delay and server will use less memory. This is the recommended approach for large datasets:
HttpResponseMessage response = Request.CreateResponse(); response.Content = new PushStreamContent((Stream outputStream, HttpContent content, TransportContext context) => { int length = 0; byte[] buffer = new byte[10240]; while ((count = inputStream.Read(buffer, 0, buffer.Length)) > 0) { outputStream.Write(buffer, 0, length); outputStream.Flush(); } outputStream.Close(); }, new MediaTypeHeaderValue("text/plain") );
The full project is available at Pivot Table for Databases/server/.net/
inside the download package.
By default, the browser prevents JavaScript from making requests across domain boundaries. CORS allows web applications to make cross-domain requests. Here is a useful link explaining how to setup CORS on your server:
Now it’s time to configure the pivot table on the web page. Let’s create a minimal report for this (replace filename
and other parameters with your specific values):
var pivot = new Flexmonster({ container: "pivotContainer", toolbar: true, report: { dataSource: { dataSourceType: "ocsv", /* URL to the Data Compressor .NET */ filename: "http://localhost:55772/api/flexmonster/get" } }, licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX" });
Launch the web page from a browser — there you go! A pivot table is embedded into your project. Check out the example on JSFiddle.
string connectionString = "Server=localhost;Database=XXX;"; SqlConnection sqlConnection = new SqlConnection(connectionString); sqlConnection.Open(); string query = "SELECT * FROM YYY"; DbCommand command = new SqlCommand(query, sqlConnection); DbDataReader reader = command.ExecuteReader(); Stream inputStream = Flexmonster.Compressor.CompressDb(reader); FileStream fileStream = File.Create("data.ocsv"); inputStream.CopyTo(fileStream); fileStream.Close();