Multicolumn razor form within tabstrip

4 posts, 0 answers
  1. Drewanz
    Drewanz avatar
    8 posts
    Member since:
    Jan 2009

    Posted 07 Aug Link to this post

     

    Hi,
    Trying to build a multicolumn form within a tabstrip using div and bootstrap grid tags. Even after reading article about Bootstrap and Kendo, (http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout), the layout seems not to work as expected like in:

    01.<div class="row">
    02.    <div class="col-sm-6 col-md-6">
    03.        <div class="form-group">
    04.            Name
    05.            @(Html.Kendo().TextBoxFor(m => m.Nome).HtmlAttributes(new { @class = "k-textbox" }))
    06.        </div>
    07.        <div class="form-group">
    08.            Last Change
    09.            @(Html.Kendo().TextBoxFor(m => m.ModifiedOn).HtmlAttributes(new { @class = "k-textbox" }))
    10.        </div>
    11.    </div>
    12.    <div class="col-sm-6 col-md-6">
    13.        <div class="form-group">
    14.            Status
    15.            @(Html.Kendo().TextBoxFor(m => m.Status).HtmlAttributes(new { @class = "k-textbox" }))
    16.        </div>
    17.        <div class="form-group">
    18.            Workflow
    19.            @(Html.Kendo().TextBoxFor(m => m.WorkflowStatus).HtmlAttributes(new { @class = "k-textbox" }))
    20.        </div>
    21.    </div>
    22.</div>

     

    The expected result would be a form with two columns and fields (2x) on both sides. The code is in a partial view and it is invoked on the tabstrip as follows:

    01.@using (Html.BeginForm())
    02.{
    03.    @Html.AntiForgeryToken()
    04.     
    05.    @(Html.Kendo().TabStrip()
    06.    .Name("customerRecord")
    07.    .Items(tab =>
    08.    {
    09.        tab.Add().Text("Personal Data")
    10.        .Selected(true)
    11.        .Content(m => Html.Partial("_PersonalData", m));
    12.    })
    13.    )
    14.}

     

    Is this the way to have it done or not?

    Regards,

    Marcello

     

     

  2. Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 09 Aug Link to this post

    Hello,

    I am attaching an MVC solution, where a similar scenario to the one described is demonstrated (Kendo UI TabStrip with multi-column Bootstrap form ).

    In order to achieve the desired result, the default box-model that comes with the Kendo themes (content-box) has to be replaced with border-box but only for the Bootstrap elements that need it. You can find additional information in the Twitter Bootstrap integration article.

    In case you are using the Kendo Scaffolder for generating your projects, you should know that there is an existing issue in the current version, which references the box-sizing-fixes.css before the Kendo styles in _Layout.cshtml. As stated in the integration article above, the fix should be applied after the Bootstrap and Kendo styles (demonstrated in the attached solution). The issue is logged in the official GitHub repository and you can start tracking the progress that we make on it from item #3325.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Drewanz
    Drewanz avatar
    8 posts
    Member since:
    Jan 2009

    Posted 09 Aug in reply to Dimitar Link to this post

    Many thanks Dimitar, 

    I've tried the approach described in the article, however it didn't fit well.

    Regards,

    Marcello

  4. Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 10 Aug Link to this post

    Hello Marcello,

    Did you get a chance to inspect the solution, which I have sent with my previous reply? With it, the columns in the TabStrip pane are properly distributed. You can also check the result on my end in the following short screencast.

    In case the solution does not achieve what you are after and the issue continues to persist, can you provide additional clarifications on what behavior are you expecting? 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top