This is a migrated thread and some comments may be shown as answers.

Last Column Resizing css issue

16 Answers 461 Views
Grid
This is a migrated thread and some comments may be shown as answers.
VP
Top achievements
Rank 1
VP asked on 28 May 2013, 06:05 PM
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()

16 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 May 2013, 09:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
VP
Top achievements
Rank 1
answered on 29 May 2013, 02:37 PM
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.
0
Accepted
Dimo
Telerik team
answered on 30 May 2013, 07:46 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
VP
Top achievements
Rank 1
answered on 30 May 2013, 02:23 PM
Thanks Dimo.
0
Sandeep
Top achievements
Rank 1
answered on 18 Jul 2013, 09:26 AM
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.
0
Dimo
Telerik team
answered on 18 Jul 2013, 10:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pankaj
Top achievements
Rank 1
Veteran
answered on 12 May 2015, 02:22 PM

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 . 

 

 

0
Dimo
Telerik team
answered on 13 May 2015, 10:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pankaj
Top achievements
Rank 1
Veteran
answered on 14 May 2015, 03:22 PM

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.

0
Dimo
Telerik team
answered on 18 May 2015, 07:41 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pankaj
Top achievements
Rank 1
Veteran
answered on 18 May 2015, 01:38 PM

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

                 

0
Dimo
Telerik team
answered on 20 May 2015, 10:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kiran
Top achievements
Rank 1
answered on 30 May 2018, 11:40 AM

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,

0
Preslav
Telerik team
answered on 01 Jun 2018, 08:00 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Christy
Top achievements
Rank 1
answered on 11 Jul 2019, 06:06 AM

Can you please re-post the below fiddle??

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

 

Its 404 now.

0
Dimo
Telerik team
answered on 11 Jul 2019, 08:15 AM
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>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
 
 
  </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: {
            },
            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 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
              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
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.
Tags
Grid
Asked by
VP
Top achievements
Rank 1
Answers by
Dimo
Telerik team
VP
Top achievements
Rank 1
Sandeep
Top achievements
Rank 1
Pankaj
Top achievements
Rank 1
Veteran
Kiran
Top achievements
Rank 1
Preslav
Telerik team
Christy
Top achievements
Rank 1
Share this question
or