Resizing columns in the Angular Kendo data grid results in misaligned headers when searching with a new remote data source

This question may seem similar to others regarding alignment, but it specifically pertains to alignment when new data is set in the datasource. I'm unsure if I have the grid setup correctly or if there's a better workaround available.

Upon resizing the Kendo data grid, the columns and header appear aligned (with some issues in Chrome). However, once I resize a column and search for new data, I notice that the columns and headers are misaligned.

I have tried using both Firefox and Chrome, and encountered the same issue on both browsers.

While this problem shares similarities with other alignment issues, those focus on resizing rather than loading new data.

Kendo Grid header and data row columns are not aligned

Bug in kendo ui grid lrt css in chrome

Here is an example of the issue I'm experiencing.
http://jsfiddle.net/teisaacs21w/6k5km7nb/

  1. resize a column and hit search
  2. notice the grid and columns headers are misaligned

I have tried setting up the grid in various ways, but still encounter this issue. In the provided fiddle, data needs to be searched first before being loaded. I have also tried pre-loading the datasource by defining transport in the options object.

Thus far, I haven't found a way to prevent this issue from occurring.

After examining the HTML, I noticed that when new data is loaded, the header loses the styling applied by Kenodo upon column resize.

I devised a workaround which seems to work well in the fiddle, but sometimes the headers behave erratically in my application when adopting this approach.

`workaround`

http://jsfiddle.net/teisaacs21w/a7cfv4g6/

I'd appreciate hearing from anyone who has faced a similar issue and can advise whether it's related to my setup or offer a better solution?

javascriptangularjskendo-uikendo-gridangular-kendo

Answer №1

After some trial and error, I believe I have found a solution to improve the behavior of column resizing in Kendo grids on Chrome. Check out this example fiddle

I had to incorporate a CSS workaround from this thread about a bug in kendo ui grid lrt css in chrome. For the search issue, I implemented the method mentioned above. There are still some minor painting issues when resizing columns with large datasets, but overall the improvement is significant.

.k-grid-content {
  overflow-y: auto;
}

dataBound: function(e) {
  //column header fix, ensure that header maintains the same style applied by Kendo on resize
  var headerObj = $(".k-grid-header-wrap table");
  var gridObj = $(".k-grid-content table");
  var gridObjStyle = gridObj.attr('style');

  if (gridObjStyle) {
    headerObj.attr('style', gridObjStyle);
  }
}

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

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

connection.query( 'SELECT DeskName FROM desks WHERE stat = ?',["Booked"], function(err, rows){ if(err) { throw err; }else{ try{ var dataToParse = new Array(); dataToParse = rows; res.render('workspaces.html',{parsedArray : JS ...

javascriptjsonnode.js

Choosing Between ng-app And data-ng-app Directives in AngularJS

When using AngularJS, the ng-app directive found in the document is used to define the root element for auto-bootstrapping as an application. In some applications, it is instead used as data-ng-app. Is there a difference between these two declarations? I ...

angularjsangularjs-directivebootstrapping

What steps can I take to generate a JSON array with this unique format?

The data I received from my angular form is in the array format: [{"name":"Rose","number":"+919224512555"},{"name":"smith","number":"+91975555224"}]. The data represents a dynamic table with columns for name and number. I need to convert the array above i ...

javascriptangular

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

javascripthtmlcsstarget

Navigating to a Website Based on the Selected Option in a Drop-Down Menu

I am currently working on a form that includes options for selecting a city and social networking site. The goal is to collect information about both the selected city and social network so that it can be stored for future reference. Upon submitting the fo ...

javascripthtmlcss

Guide on incorporating a specific service function into a directive using AngularJS

I have recently added a new function in the localcacheService and now I want to incorporate it into a directive. LocalCacheServiceClear.prototype.isAvailable = function() { this.cache.clear(); } The directive I am working with is as follows: (fu ...

angularjsangularjs-directiveangularjs-service

Using the v-for directive in Vue.js to loop through an array and display

Looking at the image provided, I am trying to access the content. I attempted to do so using element.comments.content, but it did not seem to work as expected. Here is the snippet of code: <div class="fil-actualites-container"> <div cl ...

javascriptvue.jsvue-cli

Using .getJSON and .each in Javascript can sometimes be inconsistent in their functionality

I encountered a perplexing issue that has left me stumped. I am dynamically populating data into an html <select></select>. However, upon refreshing the page, I noticed that sometimes the data loads successfully, but most of the time it does n ...

javascriptjqueryhtml

Adjusting canvas context position after resizing

I've been experimenting with using a canvas as a texture in three.js. Since three.js requires textures to have dimensions that are powers of two, I initially set the canvas width and height to [512, 512]. However, I want the final canvas to have non-p ...

javascripthtmlcanvasthree.js

Incorporating City Capital Icons onto a Leaflet Map with JavaScript Integration

I've set up a layer on my leaflet map and have a capitalCities.js file that contains data for markers I want to add to the map. Here's a snippet from the capitalCities file: let capitals = [{"CountryName":"Somaliland","Ca ...

javascriptajaxleafletleaflet.markercluster

Steps for creating a monochromatic blinking background for notifications

Upon receiving a notification, I retrieve it from the database and activate the blinking effect on the notification box. However, I would like to stop the blinking once the user clicks to view the notification and maintain a single color display. For examp ...

javascriptjqueryajax

Tips for real-time content updates on a server-side rendered express application

My social media app, built using Express, Pug, and JavaScript for server-side rendering, is fully functional. However, whenever I comment on a post, I need to manually reload the page to see the new comment displayed. I'm exploring ways to dynamicall ...

javascriptnode.jsmongodbexpresspug

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

While attempting a synchronous ajax request during the beforeunload event, I encountered an error stating that synchronous ajax requests are not supported in chromium browsers during page unload events. I am seeking alternatives for making a synchronous a ...

javascriptajaxasp.net-mvcgoogle-chromemicrosoft-edge

Dynamically transcluding multiple elements in Angular

Angular 1.5 introduces the option to multi-transclude. An interesting feature would be the ability to transclude a variable number of items into a directive and specify their names and positions at a later stage (for example, in the link/compile functions ...

javascriptangularjsangularjs-directiveangularjs-ng-transclude

The list in Jquery UI Autocomplete is not updating correctly

Currently, I am using jQuery UI Autocomplete in conjunction with WebSockets to fetch and display a list of options. Each time a keystroke is detected on the input field (.keyup()), a call is made to retrieve the list. However, I have encountered an issue w ...

javascriptajaxjquery-uiautocompletewebsocket

The data retrieval process with angularjs is not functioning properly

While working on my web application project, I encountered an issue with integrating angularjs. I have a table named city which was created using entityframework and database first. To address this, I included the angularjs nuget package in my project. Ad ...

c#angularjsasp.net-mvcasp.net-web-api

Modifying a JavaScript object causes changes to another object within the same array

Encountering an issue where player[0].pHand is being modified while updating player[1].pHand (where pHand is an array containing objects). for(var j = 0; j < 2; j++){ console.log(cardDeck[deckCounter]); player[0].pHand[j] = cardDeck[ ...

javascriptarraysloopsobject

Leveraging NestJs Libraries within Your Nx Monorepo Main Application

I am currently part of a collaborative Nx monorepo workspace. The setup of the workspace looks something like this: https://i.stack.imgur.com/zenPw.png Within the structure, the api functions as a NestJS application while the data-access-scripts-execute ...

javascriptreactjsangularmonoreponrwl-nx

Ways to delete anchor tag text through the use of Javascript

Is there a way to eliminate the text and link from an anchor tag using javascript or Jquery? <a id="ancID" href="Javascript:void(0)">Here insert a dynamic text </a> I am looking for a solution to remove the content between the anchor tags. ...

javascriptjqueryasp.net

Struggling to reflect changes in the database using the updated value in the localStorage

I have a table where the td is set to contenteditable. To update the value of the td in my database, I decided to use localStorage. When the save button is clicked, the inputted value in the td will be saved to localStorage and retrieved via AJAX to replac ...

javascriptphpsqlajaxlocal-storage