I'm trying to reproduce the Social Security Number example provided by the polymer demo here. How can I set a default/initial value for paper-input-container with its ssn-input component inside? The running version is here.
I tried to add the attribute value to both paper-input-container and ssn-input, but it does not display as initial default value.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Element Test Case</title>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input-container.html">
<link rel="import" href="paper-input/paper-input-error.html">
<link rel="import" href="paper-input/demo/ssn-input.html">
</head>
<body>
<paper-input-container always-float-label auto-validate attr-for-value="value">
<label>Social Security Number</label>
<ssn-input class="paper-input-input"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
</body>
</html>
I checked the original implementation of the <ssn-input>, and it seems to me that there is no code to split the provided value in its three substrings and provide it to the three paper-input. Instead when the user types something within the paper-inputs, each string becomes a _ssnX and a computeValue function links them together storing the result in the value property. Here the piece of code from ssn-input.html:
properties: {
value: { notify: true, type: String },
_ssn1: { type: String },
_ssn2: { type: String },
_ssn3: { type: String },
validator: { type: String, value: 'ssn-validator' }
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
ssn-input is the component that reads the content typed by the user and puts everything in the value property. Hence, the first thing is to initialise the value attribute of this element, as follows:
<paper-input-container always-float-label auto-validate>
<label>Social Security Number</label>
<ssn-input class="paper-input-input" value="102-12-1233"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
The attribute value initialises the relevant property in the ssn-input. ssn-input has three internal input element, which show and take the user input. Therefore, the initial value must be split on the "-" character. The best place to do it is in the value property observer. So, the modified ssn-input element code is the following:
Polymer({
is: 'ssn-input',
behaviors: [
Polymer.IronValidatableBehavior
],
properties: {
value: { notify: true, type: String, observer: '_handleValueChanged' },
_ssn1: { type: String },
_ssn2: { type: String },
_ssn3: { type: String },
validator: { type: String, value: 'ssn-validator' }
},
_handleValueChanged: function(value) {
var arr = value.split("-");
this._ssn1 = arr[0];
this._ssn2 = arr[1];
this._ssn3 = arr[2];
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
});
Here, the jsbin running example.
Related
I want to set up the kendo filter something like filter we have on online sales websites.
Image for reference
In here programs will be associated with Groups and Schools and will have a start and end date. I was setting up the filter using custom code, can we somehow update kendo grid filter menu to get this type of layout for the filtering?
Here None of the information in filter area is visible in the grid (School, dates and groups).
Thanks in advance
Please find below proof of concept.
This is just a concept that it is possible to achieve what you doing , there is certainly more research need to be done and better way to handle checkboxes checking and unchecking the purpose is to provide a concept on how to achieve it
You will need to learn more about filtering in case both checkboxes are checked and other possibilities and for sure you can find help on that either in telerik documentation or stackoverflow.
Here is the JSBIN http://jsbin.com/bakediseci/edit?html,js,output
FOR HIDDEN COLUMN Filter SEE THIS FILTER HIDDEN COLUMN
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<span> Group1 <input type="checkbox" id="group1"/><br/>
<span> Group2 <input type="checkbox" id="group2"/>
<br/>
<br/>
Date: <input id="date" />
<br/>
<br/>
<br/>
<br/>
<div id="grid"></div>
</html>
JavaScript:
var data = [
{ name: "Paul", birthDate: new Date("1948/12/08"),Group:"Group1" },
{ name: "Janet", birthDate: new Date("1952/02/19"),Group:"Group1" },
{ name: "Nancy", birthDate: new Date("1963/08/30"),Group:"Group2" },
{ name: "Steven", birthDate: new Date("1937/09/19"),Group:"Group2" }
];
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: data,
columns: [
{field: "birthDate", format: "{0:d}" },
{field:"name"},
{field:"Group"}
]
}).data("kendoGrid");
$(document).ready(function() {
//set initial state.
$('#group1').val($(this).is(':checked'));
$('#group2').val($(this).is(':checked'));
$('#group1').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group1"});
}else {
grid.dataSource.filter({});
}
});
$('#group2').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group2"});
}else {
grid.dataSource.filter({});
}
});
});
$("#date").kendoDatePicker({
change: function() {
var value = this.value();
if (value) {
grid.dataSource.filter({
field: "birthDate",
operator: "eq",
value: value
});
} else {
grid.dataSource.filter({});
}
}
});
});
OUTPUT
Research and Helpfull links that you will need down the road
There was definitely research and source used you will need to go through
them again to make it solid .
http://www.telerik.com/forums/how-to-implement-a-custom-filter#2296030
http://www.telerik.com/forums/adding-filters-to-grid-s-source
user contributions licensed under cc-wiki with attribution required.
Is there a way to define a property when its type isn't known?
properties: {
value: {
type: Generic
}
}
What would be the best way to do this?
My problem comes from having a value that may be a String or Number. I'm aware that I can parseInt(), but I would then need to detect if that's necessary. Also, when a property is meant to be a string, that string could be value = '5', which makes conditionally applying parseInt() tedious.
You would need to define a property of type Object.
properties: {
value: Object
}
Given the possible values of your property, parsing is unavoidable but can be simple. For example, you could use a regular expression with String#replace to remove all non-numeric characters from the input, and convert the result to a Number:
Number(value.replace(/[^\d]+/g, ''))
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
value: Object,
numberValue: {
computed: '_computeValue(value)'
}
},
_computeValue: function(value) {
// If the value is a string, remove all non-numeric
// characters and convert the result to a number.
return typeof value === 'string'
? Number(value.replace(/[^\d]+/g, ''))
: value;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo value="100"></x-foo>
<x-foo value="value = '5'"></x-foo>
<x-foo value="foo 2 bar 4 baz 6 qux"></x-foo>
<dom-module id="x-foo">
<template>
<div>[[value]] ==> [[numberValue]]</div>
</template>
</dom-module>
</body>
regex101 explanation of pattern:
Whats the difference between defining a computed property and using it like {{prop}}
prop: {
type: String,
computed: 'some(prop1)'
}
vs a function binding like
{{some(prop1)}}
The property is, as the name implies, also a property of the node object. It can notify outside listeners or reflect to attribute.
Function binding is only used to that. You can call it from the outside but it should have no effect - assuming that the function has no side-effects which is shouldn't.
The most important difference however, is that compute function will evaluate for each binding usage. Computed property will evaluate only once when a dependency changes. See below what happens in the console whenever you click INCREMENT.
Polymer({
is: 'my-elem',
properties: {
i: {
type: Number,
value: 0
},
c: {
computed: 'compute(i)'
}
},
inc: function() {
console.clear();
this.i += 1;
},
compute: function(i) {
console.log('computing property binding');
return i * 2;
},
f: function(i) {
console.log('computing function binding');
return i * 2;
}
});
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-button/paper-button.html" rel="import" />
</head>
<body>
<my-elem></my-elem>
<dom-module id="my-elem">
<template>
<div>Computed: [[c]]</div>
<div>Computed: [[c]]</div>
<div>Computed: [[c]]</div>
<div>Computed: [[c]]</div>
<div>Function: [[f(i)]]</div>
<div>Function: [[f(i)]]</div>
<div>Function: [[f(i)]]</div>
<div>Function: [[f(i)]]</div>
<paper-button on-tap="inc">Increment</paper-button>
</template>
</dom-module>
</body>
</html>
Heyho!
I tried all the day to bind the data of a JSON file to the data model of a SAPUI5 chart but without success. I miss the link between the JSON file and the dataset by path.
Added is the file containing the standalone code but without the json file which just contains calday and counter with some data. There seems no problem by defining the data directly in the script as data and refering in the dataset to it. Which I tried lately as you recognize at the /data path.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flattened DataSet bound to OData Entity with filter</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var oModelJSON = new sap.ui.model.json.JSONModel();
oModelJSON.loadData(file.json);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'Calendar Day',
value: "{calday}"
}],
measures: [{
name: 'Counter',
value: '{counter}'
}],
data: {
path: "/data"
}
});
var oChart = new sap.viz.ui5.Column({
width: "80%",
height: "400px",
plotArea: {
'colorPalette': d3.scale.category20().range()
},
title: {
visible: true,
text: 'Counter per Calendar Day'
},
dataset: oDataset
});
oChart.setModel(oModelJSON );
oChart.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
New to Typeahead/Bloodhound, and I'm struggling to get a very basic example of Typeahad.js working on localhost when querying a simple rest service that returns valid json. When I point my url to one used in the typeahead examples, it works fine (by "works", I mean the suggestion popup appears with the default string representation i.e. json). I am returning valid json and the appropriate header
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>States</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script>
$(document).ready(function () {
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
//local: states
remote: {
url: '../search.php?q=%QUERY',
//url: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
wildcard: '%QUERY'
}
});
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
//display: 'value',
source: states
});
});
</script>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
Image showing the response headers for my service.
Any idea what I may be doing wrong?