Multi-Column Layout in Popup Editor

10 posts, 0 answers
  1. Patrick
    Patrick avatar
    7 posts
    Member since:
    Aug 2015

    Posted 16 Mar Link to this post

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

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 17 Mar Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Patrick
    Patrick avatar
    7 posts
    Member since:
    Aug 2015

    Posted 19 Mar in reply to Dimiter Madjarov Link to this post

    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?

     

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 22 Mar Link to this post

    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
    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
  6. Patrick
    Patrick avatar
    7 posts
    Member since:
    Aug 2015

    Posted 23 Mar in reply to Dimiter Madjarov Link to this post

    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`

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 23 Mar Link to this post

    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
    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
  8. Patrick
    Patrick avatar
    7 posts
    Member since:
    Aug 2015

    Posted 31 Mar in reply to Dimiter Madjarov Link to this post

    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?  

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 01 Apr Link to this post

    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
    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
  10. Patrick
    Patrick avatar
    7 posts
    Member since:
    Aug 2015

    Posted 01 Apr in reply to Dimiter Madjarov Link to this post

    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!

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 04 Apr Link to this post

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