Is there any dirty flag in the Kendo-Grid? In the old JQuery version there was one, but in the Angular version I don't see anything like that: https://www.telerik.com/kendo-angular-ui/components/grid/
And if no, how can I get to know about changes?
As far as I know, trackBy is something you could use in that case.
I guess you could find the following link helpful
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-trackby
Please make a demo if you like to see if it works for you and check more things.
The data items has a dirty field.
var grid = $("#grid").data("kendoGrid");
var data = grid._data;
$.each(data, function (index, item) {
if(item.dirty)
{
// do something
var foo = "kung";
}
});
Related
I'm looping through a table in the form of table.rows.length and inside it rows.cells.length and when a certain cell meets a certain criteria then I would like to set an attribute to that html of that cell.
I know you can change the innerHTMl like
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
so I thought the attr would be like
x[0].attr = ('name', 'value');
But no such luck.
could someone please point me to the right direction?
If there are any resources you can recommend that give a full list of all the options you can add to a cell this way that would be great!
Since you're operating with HTML nodes directly - you're dealing with HTMLElement objects that are, in their turn, inherited from generic Element.
As you can see from documentation - you can reach attributes through Element.attributes map, each of them are Attr object with name and value properties.
So correct way will be to use:
x[0].setAttribute('name', 'value');
Working with jQuery and es6 syntax you could use the map function:
var xtr = $('#mytable tr');
xtr.map(itr => {
xtd = $(itr).children('td');
xtd.map(itd => {
$(itd).attr('key', 'value');
});
});
If thats confusing you can work with the for loop the old way:
var xtr = $('#mytable tr');
for(i in xtr){
xtd = $(xtr[i]).children('td');
for(j in xtd){
$(xtd[j]).attr('key', 'value');
}
}
Point being when using jQuery what you do is:
$('element').attr('key', 'value');
I'm using Mootools (don't think it is related to the problem) to drag and drop and element.
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
$('timeLabel').innerHTML = calculatedTime;
},
});
Basically, I can drag my 'timeHandle' and the 'timeLabel' is getting updated properly.
The problem is that sometimes, after moving the handle a little bit, suddently, the UI is not getting updated. The 'timeHandle' is not moving and the 'timeLabel' is not getting updted.
The problem is not with the drag event, I can see it keeps on getting called.
When I move
$('timeLabel').innerHTML = calculatedTime;
everything works fine.
So, the problem is not with the 'Drag' object since the event is kept on calling.
Looks like some UI performance issue.
Thanks
To simplify your code, you can use Element.set('text', 'my text here');
var element = $('timeLabel');
var draggable = new Drag(timeHandle, {
onDrag: function () {
element.set('text', calcTime());
}
});
Also, remember to remove that last comma or it will throw errors in Internet Explorer.
OK, found a to make it work.
I still not sure what caused the problem but it looks like the 'innerHTML' command has either really poor performance which causes problems in the GUI updates or maybe some kind of internal mechanism (IE only? which is supposed to prevent the UI from updates overflow.
Anyway, instead of using the innerHTML, I'm doing the following:
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
var element = $('timeLabel');
element.removeChild(element.firstChild);l
element.appendChild(element.ownerDocument.createTextNode(calculatedTime));
},
});
Works like a charm
I'm going nuts here but the each function is just not working for me.
I have about 20 elements with a class name of "lookup" (text boxes) and this function successfully turns all elements red:
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.setStyle("color", "red");
});
However, in the following code, I would expect to get some alert for each element but the alert don't hit at all, and no exception is raised either. It is like the each is iterating through 0 items....
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.each(function(el)
{
alert("hi");
});
});
Any idea what I might be doing wrong?
In both examples above, I used $$('.lookup').each and $$('.lookup').setStyle() with the same outcome (example 1 works; example 2 doesn't).
Thanks in advance.
Which browsers have problems? Try use 'window' instead 'document'
window.addEvent('domready', function(){
var tb = $$('.lookup');
tb.each(function(el){
el.setStyle("color", "red");
alert("hi");
});
});
In mootools better always use 'each' for working with array of elements.
I've discovered that reordering the mootools include script so that it is referenced after the Microsoft WebResource.axd?d= include script resolves the problem. Mootools appears to handle the conflict, whereas Microsoft ASP.NET can't.
I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
Thanks.
EDIT - I also need this to work for password input fields.
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add var before test.
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
(function () {
// ...
})()();
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
Placeholder Plugin
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
http://webcloud.se/code/jQuery-Placeholder/
Anyone knows how to get the variant tabs to work as actual tabs and not as a drop down?
This is how sr.wikipedia.org has it:
and this is how I have it on my zablude.com/wiki/ page:
and I've tried everything I found and searched everywhere I could think of but I wasn't able to find a solution... anyone has any ideas how this works?
They hack it in JavaScript — see this piece of code at the bottom of Медијавики:Vector.js:
//to be able to switch the language variant (overrides the default buttons with more visible ones)
function tabWorkaround() {
if(mw.config.get('wgUserVariant') == 'sr') {
var tab_urls = {};
tab_urls[0] = document.getElementById('ca-varlang-0').getElementsByTagName('a')[0].href; //Ћирилица
tab_urls[1] = document.getElementById('ca-varlang-1').getElementsByTagName('a')[0].href; //Latinica
$('#p-variants').remove();
mw.util.addPortletLink('p-namespaces', tab_urls[0], 'Ћирилица');
mw.util.addPortletLink('p-namespaces', tab_urls[1], 'Latinica');
}
}
$(document).ready(tabWorkaround);
It would probably be cleaner to do it with a MediaWiki hook, though. The following code is untested, but should work if I haven't made any silly mistakes:
// show language variants as tabs in Vector skin
function tabWorkaround( &$skintemplate, &$links ) {
$links['namespaces'] += $links['variants'];
$links['variants'] = array();
return true;
}
$wgHooks['SkinTemplateNavigation::Universal'][] = 'tabWorkaround';
(In MW 1.17, this hook is only called from the Vector skin. In MW 1.18, it will affect all skins. If you don't want that, you could test whether $skintemplate->skinname == 'vector'.)
Try $wgVectorFeatures['collapsibletabs']['global'] = false;. That is intended for the dropdown on the other side, but might work for other dropdowns as well.