Kendo Grid Automatically Fit Column Width except for Specific Column

Question

I am looking for a way to let column(index = n) (by index number) or column(headingText = 'Address') (by column name) fill the gap on my kendo grid.

I know how to automatically fit column widths for a Kendo Grid:

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

    <script>
      $(document).ready(function() {
        var grid = $("#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: 15
          },
          height: 550,
          sortable: true,
          resizable: true,
          pageable: true,
          dataBound: function() {
            for (var i = 0; i < this.columns.length; i++) {
              this.autoFitColumn(i);
            }
          },
          columns: [{
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "ShipCountry",
            title: "Ship Country"
          },
          {
            field: "ShipCity",
            title: "Ship City"
          },
          {
            field: "ShipName",
            title: "Ship Name"
          },
          {
            field: "ShippedDate",
            title: "Shipped Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "OrderID",
            title: "ID"
          }, {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "ShipCountry",
            title: "Ship Country"
          },
          {
            field: "ShipCity",
            title: "Ship City"
          },
          {
            field: "ShipName",
            title: "Ship Name"
          },
          {
            field: "ShippedDate",
            title: "Shipped Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "OrderID",
            title: "ID"
          }
         ]
        });
      });
    </script>
  </div>
  <style>
    #grid>table
    {
      table-layout: fixed;
    }
  </style>

I made a fiddle, but I don't know how to link in kendo grid:

https://jsfiddle.net/jp2code/p6cu5r29/2/

I could HARD CODE the column widths:

columns: [
     { field: "name", width: "200px" },
     { field: "tel", width: "10%" }, // this will set width in % , good for responsive site
     { field: "age" } // this will auto set the width of the content 
   ],

But I'd like the grid to be more dynamic.

I can remove the empty space in a grid by leaving the autoFitColumn off of the last column:

<style>
    .k-grid {
        width: 700px;
    }
</style>

<div id="grid1"></div>

<script>
    function getMasterColumnsWidth(tbl) {
        var result = 0;
        tbl.children("colgroup").find("col").not(":last").each(function (idx, element) {
            result += parseInt($(element).outerWidth() || 0, 10);
        });

        return result;
    }

    function adjustLastColumn() {
        var grid = $("#grid1").data("kendoGrid");
        var contentDiv = grid.wrapper.children(".k-grid-content");
        var masterHeaderTable = grid.thead.parent();
        var masterBodyTable = contentDiv.children("table");
        var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();

        masterHeaderTable.width("");
        masterBodyTable.width("");

        var headerWidth = getMasterColumnsWidth(masterHeaderTable),
            lastHeaderColElement = grid.thead.parent().find("col").last(),
            lastDataColElement = grid.tbody.parent().children("colgroup").find("col").last(),
            delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);

        if (delta > 0) {
            delta = Math.abs(delta);
            lastHeaderColElement.width(delta);
            lastDataColElement.width(delta);
        } else {
            lastHeaderColElement.width(0);
            lastDataColElement.width(0);
        }

        contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
        contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
    }


    $("#grid1").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true
        },
        height: 430,
        pageable: true,
        resizable: true,
        columnResize: adjustLastColumn,
        dataBound: adjustLastColumn,
        columns: [{
            field: "FirstName",
            title: "First Name",
            width: "100px"
        }, {
            field: "LastName",
            title: "Last Name",
            width: "150px"
        }, {
            field: "Country",
            width: "100px"
        }, {
            field: "City",
            width: "100px"
        }, {
            field: "Title",
            width: "200px"
        }, {
            template: "&nbsp;"
        }]
    });
</script>

But, I don't want to always leave the last column super wide to fill the page.

I am looking for a more generic example showing how to let column(index = n) or column(headingText = 'Address') be the column that fills the gap.

score 0 · Accepted Answer · answered Feb 05 '21 at 16:31

I did it! Sharing with others:

function refreshGridColumns(grid, skipField) {
    var index = -1;
    console.log('refreshGridColumns: grid.columns.length = ' + grid.columns.length);
    var columns = grid.options.columns;
    // find address column and do not autofit it so that the grid fills the page
    for (var i = 0; i < grid.columns.length; i++) {
        if (0 < columns.length) {
            console.log('refreshGridColumns: field = ' + columns[i].field);
            if (columns[i].field == skipField) { // columns[i].title -- You can also use title property here but for this you have to assign title for all columns
                index = i;
            } else {
                grid.autoFitColumn(i);
            }
        } else {
            grid.autoFitColumn(i);
        }
        console.log('refreshGridColumns: i = ' + i);
    }
    console.log('refreshGridColumns: index = ' + index);
}

Kudos to Jayesh Goyani for this answer:

https://stackoverflow.com/a/34349747/153923

Kendo Grid Automatically Fit Column Width except for Specific Column

1 Answers1

Linked