I'm trying to use the numeric textbox from kendo, in Angular, inside a kendo grid. Binding the data with my angular object doesn't work. I tried to put an "editor" field in the columns object, or even to do it with a jQuery command (which I know is bad)like this:
$('.editable').kendoNumericTextBox()
but it never works..
Instead of using the template in the columns object, use the editor attribute:
{
field: "fieldName",
title: "Field Title",
width: "90px",
editor: numberEditor
}
The numberEditor is a function which you can implement as following:
function numberEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0, // Settings for the editor, e.g. no decimals
step : 1, // Defines how the up/down arrows change the value
min : 0 // You can also define min/max values
});
}
Related
I'm newbie at Ext JS and I would like to know if it is possible to create a Textfield or a different component and insert it inside a grid panel cell. I have tried this so far (It doesn't return me the component):
{
header : ...,
id : ...,
dataIndex : ...,
sortable : true,
width : 140,
renderer: function(value, meta, record) {
return new Ext.form.TextField({fieldLabel: 'field', text: 'test'});
}
}
I would like to do something similar with cellEditing, but I can't use that plugin because I'm working with a older version of Ext (3.2.1).
My target is to show a textfiled when someone clicks at a specific cell.
Thank you.
https://fiddle.sencha.com/#fiddle/27e7&view/editor
I have returned html input field inside column renderer.
Just like cell editor I have set value to textfield.Also I have added blur event handler method in which you can write code similar to cell editor's edit listener.
Is this what you want? Or some other changes.Check it.
Adding code here:
renderer: function (value, meta, record) {
return "<input onblur='onBlurEventHandler(event)' value="+value+" style='width: 90 px;'></input>"
}
function onBlurEventHandler(event){
console.log('Value: '+event.currentTarget.value);
}
I'm using an Angular UI Grid in my app. I set enableFiltering to true in the options which made some filter boxes show up above my columns. This is great, but the filters don't work exactly as desired.
If a cell contains the text "I like pizza" and I type "I like", that cell's row is shown as a match. I would also think that if I type "pizza", the "I like pizza" cell/row should show up, but that's not the case.
How can I get the filters to allow searching anywhere in the text, not just from the beginning?
You can use filter: {condition: uiGridConstants.filter.CONTAINS} in the column definition to allow that column to search anywhere in the text.
Here's a sample column definition with this in place:
columnDefs: [
// default
{ field: 'name',
filter: {condition: uiGridConstants.filter.CONTAINS} },
...
You can pass a custom filter object that takes a condition property, which can be a function that takes searchTerm and cellValue. Will display if the function returns true.
Plunkr
{ field: 'name', filter: {
condition: function(searchTerm, cellValue) {
return cellValue.indexOf(searchTerm) > -1
}
}}
I am having difficulty using the optionLabelTemplate on a dropdownlist through an angular options binding in KendoUI.
Version: Kendo UI v2015.1.430
Markup:
<select kendo-drop-down-list
k-options="DropDownOptionsTest"></select>
Script:
var TestData = new kendo.data.ObservableArray([{value:"one", id:1}, {value:"two", id:2}]);
$scope.DropDownOptionsTest = {
dataSource: TestData,
optionLabelTemplate: '<span>SelectText...</span>',
dataTextField: "value",
dataValueField: "id"
};
Result:
No options label appears, first option is automatically selected.
Can someone please explain to me why that doesn't work and how I can make it work?
If I understand correctly what you are trying to do is display a default text ("SelectText...") when the drop down list is first rendered and there is no selection. The way to do this is with the optionLabel attribute. You can also use the optionLabelTemplate you are already using in order to customise the markup of the option label but only if an option label already exists.
Therefore, while this doesn't work:
$scope.DropDownOptionsTest = {
dataSource: TestData,
optionLabelTemplate: '<span>Select Text...</span>',
dataTextField: "value",
dataValueField: "id"
};
This does:
$scope.DropDownOptionsTest = {
dataSource: TestData,
optionLabel: 'Select Text...'
optionLabelTemplate: '<span>Select Text...</span>',
dataTextField: "value",
dataValueField: "id"
};
Please note that in this case the optionLabel will be disregarded, since the optionLabelTemplate determines what will be rendered by the drop down list, it still needs to be there nevertheless.
Finally, you can also use the value of your optionLabel in your optionLabelTemplate with something like this (although I can't think of any use case where you might need to do something this complex):
$scope.DropDownOptionsTest = {
dataSource: $scope.testData,
optionLabel: 'Select one...',
optionLabelTemplate: function(optionLabel){return '<span>' + optionLabel + '</span>'},
dataTextField: "value",
dataValueField: "id"
};
I am new to angular and ng-grid. I am using ng-grid as grid control in my project. I am trying to edit a cell whose value is formatted with a angular filter. For example:
{field:'rate | currency: "GBP "', displayName:'Rate'}
Here currency filter is applied to Rate column. When I click on the "Rate" column to edit, I get a blank textbox as in editable cell template. I was expecting to see the textbox bound to underlying data, but its not happening. Any idea?
Also, on blur or lost focus on cell, it should get out from editable template, even that is not happening. Anything I am missing?
Here is the plukr to see the problem: http://plnkr.co/edit/W5aViYikZzEGnDPgSI5z
Just use the cellFilter option. Plunker
columnDefs: [
{
field: 'name',
displayName: 'Name',
cellTemplate: 'input-tpls.html'},
{
field:'rate ',
displayName:'Rate',
cellFilter: 'currency'
}
],
app.filter('currency', function () {
return function (input) {
//Do your formatting here.
return "GBP " + input;
};
});
Is it possible to implement progressbar in property grid in extjs 3? How do I add an image in property grid?
I have a value in percentage and I want to represent that in progressbar (its uneditable).
Thanks a lot for help.
You could try something like this:
//==== Progress bar 1 ====
var pbar1 = new Ext.ProgressBar({
id:'pbar1',
width:300
});
var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 300,
renderTo: 'grid-ct',
bbar: pbar1, //You can set the progress bar as the property girds bottom toolbar.
customRenderers: {
Available: function(v){
return '<img src="path to image" />';
}
}, //This would render the image into the Available property.
source: {
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
}
});
When using customRenderers to render the image
The name of the renderer type should correspond with the name of the property that it will render For more see the API.
This is the first thing I though about. But it's still not so user friendly as it's render progressbars after grid is rendered.
This is custom renderer for your progress column:
renderer: function( value, metaData, record, rowIndex, colIndex, store ) {
var id = Ext.id();
(function(){
var progress = new Ext.ProgressBar({
renderTo: id,
value: progress_value
});
}).defer(25);
return '<div id="'+ id + '"></div>';
}
It renders <div id="generated-id"/> and then renders generated progressbar into this div.
It would be better to use some kind of closure to create progressbar only once and to return it's html via custom renderer as in the example above, but unfortunately I don't know yet how to do it in Ext.js 3. As for Ext.js 4 you can see this thread at sencha forum