I have a dashboard which has various charts and grids on it. Since there are multiple items on the page, they are kind of small. I would like to add a button to each area/control, that basically says "see full size". This means that the user would be seeing a chart or grid, says 400x600 pixels, and then click this button. This button would open a Dialog and copy the existing chart/grid to the dialog, but in full screen (or close to full screen) resolution. I don't want to have to recreate the graph/chart, as I would have to retrieve the data again, set formatting options, etc. Is it possible to just copy a chart or grid from one DIV to a DIV in the Dialog?
Is there an example of this anywhere?
Thannks
Hello George,
Thank you for using Ignite UI!
You can achieve your scenario using the jQuery append() method.
Let’s say you have a grid with id “grid1”. You want to place this grid inside the igDialog when it opens. To do so, you can assign the grid to a variable like this:
var newGrid = $(“#grid1”);
Then, you append this grid to the dialog. Asuming that your dialog looks like this:
<div id="dialog">
<div class="container"></div>
</div>
You can use the following command:
$("#dialog .container").append(newGrid);
This way the grid will be positioned inside the dialog.
I hope this will help you in your project.
If anything else pops out – do not hesitate to contact the Infragistics support again!
Thank you once more for using Ignite UI!
Best regards, Alexander Marinov, Infragistics
Thanks for your reply. This is VERY close... When I implement this code, it doesn't so much copy the graph, as it does MOVE the graph. aka I click on the button, and my graph, which WAS in the DIV salesGraph "disappears", the Dialogbox opens, and the graph shows up there. When I close the Dialogbox, and continue running my webpage, any action which should build a new graph in DIV salesGraph starts returning "undefined".
My workaround is that I have to .clone() first, and then .replaceWith(); The challenge that I have now though is that nothing else appears to work... Hovertips, etc. Functionally, this is just a screenshot of the graph, not a real graph. My guess is that because the DIV has changed, the javascript no longer recognizes it.
Any thoughts?