This is a migrated thread and some comments may be shown as answers.

Multicolumn razor form within tabstrip

3 Answers 177 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Drewanz
Top achievements
Rank 1
Veteran
Drewanz asked on 07 Aug 2017, 02:59 PM

 

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

 

 

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 09 Aug 2017, 11:56 AM
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.
0
Drewanz
Top achievements
Rank 1
Veteran
answered on 10 Aug 2017, 02:15 AM

Many thanks Dimitar, 

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

Regards,

Marcello

0
Dimitar
Telerik team
answered on 10 Aug 2017, 10:28 AM
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.
Tags
TabStrip
Asked by
Drewanz
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
Drewanz
Top achievements
Rank 1
Veteran
Share this question
or