Telerik Radwindows and managing them with RadTabStrip and MultiPage control

Having spent around the last 4 months being heavily involved with integrating Teleriks ASP.Net AJAX controls into ASP.Net Applications to help provide our clients with a rich UI experience, I have witnessed first hand the trials and tribulations on developing with them. Sure there has been a learning curve over those last few months. However the reward for using Telerik far out ways this.

The one certain thing I have found most interesting with Telerik is their ability to not leave you with one way of carrying a certain task, in fact there is always more than one way to skin a cat with Telerik. Whether it’s choosing to develop with the client API or the Server Side API. Maybe it’s whether to bind data to a RadGrid within code behind or in markup. There’s always different avenues to develop solutions.

This brings me swiftly onto an issue I had a few weeks back. We had a requirement in one of our projects to add tabbed navigation to allow the user to navigate through 9 pages of content. Within each of these pages we would have Telerik controls, i.e. RadGrids, RadCombos with the additional benefits of creating and editing of information within model forms using Teleriks RadWindows.

This was great because we had the Telerik RadTabStrip control at our disposal, I had used this before and new this would be a slick way of navigating the pages. So after spending some time setting up the main page with the RadTabStrip and also using its companion the RadMuiltiPage control which essentially controls the contents within the RadTabs, I had all the pages loading up on each click of the tabs. Also quickly hooking up the RadAjax manager soon Ajaxified the tabs to give them a slick look and feel.

As the next few days pass so the development continues within each tab page to add functionality and further controls i.e. RadGrid, RadCombos, RadButtons and critically to enable the updating of information within Modal forms utilising the RadWindow Manager. The RadTabStrip appeared to handle everything fine up until the point we wanted to launch the RadWindows.

Unfortunately RadWindows are being launched and viewed within the confines of each Tab! At first this seems like a logical thing as we are launching the RadWindows from within each tab page but unfortunately where we hit a problem is that the page or multipage is actually an IFrame. This to a certain extent is not an issue as we can work around this and launch the RadWindows from the parent page and so by adding a RadWindowManager and moving all RadWindows to the parent page the problem was solved!

Nope not quite! This is ok if you just want to close the RadWindow and not reload any data within each tab. This for us was not going to be possible as the user may have created, deleted or edited records within any of the pages within the tab pages. This meant the contents of the current tab had to be reloaded. With the MultiPage control there was no means that I could find to do this and in addition this had to be done through JavaScript.

This means although we can get back to the parent page through some JavaScript, the JavaScript has no awareness of getting back into the RadMultiPage control and its collection of IFrames and then reloading a single IFrame.

As this must be a common issue the usual hunt for answers began through the Telerik site and Google. Infact the issue was out there but there appeared to be no definitive solution, I had already exhausted the client side API for RadMultiPage and there seemed to be no reload mechanism for the individual PageViews within each MultiPage.

Solution

 

Ok so the reason for a MultiPage is to manage the IFrame for each PageView in the MultiPageControl within a RadTabStrip. With a combination of RadWindow Management and trying to reload the tabs from client side using the RadMultiPage control I just couldn’t find a solution, so as I had got the RadWindow management fairly spot on by this point, I decided to remove the MultiPage control from the RadTabStrip control and to define a bog standard IFrame control within the main page markup and have the RadTabStrip reference that instead. Then I could just target this IFrame within JavaScript and load whichever page I liked in there, infact I had much more control over this IFrame.

Conclusion

 

I am sure there might be a way of using the MultiPage control client side to reload tabs and to use RadWindows in harmony, however the above implementation is less code and has proved so far a success!