Recently I was working on some custom development for a Kentico module. In the module, the main page was to be multiple grids and display different pieces of relevant information to the user. For the grids though, they needed to be in different views and the tabs needed to switch between them in order for events to fire.
Like this:
My first thought to accomplish this was to use the <cms:UITabs /> control as it is a Kentico control and I thought it would easily do what I needed. Sadly, this was not the case and I found certain parts a little tricky. So after some digging, I discovered an alternative solution that worked perfectly for my situation and allowed me to get a module page to have a tabbed view. This control is an “asp” menu with Multi view control containing multiple views. In this blog, I will show you how I accomplished this.
- First you will need to have a module page setup and configured inside your website.
- Second you will need something to pull data from. For this example, I created a simple custom table with two of my own fields for “First” and “Last” name and added in some random names to the table for testing purposes.
- Once your table has data, you will need to create a query similar to the one below so that your Unigrids in this example can pull back the desired data.
- SELECT ##COLUMNS## FROM bw_BlogSample
- Next on your designer page for your code file you will need to add the control. For this you will need the following: Sample code for download here.
- <asp:Menu />
- <asp:MultiView />
- <asp: View />
- <cms: Unigrid />
- Note: I used a Unigrid for displaying my values. You could also use the views to display information in a different way or to allow different types of interaction that are not limited to just Unigrid.
- Once setup is complete you will need to make sure your grids load properly. In this case on the code behind for the Page_Load I set the Unigrids to call ReloadData() so they display the desired information accordingly.
- At this stage, you should be setup ready to see your data on a Unigrid and be able to select either tab as seen below.
Now this may not be what you were expecting to see, but with a little styling you can make this look various ways. Below see an example of some styling applied to our views.
In Conclusion
After encountering this particular scenario and having to come up with a solution I felt this was something a lot of people may face during custom module development. This solution offers great flexibility and easily ties into back-end events for those developers who are more accustomed to back-end coding rather than front-end.
Sample Code for Download Here