SyncFusion Treeview Event in angularjs - javascript

How i can use events with angularjs? i read the documentation but they dont mention anything about this only databinding and i dont want to use javascript or jquery to use this events.
<div id="treeView" ej-treeview e-fields-datasource="vm.list" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" e-fields-haschild="hasChild" e-fields-expanded="expanded" />
I try the attributes:
e-fields-options
e-field-nodeSelect
e-field-model
and nothing work.
Can anyone help me?
Thanks.
PD: Sorry for my english :(

You mean the clientside events, then you have to provide the as follows.
<div id="treeView" ej-treeview e-fields-datasource="vm.list" e-expanded="expanded" e-nodeselect="selected" />
The Syncfusion angular control properties are same as the javascript controls we have to provide the properties prefixed with 'e-' thats all its simple..:)

Related

File upload with Polymer & material design

I'm wanting to make a paper/material design version of the <input type="file">, can anybody suggest anything for my code below?
<paper-input type="text" id="fileName" placeholder="File" readonly></paper-input>
<paper-button id="changePicture" class="changePicture">Upload Picture</paper-button>
You need to use paper-input-container to get the same behavior and material design as paper-input.
If you are brave enough to explore others code you can take a look at Vaadin-upload element :)
Find on webcomponents.org, https://www.webcomponents.org/search/upload
e.g. http://file-input.raynicholus.com/components/file-input/demo.html

Value from org.springframework.ui.Model to jQuery

I'm trying to pass reCaptcha sitekey from my Spring MVC to thymeleaf template. I have an idea to reach this using jQuery $("#reCaptcha").attr("data-sitekey", reCaptchaSiteKey);, but can't find out how to get this value in jQuery.
Controller code model.addAttribute("reCaptchaSiteKey", RECAPTCHA_SITE_KEY); Would appreciate your help to solve this problem in this way or any other
There are quite a few ways to go about this. If you just want to use javascript, you can do javascript inlining:
http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining
<script th:inline="javascript">
var key = [[${reCaptchaSiteKey}]];
$("#reCaptcha").attr("data-sitekey", key);
</script>
You could also use thymeleaf to directly output the #reCaptcha div
<div class="g-recaptcha" th:attr="data-sitekey=${reCaptchaSiteKey}"></div>

How to call a specific javascript function into html?

as mentioned in the title I need a specific javascript function to be called in html, the function changes constantly upon pressing start and it looks the following:
<dt style="width: 120px">Start 1:</dt> <dd style="margin-left: 150px">{{ start.number1 }}</dd>
{{ start.number1 }} is the function I need to be displayed in html, could you help me with that please? Thanks in advance.
Using curly brackets to bind a Javascript variable into your HTML view is something very typical of javascript frameworks that provide Data Binding such as AngularJS or EmberJS
This might be what you're looking for.
There are of course other ways of doing this, such as the new Object.observe() function that's available in Chrome, but it will take a while until its widely supported.

How to set datepicker to textbox in fiddle?

Well i been facing issue to conStruct a fiddle where i can explain my problem to everyone clearly . Well i done most part and i needed small assistance on helping me setting up fiddle with datepicker binded to textbox in my fiddle
My fiddle : http://jsfiddle.net/JL26Z/2/
<script id="PhoneTemplate" type="text/html">
<div> // designing template for further use
Well depends on my this resolution i can post my real issue .
Regards
Updated your Fiddle:
In your fiddle, if you are using Knockout.js , other files can be added in the External Resources Tab. You need to add jQuery UI reference to it.
Add these lines to your code.
Html :
<input type="text" id="date" />
Js :
$(document).ready(function(){
$('#date').datepicker();
});
Note : This is just an answer to include datepicker in the fiddle.
For the whole functionality you should refer this answer - Link.

Prevent image loading with angular

I am looking in building a simple email client and I am stuck at the point, where the client should ask if the user wants to see images/hide them on spam messages. Any approaches are welcome.
How to prevent images from loading within a 'container' with angularJS
Please, note:
I am looking for angular solution so please do not suggest jQuery as they do not play nice together. Although pure JS is welcomed
'Do The Simplest Thing That Could Possibly Work' kind of solution
You can use ng-if feature
In controller
$scope.toggleImage = false; // true - Show, false - Hide. By default hide image.
In View template
<img ng-src="" ng-if="toggleImage">
Toggle Image
Thanks #musically_ut for the correction.
Here is a way where you can show picture in angular. All you need to add is a boolean which is true when it's not spam.
Html :
<!-- language: html -->
<div ng-app ng:controller="ShowHideController">
<div ng-repeat='image in images'>
<img ng-src="{{image}}"/>
</div>
<button ng-click='showImage()'> show image </button>
<div>
Javascript :
function ShowHideController($scope) {
$scope.showImage = function(){
$scope.images = ['https://www.google.com/images/srpr/logo3w.png'];
}
}
Here is the jsFiddle
Also what you can do is when it's true that its spam . Set the $scope.images to nothing.
To achieve what OP wants, i think the best way is to use:
<img ng-src="{{vm.isVisible ? 'path/to/image' : ''}}" />
This prevents the image from being loaded.

Categories