Multi-Column Layout in Popup Editor

[Patrick]

This is probably a really ignorant question but I'm trying to make my Popup Editor Template 4 columns wide vs the default 2.  I have looked at this --> custom-popup-editor and this -->Forum Search

 

Ideally I could use Bootstrap to setup that template however I wish but I cannot get the very basic `<div class="row"> <div class="col-md-4">` to work.  I am currently looking at this --> Kendo and Bootstrap Docs to try and make that work.

 

At the end of the day I just need to be able to make my Popup Editor 4 columns wide(i.e. label - editor - label - editor)  Don't care how I get there.

 

This is my Editor Template, _Staff.cshtml, and below that is the Index.cshtml that has the Grid that calls it.

@model MyApp.Models.StaffViewModel

    @Html.HiddenFor(m => m.StaffID)

    <div class="row">
        <div class="col-lg-2">
            @Html.LabelFor(m => m.GPEmployeeID)
        </div>
        <div class="col-lg-4">
            @Html.EditorFor(m => m.GPEmployeeID)
            @Html.ValidationMessageFor(m => m.GPEmployeeID)
        </div>

        <div class="col-lg-2">
            @Html.LabelFor(m => m.FirstName)
        </div>
        <div class="col-lg-4">
            @Html.EditorFor(m => m.FirstName)
            @Html.ValidationMessageFor(m => m.FirstName)
        </div>
    </div>

 

@(Html.Kendo().Grid<MyApp.Models.StaffViewModel>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.GPEmployeeID);
          columns.Bound(c => c.UserID);
          columns.Bound(c => c.LastName);
          columns.Bound(c => c.FirstName);
          columns.ForeignKey(c => c.PrimaryCountyID,(System.Collections.IEnumerable)ViewData["Counties"],"CountyID","CountyName");
          columns.Bound(c => c.WorkPhone);
          columns.Bound(c => c.WorkEmail);
          columns.ForeignKey(c => c.OfficeID,(System.Collections.IEnumerable)ViewData["Offices"],"OfficeID","OfficeName");
          columns.ForeignKey(c => c.StaffTypeID,(System.Collections.IEnumerable)ViewData["StaffTypes"],"StaffTypeID","StaffType");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(110);
      })
      .ToolBar(toolbar => {
          toolbar.Create();
      })
      .ColumnMenu()
      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Staff"))
      .Pageable()
      .Groupable()
      .Sortable(sortable => {
          sortable.SortMode(GridSortMode.SingleColumn);
      })
      .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
      .Scrollable(scrollable => scrollable.Enabled(false))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
              model.Id(p => p.StaffID);
              model.Field(p => p.StaffID).Editable(false);
          })
          .Read(read => read.Action("tblStaffExtendeds_Read", "TStaff"))
          .Create(create => create.Action("tblStaffExtendeds_Create", "TStaff"))
          .Update(update => update.Action("tblStaffExtendeds_Update", "TStaff"))
          .Destroy(destroy => destroy.Action("tblStaffExtendeds_Destroy", "TStaff"))

      )
)

[Dimiter Madjarov]

Hello Patrick,

As stated in one of the threads from forum search and in the linked documentation page, in this case you should force the box-sizing property of the bootstrap elements to border-box. Additionally there is a default width set for the editor container in the popup, which I assume will have to be removed in this case. Here is a small example that demonstrates this in action.

Regards,
Dimiter Madjarov
Telerik

[Patrick]

Thanks Dimiter, I guess I saw that Documentation and just didn't put two and two together.  

I tried what the Doc suggest's, I created a new css with the provide "code" and placed it in the correct order.  

Bootstrap, Kendo, Custom.

I'm wondering if there's another step?  While I was able to get my columns working that way some of the styling is now "off". Primarily the navbar's height is out of proportion and covers the top part of the page now.

So, is there another step that isn't documented or is this just something I'll need to tweak around on my own to make look right?

 

[Dimiter Madjarov]

Hello Patrick,

The box-sizing property is applied to the Grid edit popup only. Applying it to other elements too, may cause unexpected behavior as the one from the screenshot.

Regards,
Dimiter Madjarov
Telerik

[Patrick]

Dimiter,

Are you saying that the documentation,http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout, is not accurate?  

I've done exactly what it says so I'm curious what I need to do next then if the referenced docs are incomplete?

I've gone through and added .navbar and all it's "children" to the css file for having it's `box-sizing` set to `border-box` as well but the part in the begginning is causing an issue still.  The `:before, :after` part is still forcing a portion of the `navbar` to `content-box`

[Dimiter Madjarov]

Hello Patrick,

The documentation page handles the general case - resets everything on the page to the default box model and applies the border-box model only to the bootstrap elements. This may not be the case for your application. If this is not needed, you could include only the CSS styles from the provided dojo example.

Regards,
Dimiter Madjarov
Telerik

[Patrick]

First, thanks for all the help on this.  

Second, perhaps I was asking the wrong question.  

All I really want is to style my popup editor grid.  Specifically with 4 columns vs the default 2.  

How can I do that without Bootstrap?  

[Dimiter Madjarov]

Hello Patrick,

It is not clear what is the exact issue that you are experiencing with specifying four columns in the popup editor. The only Kendo UI specific thing about the task should be to again set the following style.
E.g.

.k-edit-form-container {
  width: auto;
}

Regards,
Dimiter Madjarov
Telerik

[Patrick]

That would be how to do it with Bootstrap, correct?  You are still explaining how I would enable KendoUI to allow Bootstrap to work in a Popup Editor screen.

I am now asking how I make the Popup Editor layout 4 columns wide(i.e. "label":"editor" "label":"editor") without using Bootstrap at all.  

My reason is simple, I was only using Bootstrap because that's how I knew how to do it, outside of KendoUI, but I cannot get it to work with your information.

So, NO bootstrap, just KendoUI css, how would I style it for 4 columns?

 

Thanks and sorry for the confusion!

[Dimiter Madjarov]

Hello Patrick,

I am aware that no Bootstrap is used now. The suggested style should be applied in both cases, because there is a default width of 400px applied to the container. The rest of the code is not directly related to Kendo UI, because it is same as when styling any container in multi-column layout.

Regards,
Dimiter Madjarov
Telerik