I'm trying to use custom made component in ig-grid column template. Component is rendered correctly in Html, but it never reaches component's constructor. How is it possible to use custom component in column template?
<script id="colTmpl" type="text/template">
<custom-component data="${datatouse}"></custom-component>
</script>
<div>
<ig-grid id="grid1" data-source="vm.datasource" width="100%" primary-key="Id" auto-generate-columns="false" autocommit="true">
<columns>
<column key="Id" header-text="Id" width="50px" data-type="number" hidden="hidden"></column>
<column key="datatouse" width="100%" header-text="my custom component" datatype="object" template="{{getHtml('#colTmpl')}}"></column>
</columns>
</ig-grid>
</div>
You can override the Ignite UI templating ($.ig.tmpl) and apply your custom component to the cells.
$.ig.tmpl = function (tmpl, data) {
angCells.push($compile(tmpl)($scope));
return "";
}
Here's a fiddle.
Related
I would like to build a salesforce component where user will provide image link & the component will display the image. So I tried following code
lightning component
<aura:component implements="flexipage:availableForAllPageTypes" access="global"
controller="MyController" >
<lightning:card title="Partner Information">
<Div>
<p><lightning:input aura:name="image" label ="Enter image url" type="text"/></p>
<br></br>
<img url="{!image}" />
</Div>
</lightning:card>
</aura:component>
But it's not displaying the image after inserting the image url
I also tried with the option
<img url="{!v.image}" />
but I got the error message Access Check Failed! AttributeSet.get(): attribute 'image' of component
Can you guide me to display the image?
So the proper way to handle this would be by using the aura:html component. There are a few parameters you would set for this:
aura:id- String- your id to locate the elements within JS
tag- String- the html tag
HTMLAttributes- Map- No need to set this explicitly on the .cmp, we'll use Js
<!--YourComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
<!--Remember to define your binding attribute-->
<aura:attribute name="image" type="String"/>
<lightning:card title="Partner Information">
<div class="slds-p-around_medium">
<p>
<!--Set you attribute as the value of the lightning:input component-->
<lightning:input aura:name="image"
label ="Enter image url"
value="{!v.image}"
type="text"
onchange="{!c.handleUrlChange}"/>
</p>
<br/>
<!--Set the aura:id so you can access it in js, use component.find to locate-->
<aura:html aura:id="imgDiv" tag="img"/>
</div>
</lightning:card>
</aura:component>
//YourComponentController.js
({
handleUrlChange : function(component, event, helper) {
//Grab the value from the attribute or you can use event.getParam("value");
var imageUrl = component.get("v.image");
//Define the map, find the img tag generated by aura:html,
//and set the HTMLAttributes to your map
var newMapAttributes = {"src": imageUrl};
component.find("imgDiv").set("v.HTMLAttributes",newMapAttributes);
}
})
You are also using the url attribute on your image tag instead of the src attribute. You may be able to directly bind to the img element, but aura:html works really well. Hope that answers your question!
Just wondering what the procedure is loading an external script into a component which renders HTML?
I call a script, which returns me an unordered list which i want to use for an image carousel it looks something like this but currently isn't working
this is what i have inside my render
return(
<Slick {...settings}>
<script
type="text/javascript"
src="https://some.external.script.js"
/>
<div
class="render-html-here-from-script"
/>
<script>
SomeScript.require(['xxx'], function(arg)
{arg.loadAll().done(function(embed) {
// code here gets list and binds above in div
})}
)
</script>
</Slick>
)
the above code works fine if I just copy/paste straight into a standard HTML page
Thanks
In AngularJS (1.x), how can we create a reusable widget (component) that has insertion points (slots) for other widgets (components)?
Imagine we have a component/directive called "verticalsplitter". It's purpose is to divide the screen area into a "top" and "bottom" area (perhaps allowing user resizing, collapsing, etc).
Now imagine we have a bunch of other rich components e.g. a richtextview, a treeview, a videoplayer and a gridview.
One page/view 1 I want a verticalsplitter with a richtextview on top and treeview on bottom. On page/view 2 I want a verticalsplitter with a videoplayer on top and a gridview on bottom.
Page 1
<html>
<body>
<verticalsplitter>
<top ng-initialSize="30%">
<richtextview />
</top>
<bottom ng-initialSize="70%">
<treeview />
</bottom>
</verticalsplitter>
</body>
</html>
Page 2
<html>
<body>
<verticalsplitter ng-locked="true">
<top>
<videoplayer />
</top>
<bottom>
<gridview />
</bottom>
</verticalsplitter>
</body>
</html>
How can I achieve this? If it's not possible with components (and I need to use directives for transclude) then that's OK.
Components can transclude. It is clearly stated so in the AngularJS Developers Guide for Components:
app.component("verticlesplitter", {
transclude: {
'topPart': 'top',
'bottomPart': 'bottom'
},
template: `
<div style="border: 1px solid black;">
<div class="top" ng-transclude="topPart"></div>
<div>Something in the middle</div>
<div class="bottom" ng-transclude="bottomPart"></div>
</div>
`
});
For more information, see
AngularJS Developers Guide for Components
AngularJS ng-transclude Directive API Reference (Multi-slot Transclusion)
How can I make a row in a KendoUI Grid draggable with AngularJs?
The documentation says you have to initialize the draggable component with a filter ie "tbody > tr", but I don't understand how to apply the kendo-draggable directive on just the rows.
This is how I initialize kendo-grid:
<div
kendo-grid
k-options="activityGridOptions"
k-rebind="activityGridOptions"
></div>
The solution is to define a rowTemplate and altRowTemplate on the config object and adding a template inside the html like so:
<!-- Grid row template -->
<script type="text/x-kendo-template" id="grid-row-template">
<tr data-uid="#= uid #" draggable draggable-data="dataItem" draggable-type="'planner.activity'" ng-class="{'current-item': currentActivityId == dataItem.SyncTableUniqueId}" ng-click="setCurrentActivity(dataItem)">
<td>{{dataItem.AvtaleNr}}.{{dataItem.VareLøpenummer}}</td>
<td>
{{dataItem.Date| moment:'ll'}} {{dataItem.Time| moment:'HH:mm':'HH:mm:ss'}}
</td>
<td>{{dataItem.FirstName}}</td>
</tr>
</script>
As you might notice, I am using a non-kendo draggable directive. The rowTemplate and altRowTemplate is assigned inside my controller:
$scope.activityGridOptions = {
dataSource: $scope.gridDataSource,
// ...
rowTemplate: kendo.template($("#grid-row-template").html()),
altRowTemplate: kendo.template($("#grid-row-template").html())
};
In addition to the answer above, you can try to use this angular directive:
https://github.com/neoziro/angular-draganddrop
I'm trying to figure out how to make a component render its children.
So I can compile:
<my-component>
<div id="child"></div>
</my-component>
into something like this:
<div id="parent">
<!-- some component stuff -->
<div id="child"></div>
</div>
Is there something like ngTransclude in Angular.Dart?
AngularDart uses Shadow DOM in place of ngTransclude. This is one of the ways we are pushing Angular into the browser with emerging web standards.
Adding a <content> tag instead your component's template will cause the child element to be placed there.
e.g. in your example <my-component>'s template might look like:
<div id="parent">
<!-- some component stuff -->
<content></content>
</div>
For even more awesomeness, you can use Shadow DOM's content selectors as well to control which child elements are displayed.