vaadin / vaadin-grid Goto Github PK

Having a

<v-grid style="height: 300px">
  <table>
    <!-- more rows than the default visible row count -->
  </table>
</v-grid>

Sorting a column repeatedly causes the height to be switched between 300px and height that equals the amount of the default visible rows.

Given a <v-grid selected-rows="0"></v-grid>

Removing the attribute from DOM or with JS grid.removeAttribute('selected-rows');

Throws:
Error: Uncaught TypeError: Cannot read property 'split' of null (/Users/Saulis/Dev/components/vaadin-components/vaadin-grid/vaadin-grid.html:40)

Instead, should set grid.selectedRows to [] or undefined

Test located here

<v-grid> 
  <table>
    <colgroup>
      <col header-text="First column">
      <col header-text="Second column">
    </colgroup>
    <tbody>
    </tbody>
  </table>
</v-grid>

Would expect this to render an empty grid with two headers. It renders a horizontal line.

To reproduce:

1. Focus any row
2. Scroll the grid contents to the right
3. Focus indicator scrolls out of view; no way to tell which row is focused

It would be great if v-grid supported selecting a contiguous range of rows via the common shift-click (i.e. select first row in desired range then shift-click last desired row in range) interaction pattern.

Being able to click-drag to progressively select & unselect rows in a similar manner would be handy too, but this is less conventional.

The sort indicator arrows are HUGE on IE11

 <v-grid selection-mode='multi' frozen-columns='1'>
  <table >
    <colgroup>
      <col header-text="Name">
      <col sortable sort-direction="asc" header-text="Value">
    </colgroup>
    <tbody>
      <tr>
        <td>Grid</td>
        <td>10000</td>
      </tr>
      <tr>
        <td>Vaadin X</td>
        <td>999999</td>
      </tr>
    </tbody>
  </table>
</v-grid>

Initializing the grid with the above will create a <v-grid> with selection-mode="single". If you try to manually change the attribute back to multi the component goes totally foobar. Removing any of the three (selection mode multi, frozen columns, or sortable columns) from the equation solves the issues.

Testing with tehapo/project-list-demo, sorting looks like this:

Chrome:

Firefox:

Safari:

I guess using ... would be OK way to go with all browsers.

When using <paper-drawer-panel> to provide a responsive layout, the <v-grid> component is rendered on top of the "background curtain".

Adding transform: translateZ(0); CSS rule to v-grid seems to be one possible solution.

Loading vaadin-components from http://localhost:8888/foobar/bower_components/vaadin-components/vaadin-components.html tries to load http://localhost:8888/foobar/bower_components/bower_components/polymer/polymer.html. Should be http://localhost:8888/foobar/bower_components/polymer/polymer.html

I'm relatively new to polymer so this is probably a newbie question, but how do I change the default color of header to something else than the default blue?

If the horizontal scroll position is > 0, and you toggle the "select all" checkbox, the grid will scroll little by little horizontally all the way to the last column.

While digging through the build, I noticed that there's no easy way to modify the javascript that actually renders the grid component because the file, VaadinGridImport.nocache.js, appears to be minified. I understand the option to build from source using this repository, but if you're marketing this as a "drag-and-drop" web component for HTML5/Javascript, can the build at least include an un-minified file that allows the developer to minify after they've modified?

Given a <v-grid> with display: none

<v-grid style='display: none'>
  <table>
    <col header-text='Name'>
    <tr>
      <td>Grid</td>
    </tr>
   </table>
</v-grid>

Calling

grid.then(function() {
  grid.style.display = 'block';
});

right after loading the component will occasionally result in a race condition with the automatic row height detection and the grid height will be 1px * number of rows.

grid.then should wait for the row height detection so that we could safely modify the display attribute.

As a workaround, setTimeout with 500ms seems to work.

When the selection mode is set to multi and some items are selected, the select all checkbox goes into indeterminate mode. Now when it's clicked, the mode should switch to "all" but instead it just clears the select all -checkbox.
It works the other way around though ("all" -> "multi")

The checkmark in the select all checkbox in the header is offset by 1px and looks different from the body row selection checkboxes:

If a custom renderer places extra elements (e.g. a <div>) inside the grid body cells, scrolling is unexpectedly stopped when the scroll events are caught by those elements (or so it seems).

Adding pointer-events: none; for the custom renderer elements works as a workaround, but that won’t work for custom renderers that require user input.

For example,

given we have a <col max-width="100"> in use, and the styles padding-left: 24px and padding-right: 28px applied to the column in question using td, the actual Column width calculated by the Grid is something else than 100px.

There's a fat chance that the Grid assumes that the padding is 24px on both sides and bases it's calculations on that.

There should be a visible divider between the body rows and the footer rows (similarly, not necessarily identically, as with the header rows).

The row hover effect should be removed from the footer rows.

This is a test, so as we can whether zappier copies issues to trello.

Firstly - thank you for this amazing component!

I have a cell renderer which prints a bunch of links using the tag. I wanted to break to a new line after each link but it didn't work. Is this supported?

This is a test, so as we can whether zappier copies issues to trello.

grid.selectedRows = undefined ends up with

TypeError: Cannot read property 'length' of undefined at _.setSelectedRows (/Users/Saulis/Dev/components/vaadin-components/vaadin-grid/vaadin-grid-import.html:408:149) at v-grid.selectedRows (/Users/Saulis/Dev/components/vaadin-components/vaadin-grid/vaadin-grid.html:320:24)

Instead, I think it should remove the selected-rows attribute from <v-grid>

Test located here

Here's a snippet that causes the error

var g = new VGrid(); // or document.createElement("v-grid");
g.columns = [{headerContent: "foo"}];
g.data.source = ["bar"];
document.body.appendChild(g);

gulp verify:bower downloads a snapshot version, but bower cache isn't automatically cleaned, so the verification tests could be run on an older version.

Gulp should run bower cache clean using zont/gulp-bower plugin.

The current default text renderer for cells (used to provide text-overflow: ellipsis;, added in 228f4e3) is also used if the content of a cell is HTML (when using a light DOM data source).

• In the demo, go to example "9" (Selection)
• Select an element then unselect it: the checkbox color weight is higher than others.
• Now scroll a bit down, you will see other checkboxes with the same style.

Basically the reused row (checkbox) keeps the style state which is wrong.

This need a very special setting to reproduce:

• From the demo, take any Grid example and implement it in a test page.
• Change the grid to be a bit longer. (Optional, to make reproduction easier).
• Open developer tools and inspect the grid, select any DOM let say "tbody". (Dev tools here is to visualize the issue).
• Now make sure that developer tools window is pinned to the bottom of the page, resize it a bit up till it almost reaches the bottom of the grid.

Result: The DOM elements of the grid are getting frequently and rapidly updated and overload the browser.

• Go to this demo: http://vaadin.github.io/components-examples/v-grid/selection.html
• Select a row.
• Click on Select All check box.

The previously selected row stays highlighted.

A bit related:

• Select a row.
• Click outside the grid to loose focus.
• Click on a different row.

The previously selected row makes an un-selection animation, this should originally happen after clicking outside so the animation is too late.

If I have a partially visible grid (which is not focused) in the browser viewport (i.e. the top part visible), a mousedown event on the "select all" checkbox will cause a focus call on the v-grid element, which will make the browsers scroll the element fully into viewport. This makes the subsequent mouseup event miss the "select all" checkbox, and the selection mode is not changed.

The issue was introduced in 7b8c3c5

containerDiv=$0;
grid = document.createElement("v-grid");Polymer.dom(containerDiv).appendChild(grid);
table = document.createElement("table");Polymer.dom(grid).appendChild(table);
// Headers
colgroup = document.createElement("colgroup");Polymer.dom(table).appendChild(colgroup);
col1 = document.createElement("col");col1.setAttribute("header-text","First column");Polymer.dom(colgroup).appendChild(col1);
col2 = document.createElement("col");col2.setAttribute("header-text","Second column");Polymer.dom(colgroup).appendChild(col2);
// Body
tbody = document.createElement("tbody");Polymer.dom(table).appendChild(tbody);
tr = document.createElement("tr");Polymer.dom(tbody).appendChild(tr);
td1 =document.createElement("td");td1.textContent="One";Polymer.dom(tr).appendChild(td1);
td2 =document.createElement("td");td2.textContent="Two";Polymer.dom(tr).appendChild(td2); 

Would expect this to render the grid at http://vaadin.github.io/components-examples/v-grid/columns.html, which is defined in exactly the same way

It does not render anything and class="v-grid-loading" is never removed from <v-grid>

Additionally, if you run the creation step by step, you will get an exception after creating the colgroup

Uncaught TypeError: Array.prototype.slice called on null or undefined
    at getComposedChildren (http://localhost:8888/VAADIN/bower_components/polymer/polymer-mini.html:1109:48)
    at addToComposedParent (http://localhost:8888/VAADIN/bower_components/polymer/polymer-mini.html:1114:16)
    at Object.Polymer.DomApi.DomApi.appendChild (http://localhost:8888/VAADIN/bower_components/polymer/polymer-mini.html:472:1)

Given I have a <v-grid> with 3 rows, and I use cell.row.index:

grid.columns[0].renderer = function(cell) {
  // this works properly and renders value 0,1,2 in the column 
  cell.element.innerHTML = cell.row.index;
  cell.element.addEventListener('click', function() {
  // this however, will print value 2 on the console on every row
  console.log(cell.row.index);
  });
};

It seems that both the cell and cell.row are actually singletons which results in unexpected side-effects.

This snippet will hide the first grid on the page

var ds = [[1]];
var grid = document.querySelector("v-grid");
grid.data.source = ds;
grid.then(function(){
ds.splice(0, 1);
grid.data.clearCache();
});

In vaadin-grid.html the relative path is specified as ../../bower_components/polymer/polymer.html, which doesn’t work when installed from Bower.

The path should be ../../polymer/polymer.html.

This probably depends on the packaging script which also does the CDN and ZIP packages.

I wanted to try out vaadin-grid inside a Chrome packaged app, but VaadinGridImport.nocache.js attempts to do a document.write (not allowed) which throws an exception and causes everything to break.

Also it modifies document.onbeforeunload, etc, which will also not work.

Also why is this file obfuscated? Is there an un-obfuscated version that I can use easily?

Verified in Edge version:
If you are binding to a list of objects like [{color: 'red', type: 'volvo', year: ''}] or arrays like [['red', 'volvo', '']] empty string values causes IE to crash epically. This only happens when developer tools are closed, which makes it near impossible to debug.

When I add a text input element into a cell by creating such element and adding it to cell's element in renderer function, that input element cannot keep its focus. Shortly after (almost instantenously) user clicks the input element, it gets stolen, probably by the row selection. The problem persists in all possible selection-modes.

• Create a grid with checkboxes for row selection.
• Click on "select all" top-left checkbox.
• Uncheck rows individually, one by one. (Do not click on the top-left checkbox).

Result: top-left checkbox stays with a semi-selected state.
Expected: should reset to empty selection state.

Upgrading to Polymer 1.0.9 breaks some features.

Uncaught TypeError: Cannot read property 'dispatchEvent' of undefinedPolymer.Async._atEndOfMicrotask @ polymer.html:1085

Uncaught TypeError: Cannot set property 'renderer' of undefined(anonymous function)

Replacing grid.columns causes selection column to flex also like other columns (takes more space than necessary). Hovering over the grid fixes the width.

Happens at least in Chrome.

By putting flex:1 on a v-grid, it will disappear. the <v-grid> element itself will have the correct size but within it <div id="measure"> and sibling div containing the table will have zero height. The said div will also have the class name v-grid-loading-data which indicates that something went wrong in initialisation.

Hi I'm getting this warning while attempting to add <v-grid> to my project:

Failed to execute 'write' on 'Document': It isn't possible to write into a document
from an asynchronously-loaded external script unless it is explicitly opened.

VaadinGridImport.nocache.js:3

The gird's header is rendered but the content is missing. With inline data everything works fine.

I am testing v-grid inside the polymer-starter-kit and I noticed the v-grid has a z-index of 5 on several regions that cause the grid to fly on top of the polymer-start-kit's headers... Is there some underlying reason for these z-index?

Selectors I found:
.v-grid-tablewrapper.v-grid = 5
.v-grid-scroller.v-grid = 1
.v-grid-header-deco.v-grid = 1

Note: This may be a short coming in Polymer by not defining some clearly delineated z-index boundaries such as Modals should start at: 1000 tooltips: 500 etc etc... but I would hope this could be solved without a basic example the start-kit requiring custom z-indexes for things just to work as expected.

Hey,

thanks a lot for that amazing example. Npm, grunt,... seems to make things so more simple.

Specially the way you implemented the tests. Will do it in my project too!

Thanks a lot for that great sample...
Florian

I have a grid which gets pushed data all the time, something like once per two seconds. It is always the same columns and ten rows of data. if I just call grid.data.source = newArray then the rendering takes 650ms and has deferred calls, which means that it blinks as it first renders a blank version of the grid and then re-adds all the data to it.

The alternative to replacing the array is to manually update the array, here's my code:

if(!grid.data.source){
  grid.data.source = newArray
} else {
  newArray.forEach(function(point, index){
    grid.data.source[index][0] = point[0];
    grid.data.source[index][1] = point[1];
  });
}

With this code instead the time to rerender goes down to 150ms and and there is no timers causing partial renders, thus no blinking

Issues at hand:

1. The user should not need to know tricks like this. It is something that the component itself should handle. grid.data.source = newArray should be just as quick as this workaround.

2. There shouldn't be timers in the rendering, causing partial renders. I wouldn't have minded the issue so much if the grid wouldn't have blinked all the time when the data changes

3. Both 650ms and 150ms is quite long times to just update a ten row grid with two text columns with no extra features turned on. My CPU fan starts ramping up when I'm just viewing the view and that has made me consider switching out to a standard html

   . Something like 10ms for a case like this is something to reach for.

From: https://vaadin.com/forum#!/thread/10447255

<v-grid id="dataGrid" selection-mode="single" frozen-columns="2">
  <table>
    <colgroup>
      <col header-text="#" width="52">
      <col width="60">
      <col header-text="First Name" sortable="true">
      <col header-text="Last Name">
      <col header-text="Email">
      <col header-text="Phone">
    </colgroup>
    <tbody>
      <template id="tableData" is="dom-repeat" items="{{data}}">
        <tr>
          <td>{{index}}</td>
          <td>
            <paper-icon-button icon="delete" on-click="handleTableClick"></paper-icon-button>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.text}}</td>
          <td>{{item.name}}</td>
          <td>{{item.text}}</td>
        </tr>
      </template>
    </tbody>
  </table>
</v-grid>

The problem is most likely the fact that the on-click handler is lost when we copy the light DOM HTML content into the actual final render tree.

As a workaround, add the paper-icon-button using a JavaScript renderer:

<script>
  // TODO get the correct grid reference
  dataGrid.columns[1].renderer = function(cell) {
    // Clear any previous elements (you could also re-use the previous paper-icon-button)
    cell.element.innerHTML = "";

    // Create the paper-icon-button
    var button = document.createElement("paper-icon-button");
    button.setAttribute("icon", "delete");

    // TODO add the correct reference to the click handler
    button.addEventListener("click", handleTableClick);

    // Add it to the cell
    cell.element.appendChild(button);

    // Access the row index
    // NOTE: see issue #21 (https://github.com/vaadin/components/issues/21)
   cell.row.index;
  }
</script>