Grid Toolbar not resizing when hidden columns are shown

[AP]

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

[Georgi]

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

[AP]

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?

 

[Georgi]

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

[AP]

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?

[Georgi]

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

[AP]

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

 

[Georgi]

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

[AP]

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

 

 

[Georgi]

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

[AP]

Sorry Georgi,

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

Andrew

 

[Georgi]

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

[AP]

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.

[Georgi]

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

[AP]

Thanks, That's working now