Issue with MVC Razor Form inside Tabstrip

[AU]

Hello,

My goal is to put a form inside a tabstrip content window. When I use the code below:

@(Html.Kendo().TabStrip()

.Name("tabstrip1")

.Items(tabstrip =>

{
tabstrip.Add().Text("Customer Information")

   .Content(@<div>

          @using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))

          {

          <input type="button" class="k-button" value="Submit" onclick="checkValues()" />

          }

          </div>

  );

 })

)

What happens is that the form generated by the html helper is not inside the tabstrip's div. Only the Submit button is.

But with the code below:

@(Html.Kendo().TabStrip()

.Name("tabstrip2")

.Items(tabstrip =>

{

    tabstrip.Add().Text("Customer Information")

         .Content(@<div>

                <form action="/Customer/AddData" data-ajax="true" data-ajax-method="post" id="form0" method="post" novalidate="novalidate">

                    <input type="button" class="k-button" value="Submit" onclick="checkValues()" />

                </form>

                </div>

                );

          })

    )

I get my desired effect. The form is inside the tabstrip's div along with the button.

I am just wondering if I'm not really gonna be able to use the html helper to create forms inside the tabstrip's content, or I am just missing something for the html helper to work. Your replies are much appreciated. 

[Vladimir Iliev]

Hi,

In your case you should Render the TabStrip to be able to use an Html helpers inside the TabStrip content:

@{Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("Paris")
                .Selected(true)
                .Content(@<text>
                    @using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))
                    {
                        <div>Content of Form</div>
                    }
                </text>);
        }).Render();
        }

Kind Regards,
Vladimir Iliev
the Telerik team

[AU]

Thanks Vladimir! Even though we decided to just simulate a tabstrip using divs. your solution did work on the problem!

[Lyubomyr]

Works well

[Nikhil]

@{Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("Paris")
                .Selected(true)
                .Content(@<text>
                    @using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))
                    {
                        <div>Content of Form</div>
                    }
                </text>);
                       tabstrip.Add().Text("New York")
                .Selected(true)
                .Content(@<text>
                    @using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))
                    {
                        <div>@Html.Kendo().Editor().Name("Test")</div>
                    }
                </text>);
                       tabstrip.Add().Text("Hyderabad")
                .Selected(true)
                .Content(@<text>
                    @using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))
                    {
                        <div>Content of Form</div>
                    }
                </text>);
        }).Render();
        }

this Code is giving error Unhandled exception at line 32, column 29102 in http://localhost:64098/Scripts/kendo/kendo.all.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'isTypingInProgress' of undefined or null reference
what are thing i am missing ?
Please help 

[Vladimir Iliev]

Hi Nikhil,


I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please open a new support ticket and provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

 

 

[ajith]

Hi Vladimir

   please help me. how can i add button for this, 

@(Html.Kendo().TabStrip()
   .HtmlAttributes(new {Styles.DefaultTagFormat })
   .Name("AssetMasterTab")

   .Items(tabstrip =>
   {
       tabstrip.Add().Text("Asset Details")
           .Selected(true)
           .ContentHtmlAttributes(new { style = "overflow: auto;" })
           .LoadContentFrom("Assetdetails", "Asset");

       tabstrip.Add().Text("Vehicle Details")
         .LoadContentFrom("PopupWindow", "Location");

   })
           )

[Dimo]

Hi Ajith,

Please do not ask the same question in multiple threads. If you want to make additional clarifications on the button-inside-tabstrip discussion, use this thread:

http://www.telerik.com/forums/table-in-tabstrip-going-off-screen-in-ie-using-mvc

Regards,
Dimo
Telerik