Automatically adjust Kendo Grid column widths, with the option to exclude a specific column from

Seeking a solution to dynamically adjust column widths in a Kendo Grid using column(index = n) or column(headingText = 'Address').

For automatically fitting column widths, the following approach can be used:


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

            <script>
                $(document).ready(function() {
                    // Kendo Grid initialization code
                });
            </script>
        </div>
        <style>
            #grid>table
            {
                table-layout: fixed;
            }
        </style>
    

To link a fiddle with the Kendo Grid implementation:

Click here to view the fiddle

To make the grid more dynamic, avoiding hardcoded column widths, utilize the following approach:


        columns: [
            { field: "name", width: "200px" },
            { field: "tel", width: "10%" },
            { field: "age" }
        ],
    

To adjust last column width dynamically, eliminate empty space in the grid:


        // JavaScript function to adjust last column width dynamically
    

Endeavoring to find a more generic example demonstrating how to utilize column(index = n) or column(headingText = 'Address') for adjusting column widths.

Answer №1

Victory! Spreading the knowledge:

function updateGrid(grid, excludeField) {
    var position = -1;
    console.log('updateGrid: grid.columns.length = ' + grid.columns.length);
    var columns = grid.options.columns;
    // locate address column and prevent automatic resizing to maintain grid page fill
    for (var i = 0; i < grid.columns.length; i++) {
        if (0 < columns.length) {
            console.log('updateGrid: field = ' + columns[i].field);
            if (columns[i].field == excludeField) {
                position = i;
            } else {
                grid.autoFitColumn(i);
            }
        } else {
            grid.autoFitColumn(i);
        }
        console.log('updateGrid: i = ' + i);
    }
    console.log('updateGrid: position = ' + position);
}

Props to Jayesh Goyani for this gem:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unable to parse JSON field value due to an unexpected OBJECT_START

Currently in my coding project, I am utilizing node and mongoose to update a Watson rank and access the database. My goal is to insert multiple documents into the collection. While I can successfully add a single document, I encounter issues when creating ...

Error 404: Node.js and Express encountering issues with POST request to '/webhook' endpoint

https://i.sstatic.net/CTDCv.pnghttps://i.sstatic.net/KjPeC.pngI've encountered a peculiar issue where I keep receiving a 404 error specifically when sending a post request to '/webhook'. This error is persistent even though the rest of my po ...

Is there a way to bring in data from a .d.ts file into a .js file that shares its name?

I am in the process of writing JavaScript code and I want to ensure type safety using TypeScript with JSDoc. Since it's more convenient to define types in TypeScript, my intention was to place the type definitions in a .d.ts file alongside my .js fil ...

Is there a way to remove a dynamically rendered component from a list?

Whenever I click a button, the same component is dynamically rendered on top of the list. But now, I need to implement a feature where users can delete any component from the list by clicking a cancel button associated with each component. Here's my ...

Send the Children prop to the React Memo component

Currently, I am in the stage of enhancing a set of React SFC components by utilizing React.memo. The majority of these components have children and the project incorporates TypeScript. I had a notion that memo components do not support children when I en ...

Switching left navigation in material-ui when the user interacts within the application boundary

I am currently implementing a toggle feature in my AppBar to display the LeftNav. I have successfully set it up to close when the toggle is clicked again. However, I wish to mimic the behavior of most left nav bars where clicking anywhere outside of the ...

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

Vue Subroutes within nested components do not automatically load

My application features a sidebar that I want to utilize to load the Patient view by default when accessing patient/:id. This should also trigger the loading of the PatientDashboard sub-view. Within the Patient view component, there is a router-view that ...

Efficiently accessing and displaying nested models in AngularJS

Currently, I am in the process of developing a website that involves numerous relational links between data. For instance, users have the ability to create bookings, which will include a booker and a bookee, as well as an array of messages that can be asso ...

utilizing async/await without the need for babel-polyfill

Here is the code I am working with: @action async login(payload){ try { this.loginLoading = true const data = await request('/admin/login', { method: 'post', data: payload }) this.logined = ...

Searching with Sequelize for an indirect relationship: How can it be done?

Within my database, there exists a relationship between Users and Roles. A User can have multiple Roles assigned to them. These Roles are connected to Activities in such a way that they can be associated with many different activities. This association all ...

Loading Webfonts Asynchronously in NextJS Using Webfontloader

I am currently working on a NextJS app where I am using webfontloader to load fonts dynamically. function load() { const WebFont = require("webfontloader"); WebFont.load({ google: { families: fonts } }); } However, I ha ...

JavaScript conflicts will arise due to the introduction of Yammer Embed on September 30th, 2014

Is anyone else encountering problems with Yammer embed causing JavaScript errors today? Our various applications across different technologies (SharePoint, IBM, etc) have been functioning normally for months, but this morning we are suddenly seeing a sig ...

The integration of a Bootstrap modal within the side bar's rendering

Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...

Retrieve a specific child element by clicking on a custom control on the map

I have a container element with three child spans. Using JQuery, I can determine which child was clicked when the container is clicked by utilizing the following function: $('.unitContainer').on('click','span',function(){ ...

Tips on adjusting the label size of a radar chart in chart.js

My radar chart labels are appearing skewed and messed up on mobile devices, so I decided to scale them using the following code within ComponentDidMount(): const plugins = [{ beforeDraw: function(c) { var chartHeight = c.chart.height; c ...

JavaScript - Error: The '}' token was unexpected

Every time I attempt to move <div id="test">this should go down</div> downwards using: <div onclick="(".test").slideDown(800);">close it</div> I encounter an error whenever I click 'close it' SyntaxError: Unexpected to ...

What is the main object used in a module in Node.js for global execution?

Node.js operates on the concept of local scope for each module, meaning variables defined within a module do not automatically become global unless explicitly exported. One question that arises is where a variable declared in a module file belongs in term ...

How can I utilize the JQuery GetJSON function to retrieve HTML content from an external webpage?

Imagine you're attempting a jQuery ajax request like this: $.ajax({ ... url: http://other-website.com ... }) You probably know that due to the same-origin policy, this request will fail because the URL is for an external domain. But the ...

Node.js in action with XmlHttpRequest

I'm having trouble making an XMLHttpRequest call from my client-side JavaScript to my Node server. It seems like nothing is happening and I'm a bit new to this concept. Here's the JavaScript function I've written: function sendTokenToS ...