Issue with MVC Razor Form inside Tabstrip

8 posts, 1 answers
  1. AU
    AU avatar
    5 posts
    Member since:
    Oct 2012

    Posted 05 Oct 2012 Link to this post

    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. 
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 09 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AU
    AU avatar
    5 posts
    Member since:
    Oct 2012

    Posted 09 Oct 2012 Link to this post

    Thanks Vladimir! Even though we decided to just simulate a tabstrip using divs. your solution did work on the problem!
  5. Lyubomyr
    Lyubomyr avatar
    1 posts
    Member since:
    Jul 2014

    Posted 17 Nov 2014 Link to this post

    Works well
  6. Nikhil
    Nikhil avatar
    1 posts
    Member since:
    Jan 2015

    Posted 16 Jan 2015 in reply to Vladimir Iliev Link to this post


    @{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 


  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 19 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 18 May 2015 in reply to Vladimir Iliev Link to this post

    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");
     
       })
               )

  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready