How do we implement the exportFunction in the parameters of Turbotable.
According to the definition of PrimeNg exportFunction: A function to implement custom export. Need to return string value.
Is there anyone who has already used this feature in his chart and if so how?
you can use like this;
component;
exportFunction = (data,field) =>{
console.log(data,field)
}
html;
<p-table ... [exportFunction]="exportFunction">
Related
I'd like to use a prop value to add color dynamically - relevant to the parent view.
I have the following -
<Text style={[copyStyles.copyrightTxt, copyStyles.copyColor{this.Props.Color}]}>© Copyright 2019 LRM Security Ltd</Text>
which would be styled via:
const copyStyles = StyleSheet.create({
copyColorOrange:{
color:'#f79431',
}
});
But I get an error 'unexpected token' - can anyone tell me where i'm going wrong please?
You can access properties of objects in two ways:
objectName.propertyName
or you can use the alternative way that allows you to use strings
objectName["propertyName"]
You should use the alternative way to access the value inside the styles object by constructing the string that you need.
copyStyles[`copyColor${this.props.Color}`]
also isn't props meant to be all lowercase?
Better way is to nest your property:
const copyStyles = {
copyColor:{
Orange:{
color:'#f79431',
}
}
};
And use : copyStyles.copyColor[this.props.Color]
I am using the component ngx-datatable in my angular app and I am trying to update the header texts dynamically.
What I was trying was the following:
<ngx-datatable-column prop="day_1" name="{{day_1_header}}">
and updating the day_1_header property dynamically, but when I do so the change is never reflected.
I have also tried adding a ViewChild and changing the name directly like so:
HTML:
<ngx-datatable-column #dataTable1 prop="day_1" name="{{day_1_header}}">
TS:
#ViewChild('dataTable1') dataTable1;
[..]
this.dataTable1.nativeElement.name = "test";
When I check the properties of my dataTable1 object the new name is set.
So can anyone tell me how to rerender/sync the datatable headers?
Thanks!
Damn...
Tried forever, asked the question and found a solution right away.
It worked by adding an explicit header-template to the column like this:
<ngx-datatable-column>
<ng-template let-column="column" ngx-datatable-header-template>
{{day_1_header}}
</ng-template>
</ngx-datatable-column>
Maybe it helps someone someday.
I have no idea why the other answer (which seems pretty direct and logical) didn't work for me. Maybe breaking change in higher version.
This GitHub issue gives another perspective on how to achieve it.
There's also this example in the source code that shows it.
Basically, you'll need the custom template for the column header
<ngx-datatable
class="material"
[rows]="rows"
[columns]="columns"
[columnMode]="ColumnMode.force"
[headerHeight]="50"
[footerHeight]="50"
rowHeight="auto"
>
</ngx-datatable>
<!-- custom column header template -->
<ng-template #hdrTpl let-column="column"> <strong>Fancy</strong>: {{ column.name }} !! </ng-template>
Then access it in your component class with #ViewChild() decorated property.
export class TemplateRefTemplatesComponent {
#ViewChild('hdrTpl', { static: true }) hdrTpl: TemplateRef<any>;
rows = [];
columns = [];
ColumnMode = ColumnMode;
constructor() {
}
ngOnInit() {
// You'll need to map over all columns to use it in all
this.columns = this.columns.map(columns => ({...columns, headerTemplate: this.hdrTpl});
}
}
Can't find any relevant information in the sencha documention about this question :
Is it possible to call Ext.create(...) with a parameter which does not depend on the application's name?
So that if I change the app's name I don't have to rewrite that line of code?
Normally I would use Ext.create(AppName.model.MYMODEL) but that's too tied to the app's name for me.
Still need help :)
Create using class alias
When using Ext.define to define your class, you can provide an alias property. You've probably seen this on UI components which use aliases like widget.panel. Those aliases can be used with Ext.create.
Ext.define('MyApp.SomeClass', {
alias: 'app.someclass', // Independent of class name
/* ... */
});
Ext.create('app.someclass', {
/* ... */
});
You can set the alias on a class after it has been created by using Ext.ClassManager.setAlias.
Helper function using application name
If you don't have the option to set an alias, you could create a function that wraps Ext.create which supplies your base namespace automatically.
The problem here is that Ext.application doesn't return the application object. I'm not sure how Sencha Architect generates the application code but you may need additional overrides to allow you to retrieve the application object.
function appCreate(className, config) {
var appName = someMethodThatGetsTheApplicationName();
return Ext.create(appName + '.' + className, config);
};
// Example usage: Creates object of MyApp.model.MyModel
var myObj = appCreate('model.MyModel', { /* ... */ });
How to get the application name at runtime
By default, Ext JS does not retain a reference to the application object when using Ext.application, so we need an override to do it. I'm using Ext.currentApp as the property to store this object, but you can change it to whatever you'd like.
Ext.application = function (config) {
Ext.require('Ext.app.Application');
Ext.onReady(function () {
Ext.currentApp = new Ext.app.Application(config);
});
};
Now that you have this, you can access the application name by simply using Ext.currentApp.name. Or, if you'd feel more comfortable using a getter you can use the following.
Ext.app.Application.addMembers({
getName: function () {
return this.name;
}
});
// Example usage:
function someMethodThatGetsTheApplicationName() {
if (!Ext.currentApp) {
Ext.Error.raise('Current app does not exist.');
}
return Ext.currentApp.getName();
}
You can use any class name in Ext.create there is no naming convention imposed there as long as the class was already defined. If you want Ext.create to load the correct file using Ext.loader you will need to configure the loader to conform with the naming convention you need.
The way to do it :
You need a controller that will in it's INIT function (before UI Loading/Initiating) do the following
APPNAME = this.getApplication().getName();
Where APPNAME is a global variable.
Then when you Ext.create something you will be able to write the following
Ext.create(APPNAME +'model.MyModel');
That way you can change you app name without having to check everywhere in your code to change every single Ext.create to the new app's name.
It also give you the ability if you are to use this.getApplication().setName() to have infinite cache storage has you get 5/10mb per AppName.
I imagine this is an easy thing to do, but I wasnt able to find the information I was looking for through google. I have popupProperties which is just default stuff. I then call to the service which returns specific overrides depending on the popup. How can I iterate through all of the service's overrides and apply them to the popupProperties?
var popupProperties = getDefaultPopupProperties();
var popupOverrides= popupService.getPopupOverrides(currPopupId);
angular.forEach(popupOverrides, function(popupProperty, propertyName){
//replace defaults with popupData's properties
});
You should have a look at the solution of Josh David Miller which uses the extend method of angular (documentation).
var defaults = {name:'John',age:17,weight:55};
var overrides = {name:'Jack',age:28,color:'brown'};
var props = angular.extend(defaults, overrides);
// result
props: {
name:'Jack',
age:28,
weight:55,
color:'brown'
}
The values are copied in the defaults variable. There is no need of using the return value (var props =).
I presume you mean both functions are returning objects with a number of properties (as opposed to an array).
If so, the following should work - just JavaScript, nothing AngularJS specific:
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
See this question for more details How can I merge properties of two JavaScript objects dynamically?
The following code works fine using Backbone.Marionette.ItemView but not Mustache.
Backbone.Marionette.ItemView - no Mustache
I would like to use the same code but loading the template varaible using Mustache.
Here is my code:
Backbone.Marionette.ItemView - with Mustache
Any idea why my code does not work and why?
Thanks
I'd like to update the answer here a bit as I was just struggling with this, and I was using this answer as a reference.
Here are my findings:
The answer here is a bit out of date with the current version of Mustache (which is understandable as it's pretty old)
Mustache.to_html is now deprecated, but still exists as a simple wrapper around Mustache.render for backwards compat. Check out this link.
Additionally, I found overriding Marionette.Renderer.render, as in the accepted answer above, completely bypasses the Marionette.TemplateCache layer which may not be the desired behavior.
Here's the source for the Marionette.Renderer.render method:
render: function(template, data){
if (!template) {
var error = new Error("Cannot render the template since it's false, null or undefined.");
error.name = "TemplateNotFoundError";
throw error;
}
var templateFunc;
if (typeof template === "function"){
templateFunc = template;
} else {
templateFunc = Marionette.TemplateCache.get(template);
}
return templateFunc(data);
}
Source
As you can see it accesses the Marionette.TemplateCache.get method and the above answer does nothing to maintain that functionality.
Now to get to my solve (note: the above answer is not wrong necessarily; this is just my approach to maintain the Marionette.TemplateCache layer):
As the comments suggest above, override compileTemplate instead:
Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {
// Mustache.parse will not return anything useful (returns an array)
// The render function from Marionette.Renderer.render expects a function
// so instead pass a partial of Mustache.render
// with rawTemplate as the initial parameter.
// Additionally Mustache.compile no longer exists so we must use parse.
Mustache.parse(rawTemplate);
return _.partial(Mustache.render, rawTemplate);
};
Here's a working JSFiddle as proof.
In the fiddle, I've also overridden Marionette.TemplateCache.loadTemplate to demonstrate that it's only called once. The body of the function only adds some debug output and then re-implements most of the original functionality (minus error handling).
Marionette assumes the use of UnderscoreJS templates by default. Simply replacing the template configuration for a view isn't enough. You also need to replace how the rendering process works.
In your simple example, you only need to override the Marionette.Renderer.render function to call Mustache, and then set the template of your views to the string template that you want:
Backbone.Marionette.Renderer.render = function(template, data){
return Mustache.to_html(template, data);
}
var rowTemplate = '{{ username }}{{ fullname }}';
// A Grid Row
var GridRow = Backbone.Marionette.ItemView.extend({
template: rowTemplate,
tagName: "tr"
});
Note that your JSFiddle still won't work even when you put this code in place, because the GridView is still using a jQuery selector/string as the template attribute. You'll need to replace this with the same type of template function to return mustache.
http://jsfiddle.net/derickbailey/d7qDz/