Am developing a kendo grid with column header to be dynamic from a api response data , i could find lots of idea when using jquery, is there anyway to load the columns data from angular component class to template html.any links would do.
What you're looking for is setting the header template. You can read about it here.
Basically, you do the following:
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductName">
<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</ng-template>
</kendo-grid-column>
</kendo-grid>
Inside the template you can use whatever members you have on the component.
Note: If the data you're using in the template is updated in an asynchronous call and you're using ChangeDetectionStrategy.OnPush, you need to add changeDetector: ChangeDetectorRef to your constructor parameters and let the change detector know that it has to check for changes using this.changeDetector.markForCheck().
See a demo here.
Related
I want to use in line editing option in Vuetify Datatable component instead of opening a dialog box for editing.
Is there a way to use contenteditable attribute in element in vuetify Datatable component.
According to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable you can apply contenteditable attribute to any HTMLElement.
Try adding the attribute to the element you want to edit.
eg
<div contenteditable="true"></div>
Vuetify has an inbuild content editable mode.
DOCS
The idea is that in every slot you add a v-edit-dialog and v-text-field and then sync the data using v-model and return-value.sync
Instead of using contenteditable attribute, I used the following code and worked perfectly (editable without opening a dialog box and save to bind variable)
<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>
</template>
I'm trying to figure out how to conditionally load sub/child component from Laravel's blade template
I have a main container, which is being called from the blade:
<structure-container view='menu-index'></structure-container>
Here is the StructureContainer.vue
<template>
<div>
//I can have if-else statement here by "view", but looking for a better solution
<menu-index></menu-index>
</div>
export default{
components: {
'menu-index': require('./menu/IndexComponent.vue'),
'test': require('./menu/TestComponent.vue'),
},
props: ['view']
}
As you can see I have two child components: menu-index & test. I want to pass the parameter from blade and display the corresponding component. Can I avoid if-else statements? there should be a better way to do this
You can simply bind the component name dynamically to the is property (using v-bind:is or :is), i.e.:
<div>
<component :is="view"></component >
</div>
The really awesome thing about this is that the <component> container is reactive, and you can dynamically load/unload/change the components on-the-fly. How awesome is that? :)
For more information, I encourage you to read up the documentation on dynamic components on the official docs.
<template is="dom-bind">
<iron-ajax
auto
url="http://localhost:9000/api/version"
last-response="{{versionNumber}}"
verbose
></iron-ajax>
<template is="dom-repeat" items="{{versionNumber}}">
<small class="u-ml+">{{item.first}}</small>
</template>
<template>
<small>[[versionNumber]]</small>
</template>
</template>
I'm a little bit lost with Polymer - I have an iron-ajax element which is set up to talk an API endpoint, which is returning the current version of my application.
I want to be able to bind this version number directly on the page. Is there something I'm doing incorrectly in the above code?
I tried using a dom-repeat template and attempting to grab the first item, but I don't seem to be getting anything. Same with attempting to one-way bind inside of a <small> tag.
My understanding is that if I'm within a dom-bind template, I don't have to define a custom element.
Yes, data-binding works inside of a dom-bind template without the need for a custom element.
One problem in your code is the template tag around <small>
<template>
<small>[[versionNumber]]</small>
</template>
The content of a template by itself won't be shown/rendered in the DOM. See http://www.html5rocks.com/en/tutorials/webcomponents/template/ for some detailed information about templates).
Using <small>[[versionNumber]]</small> inside of your dom-bind template with the extra template tag should work.
Another issue is, that iron-ajax by default handles responses as JSON, so will probably run into a parse error when it receives a string and last-response will get no value.
You would have to specify the handleAs property of iron-ajax accordingly.
<iron-ajax handle-as="text" ...>
And dom-repeat will only work for arrays.
I'm newbie to Angular 2. What are the corresponding events from AngularJS to Angular 2?
eg: ng-click to (click)
How about ng-init and all others events? I'm not having intellisense in VS .NET, so it's hard to guess.
Any help please!
Thanks
The default handled events should be mapped from the original HTML DOM component's events:
http://www.w3schools.com/jsref/dom_obj_event.asp
by just removing the on prefix.
onclick ---> (click)
onkeypress ---> (keypress)
etc...
You can also create your custom events.
However ngInit is not an HTML event, this is part of the Angular's Component lifecycle, and in Angular 2 they are handled using "hooks", which are basically specific method names inside your component that will be called whenever the component enters the specific cycle. Like:
ngOnInit
ngOnDestroy
etc...
Here is the list of events in Angular
Please check in the documentation if required for more info
(focus)="myMethod()"
(blur)="myMethod()"
(submit)="myMethod()"
(scroll)="myMethod()"
(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"
(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"
(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"
(click)="myMethod()"
(dblclick)="myMethod()"
(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"
This is one of the big advantages of Angular2. Not every event needs a customized ng-xxx directive anymore.
With custom elements and all other libraries producing all kinds of custom events, this approach doesn't fly.
In Angular2 the (eventName)="expression" binding syntax allows to subscribe to any known and unknown event.
The $event variable is still available (eventName)="myEventHandler($event)"
See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
A great place to begin to understand Angular 2 is the official Web Page.
Here you can see all the angular2/common ng-XXX although now it is as follows ngXxxx
In my case the best way to understand the differences between Angular 1 and Angular 2 was doing the tutorials:
Tour of Heroes
The Developer Guide: this is a practical guide to Angular for experienced programmers who are building client applications in HTML and JavaScript.
You can use the following syntax to handle events (for example click like ng-click with Angular1):
<button (click)="callSomeMethodOfTheComponent()">Click</button>
The difference here is that this is more generic. I mean you can use DOM events directly but also custom ones defined using the EventEmitter class.
Here is a sample that describes how to handle a click event and a custom event (my-event) trigged by a sub component:
#Component({
selector: 'my-selector',
template: `
<div>
<button (click)="callSomeMethodOfTheComponent()">Click</button>
<sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
</div>
`,
directives: [SubComponent]
})
export class MyComponent {
callSomeMethodOfTheComponent() {
console.log('callSomeMethodOfTheComponent called');
}
}
#Component({
selector: 'sub-component',
template: `
<div>
<button (click)="myEvent.emit()">Click (from sub component)</button>
</div>
`
})
export class SubComponent {
#Output()
myEvent: EventEmitter;
constructor() {
this.myEvent = new EventEmitter();
}
}
Hope it helps you,
Thierry
I'm trying to integrate CKEditor with my application and I'm using the below approach.
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
and in JavaScript to set and get data to ckeditor I'm using the code as below
function cksetdata(val)
{
CKEDITOR.instances.editor1.setData(val);
}
var data = CKEDITOR.instances.editor1.getData();
It is working perfect when using JavaScript.
but I want to set and get data from code behind as I want to save the data of CKEditor into database.
If using the CKEditor as control in aspx page I'm able to retrieve data by using .Text property of CKEditor, but unable to get data through JavaScript.
I need to retrieve data from both JavaScript and codebehind.
Thanks for ur answer Mr.Raymond kuipers..
Im using a work around for this problem..
As im able to retrieve data in javascript im assigning that data to a hidden variable and accessing the value of that hidden variable in my button save event..
function getCkEditordata() {
document.getElementById('<%=hdn1.ClientID%>').value = CKEDITOR.instances.editor1.getData();
alert(document.getElementById('<%=hdn1.ClientID%>').value);
}
in this way assigning to a hidden variable and accessing that data in code behind as follows..
String templatecontent = hdn1.Value;
use the CKEeditorForAspNet nuget package and you will have a normal control in aspx. You can than set and get the data using the .Text property.