Our blazing fast Grid component built with pure JavaScript


Post by henrikbackman »

After our upgrade to 1.1.0 X's has appeared above the filter fields. When inspecting it, it has the class "b-clearable" among others. I can't seem to find any documentation about this that helps me to get rid of it. Is there something I'm missing?

(I found one mention about "clearable" but I can't seem to get rid of the X using that setting)
Attachments
Skärmavbild 2018-11-14 kl. 10.17.29.png
Skärmavbild 2018-11-14 kl. 10.17.29.png (33.14 KiB) Viewed 3195 times

Post by mats »

Which browser / OS?

Post by henrikbackman »

Chrome 70, MacOS Mojave (10.14)

Post by johan.isaksson »

Arrangement of elements inside the headers have changed for 1.1. I would guess that you are either using the old css bundle or that it is a caching issue. Please check bundle and do a hard reload of the page
Best regards,
Johan Isaksson

Post by henrikbackman »

I've taken the minified CSS-files from the bundle. No change in the styles for the X. I did see a change in the styling of the actual input fields when I switched the bundle yesterday. I've also cleared the cache but no change.

I should add that we are using grid.material.min.css and grid.light.min.css

Post by johan.isaksson »

Does our filterbar demo look as it should for you? Can you modify it to recreate what you are seeing? Need some kind of testcase to debug
Best regards,
Johan Isaksson

Post by henrikbackman »

Yeah, your example works. But I've compared the code in your example to the code generated on our site and it's very different.

Your column header code:
<div class="b-grid-header b-level-0 b-depth-0 b-grid-header-resizable b-filter-bar-enabled b-sortable" data-column="name" data-id="name1" tabindex="0" style="min-width: 60px; width: 150px;">
  <div class="b-grid-header-text">
    <div class="b-grid-header-text-content">Name</div>
  </div>
  <div class="b-grid-header-children">
    <div class="b-filter-bar-field b-widget b-field b-textfield b-outer b-overlay-scrollbar b-chrome b-empty" id="b-textfield-7">
      <div class="b-field-inner" data-owner-cmp="b-textfield-7">
        <input type="text" class="b-filter-bar-field-input" placeholder="" name="name" id="b-textfield-7_input" data-owner-cmp="b-textfield-7">
        <div class="b-icon b-align-end b-icon-remove b-widget b-fieldtrigger" id="b-fieldtrigger-8"></div>
      </div>
    </div>
  </div>
  <div class="b-grid-header-resize-handle"></div>
</div>
Our code:
<div class="b-grid-header b-level-0 b-depth-0 b-grid-header-resizable b-filter-bar-enabled b-sortable b-sort b-asc" data-column="column_1" data-id="column_11" tabindex="0" style="flex: 1 1 0%; min-width: 60px;">
  <div class="b-grid-header-text">Namn</div>
  <div class="b-grid-header-resize-handle"></div>
  <div class="b-inner-right b-filter-bar-field b-widget b-field b-textfield b-overlay-scrollbar b-chrome b-empty" id="b-textfield-3">
    <div class="b-widget-inner" data-owner-cmp="b-textfield-3">
      <i class="b-icon b-icon-remove b-clearable b-icon-hidden" data-icon="b-icon b-icon-remove b-clearable" data-index="0" data-owner-cmp="b-textfield-3"></i>
      <input type="text" class="b-filter-bar-field-input" placeholder="Sök" name="column_1" id="" data-owner-cmp="b-textfield-3">
    </div>
  </div>
</div>

Post by johan.isaksson »

That looks like old headers template, prior to 1.1.0. I would try replacing js bundle again
Best regards,
Johan Isaksson

Post by henrikbackman »

It seems that we used the old "grid.no-poly.umd.min.js" file that wasn't included in the 1.1.0 build. When I use "grid.umd.min.js" it's working as expected. Sorry for the fuzz!

Post Reply