I'm using AG/IG 12.3.
I am attempting to work with the Navigation Drawer Mini example and finding it difficult to introduce content into the separate navigation panes (not wanting to use routing). I have started a basic example.
The first part is the control panel will have a large number of dropdowns and some combo boxes; data will have a data grid; and charts will have a tabbed set of charts (some instances will dynamically generate many vs a static 2 for others or none for some situations). I don't know how to generate any content based on the navigation because it doesn't work like the standard navigation drawer example and there are no other examples that actually show populating something based on navigation.
The second part is that I want the data & chart navigation to show up dynamically, based on whether a button was pushed in Controls or not.
I would prefer if the title of the content is inline with the navigation drawer button to save space, as we are processing a large amount of data.
Hi Chris,
I am glad that you were able to achieve your requirement.
Thank you for using Infragistics Components!
Best regards,Bozhidara Pachilova
Wow, another instance where I feel stupid for not being able to figure it out for myself. Thanks so much!
Thank you for clarifying.
Well, as far as I understand your requirement, I can say that you already wrote the condition to show the button, that is in case the ‘selected’ helper variable is equal to ‘Data’. I quickly updated the sample to show this.
This is valid for the sample, however, feel free to bind the condition to any logic that is relevant to your own project.
Regarding the alignment and position of the button, I guess this would be more of a styling matter.
In case I have not quite caught your requirement, please, please do provide more details.
Best regards, Bozhidara Pachilova
Actually, by "header", I mean the title for each section. The portion defined as below:
<div igxLayout igxLayoutDir="row"> <span igxButton="icon" igxToggleAction="navigation"> <igx-icon family="material">menu</igx-icon> </span> <h5 style="margin: 3px 20px; color: #0071c5">{{ selected }}{{scenario1Stitch || scenario1Stitch ? ' - Stitch' : ' - Compare'}}{{ selected !== 'Controls' ? ' (' + uomParam + ')' : '' }}</h5> </div>
I'm trying to move a button conditionally into there. So if "selected" === 'data', then I'd want to see the button added to that header/title for the drawer content. Here is a diagram of what I'd like to do with it. I'd prefer to have it brought directly up, so still floating to the right, but I would be happy to have it right after the text of the content title, too.
Hello Chris,
I assume that by header you mean an item in the igxDrawer variant, is this correct? I am asking this, as I do not suppose adding a button would work for the mini variant.
I have modified the sample from before to demonstrate a conditionally rendered button for the “Grid” navigation item. The property that you bind the condition to, would depend on your application-level code, for instance, the sample checks whether the item’s text property is equal to “Data”.
You mention exporting a grid to Excel, however, I am not entirely sure about the connection to the query about conditionally showing a button. If you mean that the button on the navigation group header should export a grid within one of the item’s contents to Excel, I am afraid that this is indeed not feasible, as you are right that the grid would not exist unless navigated to its nav item’s contents.
Nevertheless, in case that is your requirement, maybe the Excel Exporter service could still be leveraged if you have a hold on the data on the click of the button.
In conclusion, please, check out the above referenced sample and let me know if I can assist you with anything else on the matter.