Using a template for row data or for a column header using HTML as the value of the field, I can add a checkbox to a Kendo UI grid. For example:
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [{
field:'<input id="masterCheck" type="checkbox" /><label for="masterCheck"></label>',
width: 33,
height: 550,
}]
});
});
</script>
However, the checkbox is not styled according to the Kendo UI theme though. Adding class="k-checkbox" to the input checkbox element should style it according to theme. However, when I apply the class to the checkbox, the checkbox is no longer visible. How can I have a k-checkbox be visible within the grid?
An example of the issue is located at http://dojo.telerik.com/AjuFo
You have added the 'k-checkbox' class to the checkbox but you forgot to add the 'k-checkbox-label' class into the label. That's why after applying the 'k-checkbox' class to the input element its not displaying.
Please try with the below code snippet.
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [{
field:'<input id="masterCheck" class="k-checkbox" type="checkbox" /><label for="masterCheck" class="k-checkbox-label"></label>',
width: 33,
height: 550,
}]
});
});
</script>
Let me know if any concern.
Related
I am trying to get the user input from my <paper-input-container> using this code:
<paper-input-container id="nameInput">
<label slot="label">Your name</label>
<iron-input slot="input">
<input on-keydown="keypressed" value="{{first}}" id="nameBox">
</iron-input>
</paper-input-container>
In my properties, I have:
static get properties() {
return {
first:{
type:String,
value:''
}
}
}
and my keypressed function is:
keypressed(e) {
console.log(this.first);
}
I've been able to get it to work with the <paper-input> element, but I wasn't able to style it the way I wanted to. If you know how to increase the user input text size on paper-input in Polymer 2.0, that would also help.
Polymer's change notification requires an event naming convention that the native <input> does not follow, so the two-way data binding you seek requires special syntax, as shown here:
target-prop="{{hostProp::target-change-event}}"
In your case, that would be:
<input value="{{first::input}}>
This tells Polymer to set first equal to value when the input event occurs from the <input>. This is equivalent to:
const inputEl = this.shadowRoot.querySelector('input');
inputEl.addEventListener('input', () => this.first = value);
demo
Alternatively, you could bind first to <iron-input>.bindValue, which reflects the value of <input>:
<iron-input bind-value="{{first}}">
<input>
</iron-input>
demo
if you know how to increase the user input text size on paper-input in polymer 2.0, that would also help
The font-size of the <paper-input>'s inner <input> can be styled with the --paper-input-container-input CSS property of <paper-input-container>:
<dom-module id="x-foo">
<template>
<style>
paper-input {
--paper-input-container-input: {
font-size: 40px;
};
}
</style>
<paper-input label="My label" value="My value"></paper-input>
</template>
</dom-module>
demo
Can someone help me look at this plunkr. The style seems not to be working.
<!DOCTYPE html>
<div ng-controller="testController">
<h1>Hello Plunker!</h1>
<input type="text" name="bDay" ng-model="mydate | date : 'dd-MM-yyyy'" id="" value="" ng-click="showDatePicker('bday')" />
<div date-picker="mydate" view="year" min-view="date" ng-class="{hidden: (picker !== 'bday')}" auto-close="true"></div>
{{mydate}}
</div>
<script>
var app = angular.module('sample', ['datePicker']);
app.controller('testController', ['$scope', function($scope){
$scope.picker = 'null';
$scope.showDatePicker = function(picker){
$scope.picker = 'null';
setTimeout(function(){
$scope.picker = picker;
$scope.$apply();
}, 100);
}
}]);
</script>
http://plnkr.co/edit/94TifOjXZjEAhA25Kl4A?p=preview
I assume you mean you want it to look like this datepicker. For the most part, it does look like the yearly datepicker from that page. Few differences:
The arrows need the "prev" and "next" classes for proper font sizing
The difference in color is the difference between the "active" and "now" classes being applied to that year box
Your datepicker isn't in a popup since the html is inserted inline, rather than as a grandchild of an element with body as its parent.
If you want any gray dates, you need to apply the "old" class.
Make sure your jquery versions are not clashing.i had the exact same issue and resolved it.You cant use jquery 1.10.4 and 1.1.34....etc...
Is it possible to bind a state (attribute) of a paper-checkbox [checked|unchecked] dynamically to an attribute like [readonly|disabled] inside a paper-input element? This is my implementation so far:
<template repeat="{{item in lphasen}}">
<div center horizontal layout>
<paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
<div style="margin-left: 24px;" flex>
<h4>{{item.name}}</h4>
</div>
<div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
</div>
</template>
The behavior should be as follow:
When the user uncheck a paper-checkbox, then the paper-input element in the same row should be disabled and/or readonly and vice versa. Is it possible to directly bind multiple elements with double-mustache or do I have to iterate the DOM somehow to manually set the attribute on the paper-input element? If YES, could someone explain how?
Another way to bind the checked state of the paper-checkbox.
<polymer-element name="check-input">
<template>
<style>
#checkbox {
margin-left: 1em;
}
</style>
<div center horizontal layout>
<div><paper-input floatingLabel label="{{xlabel}}" value="{{xvalue}}" disabled="{{!xenable}}" type="number" min="15" max="200"></paper-input></div>
<div><paper-checkbox id="checkbox" label="Enable" checked="{{xenable}}"></paper-checkbox></div>
</div>
</template>
<script>
Polymer('check-input', {
publish:{xenable:true, xvalue:'',xlabel:''}
});
</script>
</polymer-element>
<div>
<check-input xenable="true" xvalue="100" xlabel="Weight.1"></check-input>
<check-input xenable="false" xvalue="185" xlabel="Weight.2"></check-input>
</div>
jsbin demo http://jsbin.com/boxow/
My preferred approach would be to refactor the code to create a Polymer element responsible for one item. That way, all of the item specific behaviour is encapsulated in one place.
Once that is done, there are a couple ways of doing this.
The easiest would be to simply create an on-tap event for the check box that toggles the value of a property and sets the disabled attribute accordingly.
<paper-checkbox unchecked on-tap="{{checkChanged}}"></paper-checkbox>
//Other markup for item name display
<paper-input disabled floatingLabel id="contextRelevantName" style="width:120 px;"></paper-input>
One of the benefits of putting this into it's own polymer element is that you don't have to worry about unique id's anymore. The control id's are obfuscated by the shadowDOM.
For the scripting, you would do something like this:
publish: {
disabled: {
value: true,
reflect: false
}
}
checkChanged: function() {
this.$.disabled= !this.$.disabled;
this.$.contextRelevantName.disabled = this.$.disabled;
}
I haven't tested this, so there might be some tweaks to syntax and what have you, but this should get you most of the way there.
Edit
Based on the example code provided in your comment below, I've modified your code to get it working. The key is to make 1 element that contains an either row, not multiple elements that contain only parts of the whole. so, the code below has been stripped down a little bit to only include the check box and the input it is supposed to disable. You can easily add more to the element for other parts of your item displayed.
<polymer-element name="aw-leistungsphase" layout vertical attributes="label checked defVal contractedVal">
<template>
<div center horizontal layout>
<div>
<paper-checkbox checked on-tap="{{checkChanged}}" id="checkbox" label="{{label}}"></paper-checkbox>
</div>
<div class="container"><paper-input floatingLabel id="contractedInput" label="Enter Value" value="" style="width: 120px;"></paper-input></div>
</div>
</template>
<script>
Polymer('aw-leistungsphase', {
publish: {
/**
* The label for this input. It normally appears as grey text inside
* the text input and disappears once the user enters text.
*
* #attribute label
* #type string
* #default ''
*/
label: '',
defVal : 0,
contractedVal : 0
},
ready: function() {
// Binding the project to the data-fields
this.prj = au.app.prj;
// i18n mappings
this.i18ndefLPHLabel = au.xlate.xlate("hb.defLPHLabel");
this.i18ncontractedLPHLabel = au.xlate.xlate("hb.contractedLPHLabel");
},
observe : {
'contractedVal' : 'changedLPH'
},
changedLPH: function(oldVal, newVal) {
if (oldVal !== newVal) {
//this.prj.hb.honlbl = newVal;
console.log("Geänderter Wert: " + newVal);
}
},
checkChanged: function(e, detail, sender) {
console.log(sender.label + " " + sender.checked);
if (!this.$.checkbox.checked) {
this.$.contractedInput.disabled = 'disabled';
}
else {
this.$.contractedInput.disabled = '';
}
console.log("Input field disabled: " + this.$.contractedInput.disabled);
}
});
</script>
</polymer-element>
I am using Knockout.js with jQuery tmpl plugin. The template I have defined has a few select lists. I need to expand the width of the select items (on IE 8) when a select list is clicked (to accomodate the longest element in the list). I was thinking of toggling the css class when a user clicks on the select list to achieve this but am not sure how to go about it. Here is what I have so far:
//CSS classes
<style>
.bigclass
{
width: 200px;
}
.normalclass
{
width: auto;
}
</style>
// Call makeBig javascript method on mouseover.
<script id='criteriaRowTemplate' type='text/html'>
<tr>
<td style="width: 23%"><select style="width: 100%" data-bind='event: { mouseover: makeBig, mouseout: makeNormal}, options: criteriaData, optionsText: "Text", optionsCaption: "--Select--", value: SearchCriterion' /></td>
</tr>
</script>
var CriteriaLine = function() {
this.SearchCriterion = ko.observable();
//Control comes to this method. Not sure though if the element captured is correct.
makeBig = function(element) {
$(element).addClass("bigclass")
};
makeNormal = function(element) {
$(element).addClass("normalclass")
};
};
So my questions are:
How do we pass the select list to the makeBig javascript function? I believe I need to change the following syntax in my code:
data-bind='event: { mouseover: makeBig, mouseout: makeNormal
How do we add the class to the passed select list. I have added the code but it's not working, maybe because element doesn't have a value.
Alternatively, is there any other approach to ensure that the user sees the full text of the dropdown in IE 8?
Here is a custom binding to add a CSS class to the element on hovering:
http://jsfiddle.net/BL9zt/
Note that it subscribes to the IE specific mouseenter and mouseleave event, so you also have to reference jQuery which simulates those events in the other browsers.
Another, knockout-independent approach is described here:
http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html
I want to get the following to display in a single line. I have tried using styles float and display.
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
<script type="text/javascript">
new Ext.form.ComboBox({
applyTo: 'filterOp',
triggerAction: 'all',
name: 'item',
mode: 'local',
lazyInit: true,
displayField: 'name',
valueField: 'id',
forceSelection: true,
typeAhead: true,
inputType:'text',
fieldLabel: 'Item selection',
style: "display: inline-block",
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'reporting/json_report_filter_operators.jsp',
root: 'rows',
fields:['id', 'name']
})
})
</script>
The simplest way to do this is to override the styles on the page.
First, wrap your paragraph in a P tag with a special id.
<p id="my-inline-override">
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>
Then you can add a CSS selector to your page that makes sure the DIV tag added by Ext JS displays inline (note that "x-form-field-wrap" is the class of the inserted DIV wrapper, you can see this if you use chrome developer tools to browse the DOM).
<style>
#my-inline-override div.x-form-field-wrap {
display: inline;
}
</style>
I'm sorry, your question is a bit confusing. What exactly are you trying to get on a single line? The combo box? The code? Each item in the combo box? If it's each item just widen the combo box, or make each element have overflow hidden and a fixed width.