Good Day,
Please note that I found that one can retrieve/get the explorer bar items as per the below example;
var explorerBar = $find('<%= WebExplorerBar1.ClientID %>');var groupCollection = explorerBar.getExplorerBarItems();var group = groupCollection.getItem(0);
'<%= WebExplorerBar1.ClientID %>'
var
Is it possible to add/set these items on the client side from a group and item perspective?
Regards,
Nathan
Hello Nathan,
You can set properties of the ExplorerBarItem - modify text, value and state with: .set_value(), set_text() and so on.
The explorer bar client items collection is mostly read-only and is currently tied to the server-side for creating the items. You can browse the full client API here:
http://help.infragistics.com/Doc/ASPNET/2015.1/?page=WebExplorerBar~Infragistics.Web.UI_namespace.html
Perhaps an alternative solution would be an update panel for the explorer bar if you want to add and remove items?
Let me know if I can help with that or if you have other questions on this matter.
Damyan Petev
Associate Software Developer
Infragistics, Inc.
Hello Damyan,
A client side solution would be best, do you have an alternative control that would do the trick in igniteUI or are you busy working on something?
Can you set the visibility and all other public properties of the explorerbarItem on the client side and if you can could you please provide a quick example?
Thank you.
Hello,
Every public property on the ExplorerBarItem will have a get_<prop>() and some set_<prop>() client side assessor functions like value and enabled and such. Each will have listed available functions and in this case the visibility only has a get function, however hiding is fairly trivial on the element:
http://www.infragistics.com/community/forums/t/66150.aspx
Since the Explorer Menu Bar shares a lot with the Data Tree, there is a Data Tree in Ignite UI that can handle the advanced features such as data binding (which will look very familiar), load on demand and templating and rich client API. You can start with the samples:
http://www.igniteui.com/tree/overview
And the docs:
http://www.igniteui.com/help/igtree-overview
While the tree is not exactly menu, the basics are there – single branch expanded option, easy to handle click event to toggle and with a bit of styling it could not only perform, but also look similar to a menu.
I’ve forked the first sample above and with just a bit of CSS I’ve got the tree to look very similar to an Explorer Bar:
http://jsfiddle.net/damyanpetev/6m10sntj/
Keep in mind I’ve done this as a demonstration the controls can be very similar, styling changes will need more adjusting for an actual application.
Let me know if this helps and if there’s anything else I can help with on this matter.
Thank you for your reply and suggestions.
I decided to go with the igTree option and started with a prototype menu/explorer bar using the styling suggestion you made.
Now I only have one problem which is that when using the imageUrlKey property to display images on the nodes it pushes the text down on each element and the style of the text elements on the node is different to the image element. I presume that the following style override is the part of the solution as well as the problem;
.ui-igtree a {
/* stretch nodes to full width */
display: block;
}
When I set the display to inline-block the image displays next to the text but then I loose the stretch of the node. Finally the style is also not applied to the image element and I would like the image and text to look as if it is part of the same node/object.
Could you please assist?
Indeed, the styling I applied to make the node full width was as a block element. These nodes (the clickable link part) are usually inline and stack with images, but since I made them blocks they take an entire row on their own. Quick 3 different ways to integrate images as well:
You can do like the expander arrow and make them float left and ensure padding on the node: http://jsfiddle.net/damyanpetev/6m10sntj/8/
The image can be integrated in the node through the template (note that this makes the icon clickable as a part of the node, which is not the default behavior): http://jsfiddle.net/damyanpetev/6m10sntj/6/
Or you can apply inline-block to the node also set width in percent or fixed values: http://jsfiddle.net/damyanpetev/6m10sntj/7/ In this case 90% amounts to exactly 270px which fits perfectly in this width, but with others it might not. This one won't look quite as well, as the image is not part of the node.
Also I believe checkbox elements will pretty much need similar treatment.
Again, those are just some tips on how you can approach such customization as it is not part of the control's original design. You should be able to apply any approach for aligning multiple elements in a container horizontally through CSS, script or combinations, but the best solution will probably depend on the scenario.