Help creating custom layout control

Hello,

I followed this tutorial to create a custom layout control: http://www.sitefinity.com/40/help/developer-manual/pages-layouts-creating-layout-controls.html.  I am attempting to create a custom tab container and tab layout control.  I am doing it as a layout control because I need to be able to drop widget into the tab, such as images and content blocks.  I am able to get my layout control to show up in the page edit screen, but I cannot edit it or drag other elements on to it.

I have set up a separate project for my custom controls/layouts.  Here is the contents of my tab.cs:

Hello Sean,

Thank you for contacting Telerik Support.

I was able to run your code locally and all it does is to add a 100% column layout, on which I am able to put widgets, but it does not show tabs. Can you please clarify how you wish to create tabs?

All the best,
Boyan Barnev
the Telerik team

My idea for creating tabs was to create a wrapper for the tabstrip from radcontrols, which is included in the distribution. I am planning on having two layout controls, a tab container and individual tabs.  Each tab can have any sort of widget dragged onto it. 

However, I can't get past just being able to drag content onto my layout control.  Also, when I click the edit link, it doesn't pull up the edit overlay.

Hi Sean,

What you need is generally not supported, but I managed to create a working example of tabbed layout control using RadTabStrip and RadMultiPage. I have attached the source file. You must register the control the same way you will register any custom layout control.

You will notice that there are glitches - when you drag the control to a page/template, you will need to refresh the page, before dropping controls on it. Also, my implementation is using predefined tabs. It is certainly not perfect, but you should be able to further extend the control to better suit your needs.

I hope this helps.

Lyubomir,

Thanks for your help.  That did work, although I was not able to figure out how to adapt it to my needs.

Instead I am trying to implement tabs as a widget.  I am getting the following error:

Hello Sean,

In your first post you wrote that you need to be able to drag widgets in the tabs. You will not be able to do this with a simple widget, it must be a layout control. Has this requirement changed?

By the way, here's another way to simulate tabbed layout control, using custom master page and jQuery. This approach lets you define content place holders in the master page where you can drop any controls of your liking and wrap them in tabs.

In the master page paste this code:

Lyubomir,

Originally, I was attempting to create a sort of layout/widget hybrid that would allow to to drag any other content types onto the widget.  Since then I have abandoned that to try and just create a tab widget that would allow me to at least take advantage of the content editor and allow a site editor to set tab and tab names.

Unfortunately, the solution that you describe in your last post will not work because I need it to be something that a non-developer content editor can set up and use without developer needing to be involved.  It looks like what you are describing would work, but that it would require me to create a new tab instance each time they wanted to add something like that.

Thanks!

Sean

Hi Sean,

You are correct, the solution I proposed will not allow the users to add tabs by themselves. Currently I cannot think of a better solution. I will update the thread if I come up with an idea.

Hi Lyubomir

What is the CSS for the master page you've posted before?

We went through this same thought process when 4.x came out. What we ended up doing was to have two layout sections on the page. In one layout, we added generic content to place our ul for the tabs. In the other layout which was out tab pane layout, we added a layout for each control we wanted to feature as a tab pane. Each of these layouts could contain one or more controls.

is the url www.ttha.com ?

Yes it is. Sorry for the typo.

As far as I understand, it's a kind-of-customizable tabbed control. If so, would you consider selling that solution as I'm fed up with the "next-version" story of sitefinity...

This is a rather simple setup. Give me some time to put together an archive and a short video on how to implement this.

Ok, I have created an archive with the files you will need and a short video on implementing the tabs. The control functionality is derived from the tabs plugin found here jQuery Tools. I tweaked this plugin to allow for the jquery UI styling to be used. Originally I thought it was the jQuery UI tabs but after further investigation, we used the jQuery Tools plugin. While you don't actually need the UI interface to run this, I did add it in my demo video. You would only need to use the UI styling to get the look. I am using the smoothness theme from the jQuery UI. As for Sitefinity, I am just using a base 4.4 install, however you can use any of the 4.x versions. If you have a Sitefinity navigation element on the page, you may want to make sure you set the jquery includes to the bottom of the page template. This is a known solution when adding jQuery files to a site that already has jQuery included via the Sitefinity navigation. (Telerik controls)

Hi Richard,

 Thank you for sharing this with the community. This is very useful sample . I have updated your Telerik points!

Richard,

The information and video is very useful. "Telerik Support" should take a lesson from what you've done ;)

Thank you very much!

Hi Richard
I have tried to adapt your video to my site but I guess I'm missing something. I have recorded what I've done here (cannot upload since it's 8MB). Can you help?

(I have put js and css folders in root directory of my site as in your video. However, my site uses a custom template under App_Data\Sitefinity\... I'm not sure if can cause that problem?)

Murat,
    From the video, the only thing I can think of is the jquery.tabs.js file is not being instantiated. This could be a cause of the menu that you already have on a base page template. When you run the page, are you getting any javascript errors? If so, can you let me know what the error is? Maybe try using Google Chrome if IE is not giving you more precise error information.

Hi Richard
If it's not too much to ask, I can let you access everything on that host. Can you contact me thru skype? my account name is meraydin.

I just sent you an invite on Skype. richard.graydigitalgroup

In helping Murat out today, I realized that my jquery.tabs.js file is a newer file and the code snippet to instantiate the plugin is using the wrong plugin name. Here is the corrected code snippet to use to instantiate the control.