Grid Toolbar not resizing when hidden columns are shown

15 posts, 1 answers
  1. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 27 Jun 2019 Link to this post

    I have a grid nested within a tab control, with quite a few initially hidden columns.

    This looks fine, until some of the hidden columns are shown, when most of the grid expands along with a horizontal scrollbar being shown. However, the toolbar which has the Export To Excel button in it, remains the original width, giving a messy unprofessional look to the screen.

    How can I get the toolbar to expand along with the rest of the grid?

    I've attached two screenshots, and the Grid code is:-

    <div class="panel-body" style="font-size:0.85em;">
     
           @(Html.Kendo().TabStrip()
           .Name("tab")
           .Items(t =>
           {
           t.Add().Text("Listing")
               .Selected(true)
               .Content(@<text>
     
     
                   @(Html.Kendo().Grid<WLI_Payments.Models.View_Requests_Master>
       ()
       .Name("Grid")
     
       .Columns(col =>
       {
           col.Bound(o => o.RequestID).Title("Ref.");
           col.Bound(o => o.Directorate).Title("Directorate");
           col.Bound(o => o.RechargeToDirectorate).Title("Recharge Directorate").Hidden();
           col.Bound(o => o.RequestingUser).Title("Requester");
           col.Bound(o => o.Site).Title("Site").Hidden();
           col.Bound(o => o.Location).Title("Location").Hidden();
           col.Bound(o => o.CreationDate).Title("Requested").Format("{0:d}").Width(70);
           col.Bound(o => o.SessionDate).Title("Session").Format("{0:d}").Width(70);
           col.Bound(o => o.PlannedStart).Title("Start").Format("{0:t}").Hidden();
           col.Bound(o => o.PlannedEnd).Title("End").Format("{0:t}").Hidden();
           col.Bound(o => o.ReasonType).Title("Reason Type").Hidden();
           col.Bound(o => o.MedicName).Title("Req. Practitioner");
           col.Bound(o => o.SessionType).Title("Type");
           col.Bound(o => o.PointOfDelivery).Title("PoD");
           col.Bound(o => o.ForecastCost).Title("Forecast £").Format("{0:C}").Width(70);
           col.Bound(o => o.ActualCost).Title("Actual £").Format("{0:C}").Hidden().Width(70);
           col.Bound(o => o.PaymentAmount).Title("Payment").Format("{0:C}").Hidden();
           //col.Bound(o => o.ApprovalStatus).Title("Status");
           //col.Bound(o => o.PaymentStatus).Title("Pay Status");
           col.Bound(o => o.ActualMedicName).Title("Actual Practitioner").Hidden();
           col.Bound(o => o.ActualStart).Title("Start").Format("{0:t}").Hidden();
           col.Bound(o => o.ActualEnd).Title("End").Format("{0:t}").Hidden();
           col.Bound(o => o.RequestTypeDescription).Title("Pathway").Filterable(false).Sortable(false);
           col.Bound(o => o.PaymentBatchID).Title("Batch ID").Hidden();
           col.Bound(o => o.ApprovalStatusCode).Title("Status").ClientTemplate("<span title='#=TotalStatusText#' data-toggle='tooltip' data-placement='top' ><img alt='#=TotalStatusText#' src='" + Url.Content("~/Content/Images/") + "#=TotalStatusGlyph#'  /></span>").Sortable(false).Filterable(false).Width(40);
           //col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=showSubmit#'><button onclick='submitRequest(#=RequestID#);' class='btn btn-primary btn-sm'>Submit</button></span>");
     
           col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=QueryButton#'><button class='btn btn-warning btn-xs xssBtn' onclick='manageQuery(#=RequestID#);'><span class='glyphicon glyphicon-warning-sign' data-toggle='tooltip' data-placement='top' title='Manage query'></span></button></span><span style='margin-left:2px;'><button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='View Form' onclick='qwikView(#=RequestID#);'><span class='glyphicon glyphicon-search'></span></button></span>").Sortable(false).Filterable(false).Width(60);
     
           col.Bound(o => o.Backdated).Title("").ClientTemplate("<button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='Admin' onclick='admin(#=RequestID#);'><span class='glyphicon glyphicon-flash'></span></button>").Sortable(false).Filterable(false).Visible((bool)ViewBag.IsAdmin);
     
           col.Bound(o => o.RequestID).Title("").ClientTemplate("#=FinanceQueryButtonCode#").Sortable(false).Filterable(false).Visible((bool)ViewBag.ShowQueryButton);
     
       })
        .ClientDetailTemplateId("subdetailsTemplate")
        .Events(e => e.DataBound("onBound").DataBound("exportUpdate"))
        .ToolBar(toolBar =>
                    toolBar.Custom()
                    .Text("Export To Excel")
                    .HtmlAttributes(new { id = "export" })
                     
                    .Url(Url.Action("ExportData", "Enquiry", new { page = 1, pageSize = "~", filter = "~", sort = "~", directorateID = 0, tStatusCode = 0 }))
                    )
           .DataSource(ds => ds
           .Ajax()
           .Model(m => m.Id(p => p.RequestID))
           .PageSize(15)
           .Read(rd => rd.Action("RD_Requests", "Enquiry").Data("gridFilter")
           )
           )
     
           .Pageable(p => p.Refresh(true))
           .Sortable()
     
           .Filterable()
           .ColumnMenu()
                   )
     
     
     
     
     
     
     
     
               </text>);

     

    Thanks

  2. Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 01 Jul 2019 Link to this post

    Hi Andrew,

    The issue occurs since scrolling is not enabled and the columns overflow the element of the grid.

    A possible solution would be to enable scrolling and specify a with to each column.

    e.g.

    // columns
     
           col.Bound(o => o.RequestID).Title("Ref.").Width(50);
           col.Bound(o => o.Directorate).Title("Directorate").Width(50);
     
    // enable scrolling
     
    .Scrollable();


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 01 Jul 2019 in reply to Georgi Link to this post

    Thanks for this. It works.

    However, even if I set the height to be auto, a  vertical scroll bar is shown, and setting a fixed height, looks strange when only a few records are being shown. Is there anyway to remove the vertical scrollbar?

     

  4. Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 03 Jul 2019 Link to this post

    Hello Andrew,

    You could omit enabling scrolling and simply set the table-layout of the table to fixed. This way the grid will still obey the column widths.

    #Grid > table  {
        table-layout: fixed;
    }

    Have in mind that you still have to specify the widths of the columns.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 03 Jul 2019 in reply to Georgi Link to this post

    Georgi,

    I've tried this (in the Razor syntax):- .TableHtmlAttributes(new {style= "table-layout:fixed;" }) , and the original issue occurs - the panel at the top of the grid with the Export To Excel button, doesn't resize as the grid expands.

    Can this panel be restyled to just show a button without the surrounding panel instead?

  6. Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 03 Jul 2019 Link to this post

    Hello Andrew,

    The grid is constructed of two tables - one for the header and another for the content. Using the TableHtmlAttributes you are setting the table-layout only to the table of the content but you need to do it for both grids.

    Could you please test to set the table-layout with CSS as shown in my previous post?

    e.g.

    #Grid > table  {
        table-layout: fixed;
    }

    It seems to work as expected on my end.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 03 Jul 2019 in reply to Georgi Link to this post

    Sorry, I've tried it with the css as well:-

    <style>
     
     #Grid > table  {
     
        table-layout: fixed;
     
    }
     
         
     
    </style>

    and the top part of the grid refuses to resize (screenshot attached).

     

  8. Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 05 Jul 2019 Link to this post

    Hi Andrew,

    I have tested the same on my end but the columns don't seem to overflow once the table-layout is set to fixed.

    e.g.



    I am attaching the sample I used for testing. Could you please examine it and let me know what I am missing?


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 08 Jul 2019 in reply to Georgi Link to this post

    Georgi, I've had a look at your sample application - and you haven't set widths on the columns.

    I just set every column to 150, and could replicate my problem (screenshot attached).

     

     

  10. Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 10 Jul 2019 Link to this post

    Hi Andrew,

    Thanks for the clarification.

    Currently the table is exceeding the initial width of the grid as the table is obeying the column widths, thus the toolbar is misaligned. A possible solution would be to either omit the widths setting and the column widths will be even.

    Another solution would be to enable scrolling and remove the vertical scroll.

    e.g.

    // adjust height within dataBound event handler
     
        function onDataBound() {
            var grid = this;
            $('#grid .k-grid-content').height(ROW_HEIGHT * grid.dataSource.pageSize()).removeAttr('style');
        }
     
     
    // remove vertical scrolling
     
        #grid .k-grid-content {
            overflow-y:hidden;
        }
     
        #grid .k-grid-header {
            padding-right:0 !important;
        }

    For your convenience I am attaching a modified version of the sample.

    I hope this helps.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 10 Jul 2019 in reply to Georgi Link to this post

    Sorry Georgi,

    The css doesn't seem to remove the vertical scrollbar of the grid, both in my project, and your sample.

    Andrew

     

  12. Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 11 Jul 2019 Link to this post

    Hi Andrew,

    The grid actually does not have a scroll bar. Currently due to the large height of the grid, its element overflows the height of the tabstrip. Therefore a scroll appears on the tabstrip. You could remove this scroll by increasing the height of the tabstrip.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 16 Jul 2019 in reply to Georgi Link to this post

    OK,  I turned off scrolling, and tried the css. The vertical scrollbars are no longer appearing, but the original issue of the Excel export box not expanding with the rest of the grid (and the grid footer) remains.

  14. Answer
    Georgi
    Admin
    Georgi avatar
    696 posts

    Posted 18 Jul 2019 Link to this post

    Hi Andrew,

    If you disable scrolling it is expected that the columns overflow. The solution I suggested is to enable scrolling but resize the height of the grid so that vertical scrolling is not necessary. You could achieve that by enabling scrolling and resizing the grid within its DataBound event handler.

    e.g.

    // enable scrolling
     
    .Scrollable()
     
    // resize grid and the tab of the tabstrip
     
        function onDataBound() {
            var grid = $('#grid').data('kendoGrid');
            var tabstrip = $('#tab').data('kendoTabstrip');
            var initialHeight = $('#grid .k-grid-content').height();
     
            $('#grid .k-grid-content').height(ROW_HEIGHT * grid.dataSource.pageSize()).removeAttr('style');
            $('#grid').height($('#grid').height() + $('#grid .k-grid-content').height() - initialHeight);
            this.wrapper.parent().height($('#grid').height() + 10);
        }
     
    // css
     
        #grid .k-grid-content {
            overflow-y:hidden;
        }
     
        #grid .k-grid-header {
            padding-right:0 !important;
        }

    Please note that I have included logic for increasing also the height of the tabstrip to avoid the scroll. I am attaching a modified version of the sample.

    I hope this helps.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  15. AP
    AP avatar
    258 posts
    Member since:
    Apr 2010

    Posted 18 Jul 2019 in reply to Georgi Link to this post

    Thanks, That's working now
Back to Top