charlespockert / aurelia-bs-grid Goto Github PK
View Code? Open in Web Editor NEWAurelia and Bootstrap powered datagrid control
License: MIT License
Aurelia and Bootstrap powered datagrid control
License: MIT License
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.
e.g. Not Found: http://localhost:9000/dist/pager/pager.js
when trying to use the grid
Hi,
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,
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.