Multicolumn razor form within tabstrip

[Drewanz]

 

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

 

 

[Dimitar]

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

[Drewanz]

Many thanks Dimitar, 

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

Regards,

Marcello

[Dimitar]

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