Ribbon UI component

[Rob]

Presumably there is no Ribbon UI component in MVC 3 extensions yet?

Regards,
Rob.

[Georgi Tunev]

Hello Rob,

Currently we don't have plans for such component in the near future, but I logged your suggestion and we will discuss in our internal meetings.




Best wishes,
Georgi Tunev
the Telerik team

[Rob]

Thanks for the update.

Is it possible/wise to mix the MVC telerik components with the .NET AJAX library?  It would seem that those components are very feature rich and it would be a shame to be limited to only the MVC components.

If it's possible, do you have any documents that detail what steps should be taken, for example I have just upgraded my project to use Telerik MVC3, I'm assuming that I might have to do the same with Telerik AJAX - but even if that's possible, will they conflict or is MVC 3 incompatible with ASP.NET?

Regards,
Rob.

[Glenn]

I would also be interested to see the MVC implement a ribbon control, this is certainly a big drawback if you are not planning to add this in the future.

Also, keen to see a workaround in the interim.

[Georgi Tunev]

Hi guys,

You can use RadControls for ASP.NET AJAX in ASP.NET MVC environment (see this help section for more details), although there are some limitations that you need to have in mind. For example you could easily add a RadRibbonBar to an ASP.NET MVC project, but you can use only client programming with it, due to the fact that ASP.NET MVC view pages don’t have server form tag (<form runat=”server”>) which is required for ViewState and postbacks support.

As for using the MVC components in ASP.NET AJAX scenario, in theory it is possible but we do not recommend it.

Greetings,
Georgi Tunev
the Telerik team

[Glenn]

Hi Georgi,

Is there anyway to use this control from within Razor?

I really don't want to have to base my view engine decision entirely on this control.

Also, you may want to look at updating the AJAX documentation to discuss Ribbon control - it does not mention it in the help documentation you provided.


Thanks,
Glenn

[Georgi Tunev]

Hello again Glenn,

No, you can't use it with Razor - I apologize for missing that in my previous reply.
As for the documentation, the section that I referred to contains general instructions on how to run the controls in ASP.NET MVC. There are specific techniques for some of the controls, that are explained in separate sections (RadComboBox, Grid, etc.) but the general instructions are valid for all other controls. Again, the main limitation here is that you could work with these controls with client code only.


Best wishes,
Georgi Tunev
the Telerik team

[Lasse]

I would also very much appreciate the Ribbon control for MVC.

In fact most of your controls for AJAX is desirable to have in MVC :o).

[Lasse]

Actually it is possible to use it with Razor - if you create an .aspx partial view and include it in your razor view.

1) First I followed the guide mentioned here.
2) Then I manually added Telerik.Web.UI.Skins.dll (I found it in the folder %ProgramFiles%\Telerik\RadControls for ASP.NET AJAX Q3 2011 SP1\Bin40).
3) Then I added an ASPX Partial View to my project and included that in my Razor view - see below.

Example of a Razor View with an MVC Splitter Control, containing a RadRibbonBar partial view in the top pane:

@using Telerik.Web.UI;
@{
    ViewBag.Title = "Home Page";
}
@{Html.Telerik().Splitter().Name("MainSplitter")
    .HtmlAttributes(new { style = "height: 100%; border: 0;" })
    .Orientation(SplitterOrientation.Vertical)
    .Panes(vPanes =>
    {
    vPanes.Add()
        .Size("131px")
        .Collapsible(false)
        .Resizable(false)
        .Content(Html.Partial("RibbonBarPage").ToHtmlString());

        vPanes.Add()
        .Scrollable(false)
        .Content(Html.Telerik().Splitter().Name("Splitter2")
            .HtmlAttributes(new { style = "height: 100%; width: 100%; border: 0; overflow: hidden;" })
            .Orientation(SplitterOrientation.Horizontal)
            .Panes(hPanes =>
            {
                hPanes.Add()
                .Size("250px")
                .Collapsible(true)
                .Content(@<p>Inner splitter :: left pane</p>);

            hPanes.Add()
                .Content(@<p></p>);

                hPanes.Add()
                .Size("250px")
                .Collapsible(true)
                .Content(@<p>Inner splitter :: right pane</p>);
            }).ToString());

        vPanes.Add()
        .Size("30px")
        .Collapsible(false)
        .Resizable(false)
        .Content(@<p>Outer splitter : bottom pane</p>);
    })
    .Render();
}

And here is the code for the ASPX Partial View containing the RadRibbonBar (which I've copied from your demo site here):

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>ViewPage1</title>
</head>
<body>
    <div>
        <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" Width="100%" Skin="Office2007">
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="~/Content/icons/home/Paste.png">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="~/Content/~/Content/icons/home/Paste.png" />
                                <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="~/Content/icons/home/Paste.png" />
                            </Items>
                        </telerik:RibbonBarMenu>
                        <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="~/Content/icons/home/Cut.png" OnClick="alert('Hej!');" />
                        <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="~/Content/icons/home/Copy.png" />
                        <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="~/Content/icons/home/Format_Painter.png" />
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Font">
                    <Items>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="~/Content/icons/home/font/Bold.png" />
                        <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="~/Content/icons/home/font/Italic.png" />
                        <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="~/Content/icons/home/font/Underline.png" />
                        <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="~/Content/icons/home/font/Strike.png" />
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="~/Content/icons/home/font/Superscript.png" />
                                <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="~/Content/icons/home/font/Subscript.png" />
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Paragraph">
                    <Items>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Text="Align Left" ImageUrl="~/Content/icons/home/paragraph/AlignLeft.png" />
                                <telerik:RibbonBarButton Text="Align Center" ImageUrl="~/Content/icons/home/paragraph/AlignCenter.png" />
                                <telerik:RibbonBarButton Text="Align Right" ImageUrl="~/Content/icons/home/paragraph/AlignRight.png" />
                                <telerik:RibbonBarButton Text="Justify" ImageUrl="~/Content/icons/home/paragraph/Justify.png" />
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="~/Content/icons/home/paragraph/UL.png" />
                                <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="~/Content/icons/home/paragraph/OL.png" />
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="~/Content/icons/home/paragraph/DecrIndent.png" />
                                <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="~/Content/icons/home/paragraph/IncrIndent.png" />
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarSplitButton Size="Medium" Text="Find" ImageUrl="~/Content/icons/home/Find.png">
                            <Buttons>
                                <telerik:RibbonBarButton Text="Find..." ImageUrl="~/Content/icons/home/Find.png" />
                                <telerik:RibbonBarButton Text="Go to..." ImageUrl="~/Content/icons/home/Go.png" />
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="~/Content/icons/home/Replace.png" />
                        <telerik:RibbonBarMenu Size="Medium" Text="Select" ImageUrl="~/Content/icons/home/Select.png">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="~/Content/icons/home/Select_All.png" />
                                <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="~/Content/icons/home/Select.png" />
                            </Items>
                        </telerik:RibbonBarMenu>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="Insert">
                <telerik:RibbonBarGroup Text="Illustrations">
                    <Items>
                        <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="~/Content/icons/insert/Picture.png" />
                        <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="~/Content/icons/insert/Clipart.png" />
                        <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="~/Content/icons/insert/Shapes.png" />
                        <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="~/Content/icons/insert/SmartArt.png" />
                        <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="~/Content/icons/insert/Chart.png" />
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Links">
                    <Items>
                        <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="~/Content/icons/insert/Link.png" />
                        <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="~/Content/icons/insert/Bookmark.png" />
                        <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="~/Content/icons/insert/Cross_reference.png" />
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="View">
                <telerik:RibbonBarGroup Text="Zoom">
                    <Items>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" ImageUrl="~/Content/icons/view/Zoom.png" />
                                <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="~/Content/icons/view/100.png" />
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="~/Content/icons/view/One_Page.png" />
                                <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="~/Content/icons/view/Two_Pages.png" />
                                <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="~/Content/icons/view/Page_Width.png" />
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Macros">
                    <Items>
                        <telerik:RibbonBarSplitButton Size="Large" Text="Macros" ImageUrl="~/Content/icons/view/Macros.png">
                            <Buttons>
                                <telerik:RibbonBarButton Text="View Macros" ImageUrl="~/Content/icons/view/Macros.png" />
                                <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="~/Content/icons/view/Macros_Record.png" />
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
    </div>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
</body>
</html>

I'm so happy that I worked that out - hope others can use this approach for using ASPX RadControls in MVC :o)