Hi,
I am currently converting some of our old Silverlight code to ASP.NET MVC. One of our pages uses the Infragistics Silverlight TileManager control to display our status data that is refreshed every minute. There is a lot of code that dynamically built each tile pane for each record of data. Each tile pane included a few stack panels with several labels within each stack panel. The labels show data for the current record once the tile pane was maximized
During my investigation, I have started to look at the IgniteUI igTileManager control as a replacement since it has similar behaviors as the Silverlight version. However, I am stuck at this point since most of the samples that I have reviewed (Infragistics IgniteUI sample code, ER dashboard and Healthcare Source) seem to only setup the TileManager control once during initialization rather than during the refresh of dynamic data.
Here are my questions:
1. Can you point me to different samples that show how to properly refresh the data source of the igTileManager control based on a new JSON object?
2. Since the igTileManager will change often while the page is displayed, is there a preferred method to dispose of the previously defined igTileManager control's contents?
3. Could you provide some examples of how to define the layout of a new tile pane object so as to include a layout structure similar to stack panels. I imagine something like a CSS multi-column list.
Any assistance would be greatly appreciated. Thanks.
Hello Don,
Thank you for contacting Infragistics Support.
1. Basically you have to change the dataSource - http://www.igniteui.com/help/api/2015.2/ui.igtilemanager#options:dataSource . I prepared a sample demonstrating the desired behavior. Please take a look at it - http://jsfiddle.net/sakh38px/1/ .
2. No disposal of content is needed. The old data in the tiles would be overridden by the new data.
3. Just to be clear could you please send some screenshots from your old tile manager? If you do not have access to it, you could draw what you imagine. Please share your requirements and describe the behavior in detail. Thank you.
I am looking forward to hearing from you.
Thanks Tihomir for the quick response. I will review your sample on how to change the data source for the tile manager.
I have attached a couple of screenshots of my current dashboard web page. The first image shows the normal view of the tile manager. It provides very basic information. Once the user clicks one of the tiles, the maximized tile pane is displayed with the extended information. This is shown in the second image. I apologize for the shoddy editing of the images but I had to quickly edit out information that is proprietary to my company.
Image #1:
Image #2:
Thanks again for your assistance.
-Don
Thanks again Tihomir. I was finally able to get the tile manager control to bind to my JSON data.
I have one more questions.
I want to add code to the tileRendering event of the tile manager. Within the function, I want to poll my object property to determine the back ground color of the tile itself. I have checked some of the samples but I was unable to find an answer. I want to do something like the following:
tileRendering: function (evt, ui) { if (ui.tile.data("status") === "RUNNING") { ui.tile.backgroundcolor = lightgreen; } else { ui.tile.backgroundcolor = salmon; } }
1. I could not find any documentation that explains the properties that are available to the Tile object itself. Do you have any kind of documentation that explains the properties that are available for each individual Tile object?
2. For my immediate example, what is the tile property name to change the background color?
Thanks in advance,
Don
I am looking forward to your questions.
Thanks Tihomir for the quick response.
I will review the materials that you provided and return with any questions that may arise.
Regards,
Thank you for your detailed explanation.
Please take a look at this sample http://www.igniteui.com/tile-manager/item-configurations . You can be very flexible with your configuration. Also, in order to achieve the 4 divs with information on click you should take advantage of minimized state - http://www.igniteui.com/help/api/2015.2/ui.igtilemanager#options:minimizedState and maximized state - http://www.igniteui.com/help/api/2015.2/ui.igtilemanager#options:maximizedState options. You can make a template with the 4 boxes and pass its ID to the maximized state option. You can see how these options should be used in this sample - http://www.igniteui.com/tile-manager/overview .
Please let me know if I could be of further assistance.
I don't think the image links worked. Here are direct links to the images:
Dashboard #1 image:
https://drive.google.com/file/d/0B-Yk8OQrH4VHSEtrTjB5SGYzSHc/view?usp=sharing
Dashboard #2 image:
https://drive.google.com/file/d/0B-Yk8OQrH4VHd1oyaHZOTjZUUWc/view?usp=sharing
Thanks,