charlespockert / aurelia-bs-grid Goto Github PK

Grid should support a table less output where elements of user specification will be used in place.

This will allow a simple repeatable control with column support

Hi Charles,
Things are looking better very time I get a chance to checkout the latest. It seems that your demo emulates server side paging. As a veteran of angular girds (ng-grid, ng-table, angular-grid and kendo-ui) all supporting client side paging, I'd like to know if this is something in the works.
TIA
John

Can cause issues when using filters when there are no rows as it replaces the whole grid meaning you can't un-filter

The footer should show total pages etc

Could make updates deletes hit a set of callbacks which pass the data/splices which you then pass on to your back end returning a promise if you want the grid to auto refresh?

Look at what feels comfortable

Per today's framework updates, there are changes to how plugins are handled.

Unhandled promise rejection TypeError: aurelia.globalizeResources is not a function
    at a.configure (http://localhost:9010/jspm_packages/github/charlespockert/[email protected]/index.js:7:13)
    at http://localhost:9010/jspm_packages/github/aurelia/[email protected]/aurelia-framework.js:34:34

aurelia.globalizeResources is now aurelia.use.globalResources

http://aurelia.io/docs.html#the-aurelia-object

There may be additional changes necessary that could be tacked onto this issue.

Need to apply same css on header/filter row as on content rows.

Might have to enforce use of bootstrap column width styles? Consider ways to do with minimal js

Allow in-row editing where any changes are made directly to the bound data source.

From User @liuyuanhuo on gitter:

I use CharlesPockert/aurelia-grid's pager custom element, use pager.ref="pager" to reference pager.
when call 'this.pager.update' in attached method, got error: Uncaught TypeError: Cannot read property 'update' of undefined, and pager not work right on first load.
after page loaded, It works right, no error.
in UserList.cshtml

<pager num-to-show.bind="10" pager.ref="pager" on-page-changed.call="setPage($event)"></pager>

in ListViewModel.js

export class ListViewModel {
  router;
  route;
  service;
  entities = [];
  isLoading = false;

  pageParams = {
      pageSizeList :app.consts.grid.defaultPageSizes,
      pageSize : app.consts.grid.defaultPageSize,

      pageIndex : 1,
      totalRecordCount:0,

      sorting: null,
      filterText: null
  };

  constructor(route, router, service) {
    this.route = route;
    this.router = router;
    this.service = service;
  }

  updatePager() {
      this.pager.update(Number(this.pageParams.pageIndex), Number(this.pageParams.pageSize), Number(this.pageParams.totalRecordCount));
  }

  load() {
      this.isLoading = true;
      var that = this;
      this.service.getPage(
          that.pageParams,
          function(result) {
              that.entities = result.entities;
              that.pageParams.totalRecordCount = result.totalRecordCount;
              that.isLoading = false;

              // Update the pager - maybe the grid options should contain an update callback instead of reffing the
              // pager into the current VM?
              that.updatePager();
          },
          function() {
              that.isLoading = false;
          }
      );
  }

  loadFirstPage() {
      this.pageParams.pageIndex =1;
      this.load();
  }

  setPage(index) {
        this.pageParams.pageIndex = index;
        this.load();
  }

  open(id) {
    this.router.navigate(this.route + '/' + id);
  }


  activate() {
      this.loadFirstPage();
  }
}

@charlespockert , is this a problem ?

Hi,
I've got it working (hip hip...) but had to copy your img folder from aurelia-grid because of the folowing error:
bullet_arrow_down.png:1 GET http://localhost:9000/img/bullet_arrow_down.png 404 (Not Found)
bullet_arrow_up.png:1 GET http://localhost:9000/img/bullet_arrow_up.png 404 (Not Found)
John

if you use an expression like

${ 'table.column.condition'|t}

for heading in a element it will display that as a literal and not the bound/compiled expression. Makes it difficult for supporting i18n labels/headers.

Hi,

Sorting is not working in demo
when you sort first on id and then on name for example

Greetings

e.g. Not Found: http://localhost:9000/dist/pager/pager.js when trying to use the grid

Hi,

1. Just tried to install demo on win8 /node 0.12.6/ npm 3.1.0
2. Initially the following npm repos missing
   Error: Cannot find module 'filesize'
   Error: Cannot find module 'gzip-size'
3. After installing repos I get following on gulp watch
   Error in plugin 'gulp-changed'
   Message:
   EPERM, stat 'c:\Aurelia\aurelia-bs-grid-demo\dist\animation-main.js'
   Details:
   errno: -4048
   code: EPERM
   path: c:\Aurelia\aurelia-bs-grid-demo\dist\animation-main.js
   fileName: c:\Aurelia\aurelia-bs-grid-demo\src\animation-main.js
   [07:41:25] Plumber found unhandled error:
   SyntaxError in plugin 'gulp-babel'
   Message:
   c:/Aurelia/aurelia-bs-grid-demo/src/animation-main.js: Unexpected token (6:4)

events.js:85
throw er; // Unhandled 'error' event
^
Error: EPERM, stat 'c:\Aurelia\aurelia-bs-grid-demo\dist\app.html'
at Error (native)

c:\Aurelia\aurelia-bs-grid-demo>
4) I have your plugin working within the forked skeleton annimation and with the exception of a different build process don't see what issue might be,
Thanks,
John

With SVG preferably. Don't want to have any dependencies so not FontAwesome

Need to ensure that we handle certain scenarios like defaulting the header template etc

i'm using dogfalo/materialize but had problems before utilizing the 2 frameworks.
problably css classes that have the same names.

question would be:
can i inject the materlialize css classes in your source code without changing your code in some way..

materlialize uses:

<div class="row" >
      <div class="col m6 s12 ">

The grid doesn't have a scroll area. Kendo grid for example won't fill a screen (it requires a height specifying)

This should also fix the "Loader" overlay. This overlays the entire grid so that if the grid is huge the loader may appear off page (you still get the overlay you just can't see the loading bar).

IE can be a pain....

It should be more explicit - at the moment you can sort of mix server and client paging/sorting etc

If it was more explicit it would be easier to understand what you as the consumer needed to provide (it's also confusing me!!)

The pager should allow you to jump in bunches, allow you to jump to the start/end of the table etc.

Wrong paths used - need to work out how to do this - anyone know?!

Could use SVG instead...

Virtualized grid scroll area, Aurelia team are working on a feature that should make this work out the box

Hi,

1. In your demo I only see the annimation for the following route
   http://charlespockert.github.io/aurelia-bs-grid-demo/#/mutation
2. When running locally none of routes show the annimation
   John

Need to prevent the initial pager load from kicking off a grid refresh

Something like:

<grid show-totals="true"...

Users provide an expression on how to aggregate maybe?

Or should it popup in a menu maybe?

Hi Charles,
I'm trying to use bs-grid but not quite sure how to implement the plugin into my skeleton-nav project. I've successfully incorporated https://github.com/PWKad/aurelia-bs-modal as a plugin and looking for similar guidelines.
Thanks,
John

Hi,
I know you plan to remove dependency on bs but I'm pretty close to having the grid work with materialize (except for paging)

<grid grid-height.bind="640" read.call="getComments($event)" grid.ref="grid" server-paging.bind="false" server-sorting.bind="false"
      selectable.bind="true" page-size="10" no-rows-message="Nothing to see here!" show-jump-buttons.bind="false"
      show-first-last-buttons.bind="false"
      show-column-filters.bind="true">

        <grid-row>
          <grid-col heading="BCSNumber" field="BCSNumber" class="col m 1">${ $item.BCSNumber }</grid-col>
          <grid-col heading="Address" field="Address" class="col m 2">${ $item.Address }</grid-col>

          <grid-col heading="City" field="City" class="col m 8">${ $item.City }</grid-col>
        </grid-row>
      </grid>

having a problem with changing the paging control

  <div class="container">
    <div class="row">
      <div class="input-field col s12 m6">
        <select value.bind="page" materialize="select">
          <option value.bind="10">Items per page</option>
                <!-- <option repeat.for="page of pages" value.bind="grid.page-size">${page}</option> -->
                <option repeat.for="page of pages" value.bind="grid.pageSize">${page}</option>
        </select>
        <label for="Page">Page Count</label>
      </div>
   </div>

User should be able to specify a filter row template which allows a user to provide a different control for filtering (dropdown etc)

This should somehow call back to the grid to let it know the filter has changed (maybe just bind to the filterValue field on the column which can be tracked for changes by the grid)

Could cater for headers/footers, total rows (though I will try to support this anyway), custom filter rows etc

Something like:

<grid>
    <grid-static-row>... some html markup ...</grid-static-row>
    <grid-row>
        ... columns ....
    </grid-row>
    <grid-static-row>... some html markup ...</grid-static-row>
</grid>

Looking at Kendo grid looks like they do this by creating separate tables for the header/content/footer. Should be easily do-able!

See if this alleviates the need to use during to numeric conversion in the vm code

This would be passed to the read method as part of the options:

e.g. the options object would look like

{
  filter: [{ col: "column1", filter: "filter value" }, ...]
  paging: { ... },
  sorting: { ... }
}

If you set page-size="20000" it will still use 10. Unless you debounce a call to a bound variable in your view-model on attached(). example

export class MyTableVM {
         pageSize = 50;

         attached( ) {
              _.debounce(function(self) {
                 self.pageSize = self.pageSize * 1000;
              })(this);
          }
}

The subsequent html looks like

<grid page-size.bind="pageSize">
...
</grid>

in grid.js the page size is being read as 10 and only changes if your change that value after the fact (so your demos work but it not configurable in template)

This could break grid functionality for users that have customised conventions. Make all configuration explicit

Paging appears to be set even when using pageable="false" on the element. However this is a string yet the code in grid.js assumes a Boolean. Such that

if (this.pageable && !this.serverPaging) tempData = this.applyPage(tempData);

will evalulate to true along with the if.bind statement if you specify the pageable parameter. You need to either convert the pageable to be string based or use a different parameter for input vs. bind - see my image below of my app (I am using my own paging toolbar to control content which is why I want it off)

With pageable="false" in the HTML with your grid (this is a different mode where I was hoping to show the grid)

User should be able to drag a column into a header area similar to other grid implementations which will group the data by the chosen column

Consumer can also programmatically group or apply via configuration

hi, CharlesPockert
Could you add support for the table's header th template?may be grid-header, like grid-row,grid-col,

Not sure how useful this would be but the pager needs work anyway.

aurelia-bs-grid would probably need to be dependent on it (or at least some sort of pager control). Could pull all of the update stuff into an interface mechanism and allow a pager to plug-in using .call syntax

Usage:

<grid page-sizes="[10,25,50,*]">

star represents "ALL"

Something like

<table grid>
    <tr>
        <th>Hello</th>
        <th>World</th>
    </tr>
    <tr>
        <td>123</td>
        <td>456</td>
    </tr>
</table>

Could even pass the setup to the grid and allow it to work with remote data etc.