First I am very new to Ignite UI controls so this may be a stupid question. I have an ascx page where I would like to use the igTileManager. I was hoping that I could have the Tiles on the left side and have them say form 1, form 2 and so on. Went the tile is clicked the form would display in the center with all of the textboxes and buttons in place like a standard web form. It would have button with button click events etc. When each of the tiles was clicked the new form would appear but the data that was put into the previous form would be presisted so if the person clicked back it would be displayed. Is this possible with the igTitleManager? Or should I look for a different solution? I've done something simular using a TabControl in the past but this looks so much more modern.
Thanks
Hello William,
I am not sure if I understood you correctly, but I prepared a sample for you that represents tiles in a responsive grid layout,
that can be clicked and opened in the center. After that you can move back to the previous screen.
Please have a look at the sample and let me know if this is the expected behavior.
Thanks for your response. What I need is when the tile is opened in the center it has a full group of interactive controls. Buttons with click events and input boxes where end users can input information. Then once they go to another tile the information can be retrieved if re click that tile. I need to keep this all on once page and not do any partial rendering since I have to use an ascx page. I can do this with a vertical tab control where the controls are put on the div that controls that tab but I can't figure out if this is possible to do with the tiles.
I'm attaching a sample that demonstrates how to use igTileManager with different controls on each of the maximized tiles. What you need to do for the purpose is to initialize the respective controls on tileMaximized event checking by the tile text for example:
tileMaximized: function (evt, ui) { if (tileText == "Bill Gates") {$($(ui.tile).children()).append("
"); $("#grid").igGrid({ columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" } ], width: "500px", dataSource: products }); }
if (tileText == "John Resig") { $($(ui.tile).children()).append(""); $("#combo").igCombo({ dataSource: colors, textKey: "Name", valueKey: "Name", width: "200px", autoComplete: true }); }
}
Please let me know if you have further questions.
Regards,
Tsanna
I am not sure you can make this, but I will investigate the issue and update you further.
If you have other questions, please refer to me.
Thanks for the response. This is getting closer. Is there a way to have different controls on each of the maximized tiles? So tile one for example could have controls to put in information for address fields (name, address, city, state, zip)and tile two could have an igGrid and tile three an igCombo? I know I'm asking alot and if it in not possible I undersatnd.
I understand your point, now I prepared a sample, in which each tile has input field and when entering the title of another tile, this tile is maximized.
I used a function that is fired on click of the submit button and I loop the array of titles depending on the value that is selected.
Please test it and let me know what is the result.