Last Column Resizing css issue

[VP]

See attached.

When resizing the last column the css doesn't fill up the complete last column. I have tried all options. Can you please suggest a way to fix this issue.

Here's a snippet of my code:

Html.Kendo().Grid<XModel>().Name("gridName")
                .Events(clientEvents =>
                  clientEvents.Change("$(document).data('sectionContext').grids.get('QualificationsGrid').select"))
                .Columns(column =>
                    {
                        column.Bound(lobj =>lobj.a).Title("A").Width(80);
                        column.Bound(lobj =>lobj.b).Title("B").Width(100);
                        column.Bound(lobj =>lobj.c).Title("C").Width(120);
                        column.Bound(lobj =>lobj.d).Title("D").Width(100);
                        column.Bound(lobj =>lobj.e).Title("E").Width(100);
                        column.Bound(lobj =>lobj.f).Title("F");
                    })
                .Sortable(s=> s.AllowUnsort(false))
                .DataSource(dataSource =>dataSource.Ajax()…
                    …
                    …          
            .Resizable(resizing =>resizing.Columns(true))
            .Sortable()
            .AutoBind(false)
            .Scrollable(scrolling =>scrolling.Height("auto"))
            .Selectable().ToString()

[Dimo]

Hello Vishal,

The observed behavior is expected when Grid scrolling is enabled - the sum of all column widths can exceed the Grid width (leading to a horizontal scrollbar) or be smaller than the Grid width (leading to blank space).

Regards,
Dimo
Telerik

[VP]

Hi Dimo,

I have not specified any width's for the Grid so should it not auto fill the last column and not leave it blank as its doing right now. May be I am missing something here.

If you see my code, I have not specified the width of the last column of the Grid, as well as there's no Grid width specified. Can you please suggest a way, if any, to have scrolling enabled and not have the white space come up for the last column (this only happens for this column) when resized?

Thank You.

[Dimo]

Hi Vishal,

When the Grid has no width, it expands to 100%, but does not shrink to eliminate white space in the data area.

When the last column has no width, it expands to fill all remaining space to the right edge of the Grid, but as soon as you resize it, it gains an explicit pixel width, so resizing to the left will create empty space.

The only way to ensure that the last column always reaches the right edge of the Grid is to check the columns' total width on each column resize and readjust column widths manually if needed. The following example shows how to do that.

http://jsfiddle.net/dimodi/gr2t3/2/

Regards,
Dimo
Telerik

[VP]

Thanks Dimo.

[Sandeep]

What if we resize last column itself ?
We need grid to be adjusted to total available width automatically.
It means if i resize one column other columns should adjust themselves so no white space left.

[Dimo]

Hello,

>> if i resize one column other columns should adjust themselves so no white space left.

This is the behavior by design when Grid scrolling is disabled. Otherwise, the mentioned workaround needs to be implemented. It works for all columns being resized, including the last one.

Regards,
Dimo
Telerik

[Pankaj]

Hello Dimo ,

                    But solution provided by you is not working for IE 11 . its only work for google chrome even if re-size window  column alignment not good in chrome.

Can you please provide me solution because my client is looking for it . 

 

 

[Dimo]

Hello Pankaj,

The jsFiddle example is from early 2013 and uses a very old Kendo UI version, which does not support IE11.

http://docs.telerik.com/kendo-ui/browsers-support#important-notes

Regards,
Dimo
Telerik

 

[Pankaj]

i have taken my version on march 2015 . for your information 2014.3.1411 is folder name.

but it is also not supporting IE11 last column re-size solution provided by you.

[Dimo]

Hello Pankaj,

Please make sure that you have upgraded Kendo UI correctly. Also, in case there is some misunderstanding about what the discussed example does, I will explain once again - the example shows how to expand the last master Grid column after column resizing, if the sum of all master column widths is less than the width of the detail table. A similar (but simpler) implementation can be used to expand the last column when no hierarchy is used. In that case the master table width should be compared to the Grid width, and not to the detail table width.

Here is a video of the updated jsFiddle using the latest official Kendo UI version, and testing with IE11:

http://screencast.com/t/TpZhH1fSFg

You will notice that when the adjustLastColumn function is not executed and a column is shrinked too much, a misalignment occurs. This is expected, because the detail table becomes wider than the sum of all master columns, which is not allowed, as explained in the documentation:

http://docs.telerik.com/kendo-ui/web/grid/appearance#width

Regards,
Dimo
Telerik

[Pankaj]

hello Dimo,

                   all the file reference I have taken same . and i am not using hierarchy grid . I want that if last column will re-size towards left it white space should not come . even if there is only one data it is behaving good.

 

Regards

                 

[Dimo]

Hi Pankaj,

Please inspect the following updated example and use it to achieve the desired behavior.

http://jsfiddle.net/dimodi/gr2t3/51/

Regards,
Dimo
Telerik

[Kiran]

Hello,

http://jsfiddle.net/dimodi/gr2t3/51/

Can't we provide this solution inside the library like, common to every table. I'm using kendo tables every where in my project on behalf of this solution i need to write every kendo grid option.

Is this possible to do in library side?

 

Thanks,

[Preslav]

Hi Kiran,

Adding this workaround to the library is not doable because it depends on events that should be attached to the Grid by the developer. What I could suggest is using the same approach as Dimo, and saving the common configurations in a separate variable. After that, for every Grid, extend these configurations:

var masterConfig = {
    //...
}
//...
 $("#grid1").kendoGrid($.extend(masterConfig, {
//...

 

Regards,
Preslav
Progress Telerik

[Christy]

Can you please re-post the below fiddle??

http://jsfiddle.net/dimodi/gr2t3/51/

 

Its 404 now.

[Dimo]

Hello everyone,

I am posting another technique to expand the last column after resizing. It is simpler than the previous one, because it does not require new column width calculations:

<!DOCTYPE html>
<html>
  <head>
    <title>Grid column resizing with a blank column</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.bootstrap-v4.min.css" />
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>

  </head>
  <body>

    <p>Resize a column, so that a blank space appears on the right side of the Grid.</p>

    <div id="grid"></div>

    <script>

      $(function() {
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            schema: {
              model: {
                fields: {
                  OrderID: { type: "number" },
                  ShipCountry: { type: "string" },
                  ShipCity: { type: "string" },
                  ShipName: { type: "string" },
                  OrderDate: { type: "date" },
                  ShippedDate: { type: "date" }
                }
              }
            },
            pageSize: 10
          },
          sortable: true,
          resizable: true,
          pageable: true,
          columnResize: function (e) {

            // what is thead and tbody: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
            var grid = e.sender,
                gridHeaderTable = grid.thead.parent(),
                gridBodyTable = grid.tbody.parent();

            // what is wrapper: https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/fields/wrapper
            // what is scrollbar(): https://docs.telerik.com/kendo-ui/api/javascript/kendo/fields/support
            if (gridBodyTable.width() < grid.wrapper.width() - kendo.support.scrollbar()) {

              // remove the width style from the last VISIBLE column's col element
              gridHeaderTable.find("> colgroup > col").last().width("");
              gridBodyTable.find("> colgroup > col").last().width("");

              // remove the width property from the last VISIBLE column's object
              // https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns
              grid.columns[grid.columns.length - 1].width = "";

              // remove the Grid tables' pixel width
              gridHeaderTable.width("");
              gridBodyTable.width("");
            }

          },
          columns: [{
            field: "OrderID",
            title: "ID",
            width: 80
          }, {
            field: "OrderDate",
            title: "Order Date",
            width: 120,
            format: "{0:MM/dd/yyyy}"
          }, {
            field: "ShipCity",
            title: "Ship City",
            minResizableWidth: 100
          }, {
            field: "ShipName",
            title: "Ship Name"
          }]
        });

      });
    </script>

  </body>
</html>

Regards,
Dimo
Progress Telerik