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();