asked on April 17, 2017
I have created flex pivot using below code:
var pivotGridSelector = "#" + $scope.pivotId + "_pivotGrid";
$(pivotGridSelector).flexmonster({
global: {
localization: "loc/en.json"
},
licenseKey: response.licenseKey,
beforetoolbarcreated: customizeToolbar,
componentFolder: "libs/flexmonster/",
toolbar: true,
height: "100%",
width: "100%",
report: flexReport
});
I have this pivot inside one of the sections on the page, these sections are resized using Kendo splitters.
Now when screen is resized / section of the screen is resized, I want pivot to be resized accordingly ?
How can I do that ?
What I see right now is it renders using the original height which was provided at the time of the creation of the pivot.
So when you resize screen more /maximise , as height of the pivot remains the same, and remaining area is shown as blank
Where as when you resise less /minimize, as as height of the pivot remains the same, vertical scrollbar gets more height and so its endpoint is not visible and hence even horizontal scrollbar goes missing from the screen, although its there in the DOM.
One more observation: when you do screen resize using standard minimize /maximize (or double click on the browser toolbar) issue is more consistent
⋅ April 18, 2017
Hello Sohan,
Thank you for the question. When you create a new instance of pivot table you specify the id of the HTML element you would like to have as a container for the component (for example, the id of <div>). In your case it is pivotGridSelector . Setting height and width for the component actually means setting height and width for the container. Flexmonster automatically renders when the size of the container is changed. In order to make pivot being resized correctly, please verify that the sizes of the container are changing when the screen is resized. Check out the JSFiddle example with Flexmonster and Kendo splitters. Please let us know if you have additional questions.
Regards,
Tanya
⋅ April 21, 2017
Thanks Tanya !
⋅ November 9, 2018
Hi Tanya
I have similar resizing issue but in my case I need to move the pivot under a DIV where it's not resizing.
How do I force it to resize (other than refresh())?
Please update the HTML of the JSFiddle example as below and click the MOVE button:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="example">
<div id="vertical">
<div id="top-pane">
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div id="pivot">Resizable and collapsible.</div>
</div>
<div id="center-pane">
<div class="pane-content">
<h3>Inner splitter / center pane</h3>
<p>Resizable only.</p>
<div id="destination">
<h3>Destination</h3>
</div>
</div>
</div>
</div>
</div>
<div id="middle-pane">
<div class="pane-content">
<h3>Outer splitter / middle pane</h3>
<p>Resizable only.</p>
<div>
<button onclick="move()">Move Report</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function move() {
alert("move")
$("#destination").append($("#pivot").get());
}
</script>
⋅ November 12, 2018
Hi Tanya
I also notices that scroll bar does not appears when it should have.
To replicate use the the JSFiddle example example again
Issue: The horizontal scroll bar doesn't appears. see attached screenshot.
This also can happens to vertical scroll bar
⋅ November 12, 2018
Hello Sengupta,
Thank you for writing.
The minimum recomended size for the pivot parent container is the container with width = 300px and height = 200px + toolbarHeight(80px). Please make sure that you are not trying to insert component into the container with the less size since that may lead to the unpredictable behavior.
Please let us know in case of any other question.
Regards,
Dmytro
⋅ November 12, 2018
@Dmytro Zvazhii
Thanks for the update.
Could you please also answer my other question as well regarding moving the pivot
⋅ November 13, 2018
Hello Sengupta,
Thank you for the update.
As for your previous question please have a look at the following jsfiddle example: http://jsfiddle.net/flexmonster/crow390p/.
We have put a component into the additional container. That is a recommended approach to make the component resize correctly.
Please let us know if everything works fine for you.
Regards,
Dmytro
⋅ November 15, 2018
@Dmytro Zvazhii
I am still having issue with the resizing
Please find the attached ZIP file to replicate the issue
Step 1: Click load
Step 2: Click Move (doesn't resize whereas the outer DIVs are all 100%)
If you manage to fix this issue then please Click Restore to reset to initial size
⋅ November 16, 2018
Hi!
I recommend you to add flexmonster.refresh(); to the end of move() and restore() functions like this:
function move() {
console.log("move");
var wrapper = $("#wrapper").get();
$("body").append("div id="fullScreenContent" style="background-color: red; width: 100%; height: 100%"/");
$("#fullScreenContent").append(wrapper);
$("#layer").css("display", "none");
flexmonster.refresh();
}
function restore() {
console.log("restore");
var wrapper = $("#wrapper").get();
var layer = $("#layer");
layer.append(wrapper);
layer.css("display", "block");
$("#fullScreenContent").remove();
flexmonster.refresh();
}
Does it help?
Regards,
Dmytro
⋅ November 16, 2018
@Dmytro Zvazhii
I am aware of the refresh() option which I mentioned in my original question 7 days ago.
We do have some complex report which takes around 7 secs (*this was measured in v 2.3) to build (with over 10000+ rows).
As refresh() rebuilds/recalculate the report, there is a visible time delay when resizing using refresh
Would it not possible to open the API for repaint?
⋅ November 19, 2018
Hello Sengupta,
Right now it is the only suitable option for your case. Please note, that refresh does not recalculate or reconnect the data. It uses the same data and calculations and redraws the view. The reason for the delay is that the component needs to redraw a great number of rows again.
You can refer to our documentation: https://www.flexmonster.com/api/refresh/.
Please let us know in case of any other question.
Regards,
Dmyrto