[Solved] Starting to convert ASP.NET application to MVC

[Sean]

Hi all,

This is going to be a long process, I can tell! Starting off with a simple question..

I am trying to recreate the functionality of this basic RadSplitter in MVC.

<telerik:RadSplitter ID="RadSplitter2" runat="server" BorderSize="0" Height="100%" HeightOffset="155" Skin="Web20" Width="100%" PanesBorderSize="0">

This was my best guess, but the complex properties are wrong:

<% Html.Telerik().Splitter().Name("RadSplitter2")
       .HtmlAttributes(new { style = "height: 100%; width: 100%; bordersize: 0px; heightoffset: 155px; panesbordersize: 0px" })
       .Render();
%>

How do I set bordersize, height offset, and pane bordersize for an MVC control? Skin is inherited from the Master Page.

Thanks

[Dimo]

Hello Sean,

You are trying to use bordersize, heightoffset and panesbordersize as CSS properties, but such do not exist. I am afraid the MVC Splitter does not have identical properties as the ASP.NET AJAX Splitter.

You can control the border size by applying CSS styles to the Splitter and the panes - similarly to your current approach, but the correct CSS property is border-width.

HeightOffset can be achieved by placing the MVC Splitter in some 100% high <div> and calculating/changing its height with Javascript - you can try doing that even without a Splitter inside first.

All the best,
Dimo
the Telerik team

[Sean]

Hello Dimo,

Thank you for your assistance! I apologize for being new to the MVC way of doing things.. might have some stupidly simple questions. :)

• Does Telerik's MVC Splitter support dynamically adding panes? If so, how? Do I need to use jQuery to append more panes to the object?
• What is the proper way to implement an AJAX Control's cssClass property on Telerik MVC controls? 
• I would like to add a sliding zone with sliding panes to an MVC Splitter. It does not seem that these have been implemented in MVC yet, however. I may be able to use the MVC Menu for my purposes, but I need to know if it is able to support holding an RAD AJAX RadListBox? If so, could you please give me an example of how to integrate these two. If not, could you please show me how to integrad a RAD AJAX SlidingZone with a RAD MVC Pane?

<% Html.Telerik().Splitter().Name("RadSplitterPersistantInvisibleBase")
    .HtmlAttributes(new { style = "height: 100%; width: 100%; border-width: 0px;" })
    .Panes( vPanes =>
        {
            vPanes.Add()
                .Scrollable(false)
                .HtmlAttributes(new { style = "border-width: 0px;" })
                .Content(() =>
                    {%>
                        <%= Html.Telerik().Splitter().Name("RadSplitterPersistant")
                            .HtmlAttributes(new { style = "height: 100%; width: 100%; border-width: 0px;" })
                            .Panes( wPanes =>
                                {
                                    wPanes.Add()
                                        .Scrollable(false)
                                        .HtmlAttributes( new { style = "width: 20px" } )
                                        .Content( () =>
                                            {%>
                                                <%= Html.Telerik().RadSlidingZone() ???
                                }
                        %>
                    <%});
        })
    .Render(); %>

Thanks

Sean

In addition, I'm playing around with some stuff and I noticed this weird behavior. The string literal "Test Data" always displays properly on my web page, but the text "TEST!" inside of the Menu seems to not be visible after loading. There are no errors on the page and I am able to see all of the elements when I inspect the HTML mark-up. If I spam-refresh the web page I can see the menu flickering in and out, but when the page is fully loaded it is not visible. Any idea why this would occur? I am using a clean project under Telerik MVC2

I tried using the <% and %> tags as shown in http://demos.telerik.com/aspnet-mvc/splitter/nestingcomponents but I was being told that a parenthesis was expected when my formatting was correct. As such, I have left them out in order to render the control -- but it flickers, perhaps that is a side-effect of not using the tags?

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    Test Data
            <% Html.Telerik().Splitter()
                .Name("RadSplitterPersistantInvisibleBase")
                .HtmlAttributes(new { style = "height: 100%; width: 100%; border-width: 0px;" })
                .Panes( vPanes =>
                    {
                        vPanes.Add()
                            .Scrollable(false)
                            .HtmlAttributes(new { style = "border-width: 0px;" })
                            .Content(() =>
                                {
                                    Html.Telerik().Splitter()
                                        .Name("RadSplitterPersistant")
                                        .HtmlAttributes(new { style = "height: 100%; width: 100%; border-width: 0px;" })
                                        .Panes( wPanes =>
                                            {
                                                wPanes.Add()
                                                    .Content(() =>
                                                        {
                                                            Html.Telerik().Menu()
                                                                .Name("RadSlidingZone1")
                                                                .OpenOnClick(true)
                                                                .Orientation(MenuOrientation.Vertical)
                                                                .Items( menu =>
                                                                    menu.Add()
                                                                        .Text("TEST!"))
                                                                .Render();
                                                        });
                                            })
                                        .Render();
                                });

                    })
                .Render(); %>
</asp:Content>

[Dimo]

Hello Sean,

Here is some information on your questions:

1. Does Telerik's MVC Splitter support dynamically adding panes?

If you mean adding panes client-side via the API - no. If you want to have a variable number of panes, you can have some IF statements in the Splitter declaration and check values passed from the controller.

// ...........
.Panes(hPanes =>
{
    if ( /* condition */  )
    {
        hPanes.Add()
            .Size("150px")
            .Content(() =>
            {%>
            pane content here
        <%});
    }
})
//.........

In this way you can add or remove panes, depending on some values submitted from the client.


2. What is the proper way to implement an AJAX Control's cssClass property on Telerik MVC controls?

.HtmlAttributes( new { @class = "string" } )

The @ sign is needed because class is a reserved word in C#. Other HTML attributes don't need it.


3. RadListBox inside an MVC project

Here is a sample project, which shows how to use RadListBox in MVC:

http://www.telerik.com/community/forums/aspnet-mvc/general/listbox-for-mvc.aspx

It is not possible to use RadSlidingZone separately, as this is not a standalone control.

Generally, here is some documentation about integrating RadControls in an MVC project:

http://www.telerik.com/help/aspnet-ajax/mvc-radcontrols-for-aspnet-mvc-overview.html


4. the text "TEST!" inside of the Menu seems to not be visible after loading

This is because you have specified 100% height to the Splitter, but its parent has probably no explicit height. This is a CSS standard requirement - elements with percentage height require parents with explicit height.


Best wishes,
Dimo
the Telerik team