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?
The reason for this behavior is that the controls are not designed to work in the “cloned” context. The expected use of the controls is to recreate the widgets when needed. A big part of the underlying logic depends on the ids of the elements, and some of them are auto generated. Even if you change the id of a grid control that is cloned (using something like this: var clonedGrid = originalGrid.clone(true).prop({ id: "newId" }); ), the ids of the columns, for example, will stay the same as the ones of the original grid. This may cause exceptions when interacting with the control and may lead to unexpected behaviors.
Therefore, if you expect your end users to be able to interact with the controls – I would suggest trying to recreate the controls.
Regards, Alexander