I have this MaskedTextBox:
<div style="direction:ltr;padding-left:20px;">
#(Html.Kendo().MaskedTextBox()
.Name("nationalityCode")
.Mask("000000000000").HtmlAttributes(new { #class = "login-input user-pass", width = "300px", placeholder = "Enter you code" })
)
</div>
My problem is NationalityCode can be 8 or 12 length , If I use above code,then in Runtime enter a code with 8 length, it will pass null to controller .
Related
A button is clicked to trigger LoadImages method to load a series of pictures into the web page. I want to add an onclick event for each picture so when user click it, the picture name is displayed. How to use Dojo to achieve this?
LoadImages(PictureNames){
var resultUl = new Builder('<ul />');
for (i = 0; i < PictureNames.length; i++){
resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>');
}
dom.byId('Pictures').innerHTML = resultUl;
}
DisplayPictureName(picturename)
{
dom.byId('PictureName').value = picturename;
}
<label id="PictureName">here displays picture name</label>
<div id="Pictures"></div>
Make the elements using dojo/dom-construct and attach events using dojo/on.
var resultUl = domConstruct.create('ul');
for (i = 0; i < PictureNames.length; i++){
var image= domConstruct.create('img', {
id: PictureNames[i]',
src: "./images/"+ PictureNames[i],
style: {"height: 200px; width: 250px"},
class: "photo"});
var li= domConstruct.create('li');
domConstruct.place(li, resultUl);
domConstruct.place(image, li);
dojo.on(image, 'click', this.DisplayPictureName());
}
dom.byId('Pictures').innerHTML = resultUl;
You can find many snippets online for the DataStructure of a TemplaVoila FCE, to let it render multiple images in one field. This doesn't work on TYPO3 6+. The whole object just doesn't pop up, but TemplaVoila is also not throwing an error.
The Typoscript of the DS looks like this:
10 = COA
10 {
10 = HTML
10 {
value.field = field_carousel
value.split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10 {
file {
import.current = 1
import = uploads/tx_templavoila/
maxW = 1920
}
}
}
}
}
}
The field-name is correct. As you can see here: https://snipt.net/mawe/f/ it works actually on TYPO3 4.7.x. Though, on 6+ it seems to break something. The output remains blank.
The field-type is image (I tried it with fixed width/height and without). If I keep the original TypoScript, it just shows the first image in my list, which is the correct behaviour:
10 = IMAGE
10 {
file {
import = uploads/tx_templavoila/
import.current = 1
import.listNum = 1
maxW = 1920
}
}
Anyone knows, how to solve this problem? The final result has to be something like this (I need to wrap it into those div containers as well):
<div class="item">
<img src"..." alt="" title="" />
</div>
<div class="item">
<img src"..." alt="" title="" />
</div>
...
cObj HTML is deprecated: TYPO3 lib HTML and TEXT code
So simply change your code to:
10 = COA
10 {
10 = TEXT
10 {
value.field = field_carousel
value.split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10 {
file {
import.current = 1
import = uploads/tx_templavoila/
maxW = 1920
}
}
}
}
}
}
I have a grid with a subgrid, editable as cellEdit. In this subgrid I have one column that is a dropdownlist. What I want to do is disable inmediately two other cells in the grid (only in the same column) if the selected value of the list is "LIBRE".
I'm doing as follows (in the subgrid definition part):
afterEditCell:function(id, cellname, value, iRow, iCol){
var grid=jQuery("#" + subgrid_table_idHilos);
var ret = jQuery("#" + subgrid_table_idHilos).jqGrid('getRowData',id);
if(ret.nombreestadoe1=="LIBRE"){
grid.jqGrid('setCell',id,'conectadoe1','','not-editable-cell');
grid.jqGrid('setCell',id,'puertohiloe1','','not-editable-cell');
}
else if(ret.nombreestadoe1!="LIBRE"){
var iCol = getColumnIndexByName(grid,"conectadoe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
iCol = getColumnIndexByName(grid,"puertohiloe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
}}
The thing is: it is working, but only after clicking two times in different cells, and that's because right after the selected value is changed, the content of ret.nombreestadoe1 is:
<select role="select" id="10_nombreestadoe1" name="nombreestadoe1"><option style="background-color: green;" value="1" role="option">LIBRE</option><option style="background-color: red;" value="2" role="option">OCUPADO</option><option style="background-color: purple;" value="3" role="option">ROTO</option><option style="background-color: grey;" value="0" role="option">SIN DEFINIR</option></select>
After clicking somewhere else, it works fine, as the right value is already set in the list.
How can I get what it was just selected?
Thanks!
I found what to do. First, I do it in the 'change' function in dataevents of the column where the first list is. This way I get the selected value inmediately, I check it, and depending on the value, I disable the cell with the same code. Here the code:
{name:"nombreestadoe1",stype:'select',searchoptions: {dataUrl:'json/estadosHilos.jsp',searchhidden:true},editable:true,edittype:'select',editoptions: {dataUrl:'json/estadosHilos.jsp',
dataEvents: [
{ type: 'change', fn: function(e) {
var grid=jQuery("#" + subgrid_table_idHilos);
var id=grid.jqGrid('getGridParam', 'selrow');
switch (e.currentTarget.selectedIndex){
case 0:
color="green";
grid.jqGrid('setCell',id,'conectadoe1','','not-editable-cell');
grid.jqGrid('setCell',id,'puertohiloe1','','not-editable-cell');
break;
case 1:
color="red";
break;
case 2:
color="purple";
break;
case 3:
color="grey";
break;
default:
color="white";
break;
}
if(color!="green"){
var iCol = getColumnIndexByName(grid,"conectadoe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
iCol = getColumnIndexByName(grid,"puertohiloe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
}
e.currentTarget.parentElement.style.backgroundColor=color;
}},
]},index:"nombreestadoe1",width:70,hidden:false
},
In my angularJS application I have a collection (array) of rather large objects. I need to bind to this collection in various places (e.g. to display the property: name of the contained objects) - binding is essential, as these names might change.
As the normal ngRepeat would observe the whole collection by strict equality comparison I am concerned about application speed (we are talking about objects with thousends of properties or more) - I actually just need to observe general changes in the collection (like length, changes of the single references in case two elements are flipped and some specific properties like the mentioned .name property)
I am thinking about using the following approach (basically creating a custom copy of the collection and manually bind to the original collection.
My question:
Is the described approach better than watching the original collection (by equality - as it is my understanding the ngRepeater does) or is there some better approach (e.g. defining some kind of compare callback in a watch statement to check only for changes in certain properties,...)
<script>
function QuickTestController($scope) {
// simulate data from a service
var serviceCollection = [], counter = 0,
generateElement = function() {
var element = { name:'name' + ++counter };
//var element = { name:'name' };
for (var j = 0 ; j < 5 ; j++) element['property' + j] = j;
return element;
};
for (var i = 0 ; i < 5 ; i++) {
serviceCollection.push( generateElement() );
}
// in the view controller we could either bind to the service collection directly (which should internally use a watchCollection and watch every single element for equality)
$scope.viewCollection = serviceCollection;
// watching equality of collection
/*
$scope.$watch('_viewCollectionObserve', function(newValue, oldValue) {
console.log('watch: ', newValue, oldValue);
}, true);
*/
// or we could create our own watchCollection / watch structure and watch only those properties we are interested in
$scope._viewCollectionObserve = serviceCollection;
var viewCollectionManual = [],
rebuildViewCollection = function() {
viewCollectionManual = [];
for (var i = 0, length = serviceCollection.length ; i < length ; i++) {
viewCollectionManual.push( {name:serviceCollection[i].name } );
}
console.log('- rebuildViewCollection - ');
$scope.viewCollection2 = viewCollectionManual;
},
watchCollectionProperties = [],
unregisterWatchCollection = function() {},
rebuildWatchCollectionProperties = function() {
watchCollectionProperties = [];
for (var i = 0, length = serviceCollection.length ; i < length ; i++) {
watchCollectionProperties.push('_viewCollectionObserve[' + i + ']'); // watch for ref changes
watchCollectionProperties.push('_viewCollectionObserve[' + i + '].name'); // watch for changes in specific properties
}
unregisterWatchCollection();
var watchString = '[' + watchCollectionProperties.join(',') + ']';
unregisterWatchCollection = $scope.$watchCollection(watchString, function(newValues, oldValues) {
console.log('watchCollection: ', newValues, oldValues);
rebuildViewCollection();
});
};
$scope.$watch('_viewCollectionObserve.length', function(newValue, oldValue) { // watch add / remove elements to / from collection
console.log('watch / length: ', newValue, oldValue);
rebuildWatchCollectionProperties();
});
// rebuildViewCollection();
rebuildWatchCollectionProperties();
// click handler ---
$scope.changName = function() { serviceCollection[0].name += '1'; };
$scope.changeSomeProperty = function() { serviceCollection[0].property0 += 1; };
$scope.removeElement = function() { serviceCollection.splice(0, 1); };
$scope.addElement = function() { serviceCollection.push( generateElement() ); };
$scope.switchElement = function() {
var temp = serviceCollection[0];
serviceCollection[0] = serviceCollection[1];
serviceCollection[1] = temp;
};
// will of course not react to this (this is desired behaviour!)
$scope.removeCollection = function() { serviceCollection = []; };
}
</script>
<div data-ng-controller="QuickTestController">
<ul>
<li data-ng-repeat="element in viewCollection">{{element.name}} {{element}}</li>
</ul>
<hr>
<ul>
<li data-ng-repeat="element in viewCollection2">{{element.name}} {{element}}</li>
</ul>
<button data-ng-click="changName()">changName</button>
<button data-ng-click="changeSomeProperty()">changeSomeProperty</button>
<button data-ng-click="removeElement()">removeElement</button>
<button data-ng-click="addElement()">addElement</button>
<button data-ng-click="switchElement()">switchElement</button>
<hr>
<button data-ng-click="removeCollection()">removeCollection (see comment)</button>
</div>
Any help / opinions would be greatly appreciated - please note that I tried to create a fiddle to demonstrate my approach but failed :-(
(I know that benchmarking might be a possible solution to test my approach, but I´d rather know the opinion of the angularjs pros in here)
thanks,
matthias
I think what you're looking for is bindonce, which is a high performance binding directive that lets you bind a property or expression once in AngularJS, just as what its name suggests.
One thing you can also try is a 'track by' expression. If you have a property that is unique for each object in the collection, you can pass that to your repeat expression.
<div ng-repeat="item in items track by item.id"></div>
I think Angular will then just watch that property on each of your items. So this should improve performance, but I don't know how much.
I am able to render a tree using YAHOO.widget.TreeView yui 2.9.
Using pre made tags
<ul> <li> Products </li> </ul>
I am able to get the label i.e Products using node.label
YAHOO.util.Event.on('allProductSaveButton','click',function() {
var hiLit = rightProductTree.getNodesByProperty('highlightState',1);
if (YAHOO.lang.isNull(hiLit)) {
YAHOO.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(hiLit[i].label); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
}
});
I want to insert id of the Products in the html and get the id of label as well. so where should I place id attribute inside or where?
I am not sure you can set your own id on the markup. TreeView is one of the oldest widgets in YUI 2 and it uses a particularly funny markup because the supported CSS styles in those days were quite pathetic, thus, what part of that funny markup are you going to apply that id to?
If what you want is to give a tree-node an identifier that you can later use to retrieve it, then use custom properties. Then, calling getNodesByProperty will allow you to retrieve the node by the value of that extra property.
I got a solution. I inserted the label element inside the span element that was inside the li element i.e
<ul>
<li> <span> <label id="444" > Product </label> </span>
</li>
</ul>
then using YAHOO.util.Dom I traversed and got the id attribute of label element.
YAHOO.util.Event.on('GroupsProductSaveButton', 'click', function() {
var hiLit = rightProductTree2.getNodesByProperty('highlightState', 1);
if (YAHOO.lang.isNull(hiLit)) {
alert("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(YAHOO.util.Dom.get(hiLit[i].contentElId).getElementsByTagName('label')[0].getAttribute("value")); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
ProductGroupDWR.displaySelectedNodes(labels, function(data) {
});
}
});