After doing some research about exporting ng-grid data to PDF and CSV, found they've provided plugins for exporting.
pdfPlugin: I need to create a button to trigger the export (found this example, [plnk][1])
cvsPlugin: The link shows in the grid footer. so my question is how can I make a button like what the pdfPlugin to trigger cvs export.
[1]: http://plnkr.co/edit/t4aEBW?p=preview
There is an angular directive called ng-csv.
It can be used to create downloadable CSV files of arrays and objects.
Find a working example here.
I recommend you use angular's template cache for the component you wish to overwrite in the grid. Study the ng-grid debug code for which the index.html provides a link to and read more on $templateCache.
Currently, the button is simply a distinct html tag after the whole grid.
Here you can find some useful configuration options you can pass for the grid:
https://github.com/angular-ui/ng-grid/wiki/Configuration-Options
Such as rowTemplate, headerRowTemplate etc. One good use would be in headerRow template, you can add another row for filtering or various buttons.
You add them to this object:
$scope.gridOptions = { data: 'myData', plugins: [pdfPlugIn] };
found another solution and it worked pretty well.
http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex
Related
I just start using the ag-grid library with angularJS to display some tabular data in my application. The thing now is that I want the user to be able to alter the header value of each column like as he/she can edit the cells within a column when we enable the editable attribute. While searching for a solution I realized that there is no default way to turn the header into an editable element. So I was wondering which are my alternatives.
One thought of mine was to add to each header an edit button and when clicked a modal window to pop up with the corresponding input fields of the header and its column's cell values. In this case, the editable attribute is not going to be used because the edit of the cells will be conducted within the modal. Something like that but instead for the row, the button should be in each header.
So which are the ways that I can achieve something like that? I read about header template but couldn't really found any straightforward way to approach it.
Any ideas/hints or other alternatives are welcome.
Make a service which have an array as DataSet of your grid, and provide it with handlers for the events of a CRUD in the same service. Inject the service into the controller of your modal and view of the grid. After that, call the object gridDataSetadd,remove,update who is in the service, then $digest do the rest of the work once DataSet will be modified.
UPDATE, answering the comment
Inject your service into your controller:
For .ts
static $inject = ['$scope','YourService'];
constructor($scope, userService: YourService) {
this.userService.getSomething();
}
For .js
.controller('YourCtrl', ['$scope', 'YourService', function ($scope, YourService) {
$scope.someVar = YourService.someVar;
}])
I'm using ui-grid in Angular 1.5 and I need to track the export to .csv event, so I can know when a user clicks on this option. There are any callback of this function or something like that?
I tried the documentation with no success.
Yes, you can define export callbacks. While defining report grid options, you can use exporterFieldCallback.
Post your elaborated query, so that we can give proper solution.
I'm trying to apply Marionette into our architecture as it seems to fit our current application better than other solutions. Our frontend HTML is mostly server-side generated using PHP and Twig (just to give some context).
I'm now trying to use Marionette 3 Regions to achieve View compositions in a context where header, footer and generally the main content HTML are already there in the page.
I couldn't find any example with this approach so I'm asking here if someone could give some advice.
Thanks!
You can easily attach views to existing DOM elements using marionette:
var MyView = Mn.View({
el: '#base-element',
template: false
});
Also reference: http://marionettejs.com/docs/master/marionette.view.html
I want to have a column chart in my angular app that could be drilled down to a line chart. I think the main problem is to be able to handle click event on each column that I could not find it highchart nor angular-chart. Can you tell me a way to construct such thing?
ZingChart has an Angular directive that works well with your use case. You can use the directive with ZingChart's internal events to bind to just about anything on the chart :
zingchart.node_click = function(p) {
....
}
Demo : http://jsfiddle.net/mschultz/ck84wjce/
Angular Directive: https://github.com/zingchart/ZingChart-AngularJS
Docs : http://www.zingchart.com/docs/api/api-events/
It can also perform drilldowns fairly easily across different types of charts: http://www.zingchart.com/blog/2014/09/02/chart-drilldown-interactive-feature/
If you need any help, feel free to reach out - I work for the ZingChart team!
Check out this page for an example on Angular Drill Down chart using CanvasJS Angular Chart. It also includes angular source code or download angular sample from download page.
Check this StackBlitz for a simple example.
somewhere in my application I get a formatted html from server to be displayed to user:
me.myPanel().update(response.responseText);
Now, I want to put in this html some links (like "add comment") in every record. I get this in the server!
But how to capture this links in extjs to act like a button or so ?
I would use a delegate for this.
me.myPanel.el.on('click', me._click, me.myPanel, {
delegate: 'a.linkclass'
});
In the code above you would have a couple of < a > tags in the body of your panel. delegate will make sure that the click only applies to your a tags with only linkclass on them.
Here's a fiddle: http://jsfiddle.net/N9MSC/
I recommend to use the answer of Johan Haest
One other way would be to give unique ID's to the buttons. You can the use Ext.get('id') to fetch a Ext.dom.Element to which you can bind event like so
domElementRef.on('click', function() { alert('hit') })
You need to do this after the update is done.
Here's a JSFiddle