I think this is probably pretty simple, but I need pointing in the right direction.
I've got a master/child grid and I'd simply like to be able to get a count of child rows when selecting (or various other actions, e.g. save or edit ) the master row.
Thanks
I created a fiddle and played around a bit. It's not always working, e.g. when you haven't got the details grid yet or when opening a detail row for the first time, but it should give you an idea on how get the cound of a hierarchical grid.
Fiddle: http://jsfiddle.net/9BGpr/
Open console to get output.
Main code is here:
selectable: 'row',
change: function (e) {
var kendoGrid = this;
setTimeout(function () {
console.log("e", e)
var $selectedRow = kendoGrid.select();
if ($selectedRow.length != 1) {
console.log("Please select a single row!");
return false;
}
if ($selectedRow.hasClass('k-master-row')) {
var $detailRow = $selectedRow.next().filter('.k-detail-row');
if ($detailRow.length === 0) {
console.log("Could not find detail row!");
return false;
}
var $detailGrid = $detailRow.find('.k-grid');
if ($detailGrid.length === 0) {
console.log("Could not find grid in detail row!");
return false;
}
var kendoGridDetails = $detailGrid.getKendoGrid();
console.log("Total of records in detail grid: " + kendoGridDetails.dataSource.total());
}
});
Related
So, my company is working in a rails fleet manager, and i'm struggling to show in real-time a simple operation of a unit (amount * value) in real time to the user.
This is the .haml file where the form is show to user:
What is the best way to do it?
I think this has nothing to do with Rails. You can simple create a 'change' event listener in the input fields of your form to calculate it. If you are using turbolinks then you can do something like this:
document.addEventListener("turbolinks:load", function() {
// Get the elements in DOM
var amount = document.getElementById("amount");
var unitValue = document.getElementById("unit_value");
var result = document.getElementById("result");
// Calculate and return unite values times amount.
function calculate_total(unit, amount) {
// If there is no value on input set 0 by default
if (unit == "") {
unit = 0
}
if (amount == "") {
amount = 0
}
return parseInt(unit) * parseInt(amount)
}
// Set the event listener to inputs on user keyboard input
amount.addEventListener("keyup", function(e) {
result.value = calculate_total(unitValue.value, amount.value)
});
unitValue.addEventListener("keyup", function(e) {
result.value = calculate_total(unitValue.value, amount.value)
});
})
This code is not tested, but is to give you the idea.
I want to make a form (type checkbox), which it can select at least one option, adn at most two options, but I don't know how to code it in HTML...
Use jQuery for that, can be easily done using change event:
var limit = 1;
$('input.yourclassname').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
I'm using primefaces v5.3 dataTable with liveScroll="true" and selectionMode="multiple".
Header checkbox selects only visible rows and when i scroll down new rows appear non selected.
I want header checkbox to select all rows: visible and invisible.
Selection of only visible rows is meaningless and useless.
Is it possible to fix?
I tried to add all table data to selection by processing "toggleSelect, rowSelectCheckbox and rowUnselectCheckbox" events. It works on backend, but in UI rows are unselected anyway.
Use this script to replace the original updateData function of primefaces
PrimeFaces.widget.DataTable.prototype.updateData = (function() {
var cached_function = PrimeFaces.widget.DataTable.prototype.updateData;
return function() {
var reselectAll = (this.selection != undefined && (this.selection[0] === '#all' || this.selection.length === this.getTbody()[0].getElementsByTagName('tr').length);
var result = cached_function.apply(this, arguments);
if (reselectAll) {
this.selectAllRows();
}
return result;
};
})();
that will automatically select the new loaded rows on the table(only the ones that are visible on the client side)
I have a table that I'm trying to implement individual column search on using jQuery DataTables. The API that describes how to do this is here: https://datatables.net/examples/api/multi_filter.html which is what I used when attempting to implement this. I'm also using a global search function, which allows me to search across all tables. As far as I can see, the conflict comes in between using
var table = $(".datatable").dataTable();
versus
var table = $(".datatable").DataTable();
because they return two different things (this is described in the following answer given to a related question --> dataTable() vs. DataTable() - why is there a difference and how do I make them work together? after reading this, I tried using the solution like so:
table.api().columns().eq(0).each(function(colIdx) {
but sadly this didn't make the feature work. The table appears just fine along with the searchboxes at the bottom of each column, and the global search works perfectly. If you could spot something I might be doing wrong or give any advice it would be much appreciated. The complete script is as follows:
script.
$(document).ready(function() {
$('.datatable').DataTable({
});
// THIS IS THE GLOBAL SEARCH CODE
$.fn.dataTableExt.oApi.fnFilterAll=function(oSettings,sInput,iColumn,bRegex,bSmart){
var settings = $.fn.dataTableSettings;
for (var i = 0; i < settings.length; i++) {
settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
}
};
var table = $(".datatable").dataTable();
$("#Search_All").keyup(function () {
// Filter on the column (the index) of this element
table.fnFilterAll(this.value);
});
// THIS IS THE INDIVIDUAL COLUMN SEARCH
$('.datatable tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
table.api().columns().eq(0).each(function(colIdx) {
var that = this;
$('input', this.footer()).on('keyup change', function(){
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
})
});
});
Thanks for your time!
I'm using the mootools wall plugin, Its working well in my application, however if I add multiple (image) walls it only works for one wall ::: My understanding of scripting is not good enough to add a each function or similar :::
I need to "bind" the code below to say 2 divs like this :::
My First wall:
<div id="viewport">
<div id="wall">
Second wall:
<div id="viewport">
<div id="wall_02">
Any assistance would be appreciated.
var wallIMAGES = new Wall( "wall", {
"width": scArray[1],
"height": scArray[1],
callOnUpdate: function(items){
items.each(function(e, i){
var el = wall[counterFluid];
if (el) {
var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el));
a.inject(e.node).set("opacity", 0).fade("in");
e.node.store("tubeObject", el);
}
counterFluid++;
// Reset counter
if( counterFluid >= scArray[10].length) counterFluid = 0;
})
}
});
wallIMAGES.initWall();
Maybe something like this:
var my_wall_ids = ['wall', 'wall_02'];
var myWalls = [];
var baseWallOptions = {
"width": scArray[1],
"height": scArray[1],
callOnUpdate: function(items){
items.each(function(e, i){
var el = wall[counterFluid];
if (el) {
var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el));
a.inject(e.node).set("opacity", 0).fade("in");
e.node.store("tubeObject", el);
}
counterFluid++;
// Reset counter
if( counterFluid >= scArray[10].length) {counterFluid = 0;}
}); // end items.each
}
}
for (var i=0;i<my_wall_ids.length;i++){
var id = my_wall_ids[i];
var wallOptions = baseWallOptions;
// if your customization was something like changing
// the height , but only on the 'wall' element
if (id === 'wall') {
wallOptions.height = 400;
}
myWalls[i] = new Wall(id, wallOptions);
myWalls[i].initWall();
}
If you read Wall's documentation, you'll notice that, just like most other classes, the first argument it takes is an element id.
So, if your initialization code states
new Wall("wall", { …
…then it will be applied to the element that has the id "wall".
You could simply duplicate your code and use one with "wall", the other one with "wall_02". However, that would be bad practice. Indeed, if you later wanted to change some options, you'd have to do it in two distinct blocks, and they would probably get out of sync.
If your only difference lies in the target id, and the options are to be shared, simply store the options object (second parameter to the Wall class) in a variable and use it twice! That is:
var wallOptions = { width: … };
var wallImages = new Wall("wall", wallOptions),
wallImages2 = new Wall("wall_02", wallOptions);
wallImages.initWall();
wallImages2.initWall();
It could be even better to embed initalization in a function, but this solution is probably the easiest if you simply want to have two Wall instances without learning much more about JS.