[Solved] Form Html Extension problem

[Varghese]

I created a html extension similar to Configure (htmlextension under Extensions folder in examples). I put the code below the telerik grid expecting the form will be created below the grid. But I see that the form is created just below the body tag and before the grid.

Is this a bug or the form is created always at the top just below the body tag and before any other telerik controls are created?

[Georgi Tunev]

Hello Varghese,

Could you please paste the implementation here?


Greetings,
Georgi Tunev
the Telerik team

[Varghese]

Layout:

        <section id="main">

            @(Html.Telerik().Splitter().Name("MainForm").Panes(panes =>

            {

                panes.Add()

                    .Size("200px")

                    .MaxSize("200px")

                    .Content(

                        @: @Html.Partial("_a")

                    );

 

                panes.Add()

                    .MinSize("760px")

                    .Content(

                        @: @RenderSection("RightPanel", true)

                    );

            }))

        </section>

View: 

 

@section RightPanel

{

    @(Html.Telerik().Grid<CartIntelligence.Models.Order>()

    .Name("Grid")

    .Columns(columns =>

        {

            columns.Bound(o => o.Number);

            columns.Bound(o => o.Customer);

        })

    .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetCustomers", "Customers"))

    .Pageable())

 

    @{using (Html.Configurator("Customer Configurator").PostTo("_GetCustomers", "Customers").Begin()) {

 

        @(Html.Telerik().DatePicker()

            .Name("valuePicker")

            .Value(DateTime.Today)

        )

        <button class="t-button t-state-default">Select</button>

        }

    }

}

       
The end result is that eventhough I have the 'form' generated at the bottom of the page after the grid, it gets created even before the splitter which is in the layout page. In addition, the 'button' tag inside the form is displayed below the grid.

Here is the html output:

<P>       <section
id="main"><BR>
<form action="/Reports/Orders/_GetCustomers?theme=vista" class="configurator"
method="post"><div><BR> <h3
class="legend"><BR>  Customer Configurator<BR> </h3><BR></div></form><div
class="t-widget t-splitter-horizontal" id="MainForm"><div class="t-pane
t-scrollable">
<BR><ul class="t-widget t-panelbar t-reset" id="LeftPanelBar"><li
...<BR></div><div class="t-pane
t-scrollable">
<BR>    <div class="t-widget t-grid" id="Grid"><table
cellspacing="0">...</div></P>
<P><div class="t-widget t-datepicker"><div
class="t-picker-wrap"><input class="t-input" id="valuePicker"
name="valuePicker" type="text" value="9/8/2011" /><span
class="t-select"><span class="t-icon t-icon-calendar" title="Open the
calendar">Open the
calendar</span></span></div></div>
<button class="t-button t-state-default">Select</button></P>
<P></div></div><BR>
</section><BR></P>
<P><BR> </P>

[Varghese]

I'm noticing the problem with any html form extensions. The 'form' tag is pushed to the top of the page and leave the code inside the form tag to wherever it is.

[Atanas Korchev]

Hello Varghese,

 Forms in MVC are directly output to the underlying response - you cannot use them like @(Html.BeginForm) you need @ { Html.BeginForm(); } instead.

You can try this:

 

@{ Html.Telerik().Splitter().Name("MainForm").Panes(panes =>

            {

                panes.Add()

                    .Size("200px")

                    .MaxSize("200px")

                    .Content(

                        @: @Html.Partial("_a")

                    );

 

                panes.Add()

                    .MinSize("760px")

                    .Content(

                        @: @RenderSection("RightPanel", true)

                    );

            })
            .Render();
}

All Telerik extensions which contain Html.BeginForm need to be displayed like this - using @{ } block and calling the Render() method.

Regards,
Atanas Korchev
the Telerik team

[Varghese]

Thank you for your commitment to support your users. That solved my problem.

I think the behavior should be the same irrespective of @( or @{ is being used. The chained methods (fluent methods) make the call as a single statement. So, it should work in @(. The code block is not needed. I agree that a code block is necessary if there is more than one line of code.