We Keep Coding

Dojo Dgrid: select deselect of header checkbox

I am using Dojo "dgrid/OnDemandGrid".In that i am using its inbuilt functionality of check-box for each row.
The problem is whenever i am selecting all the check-boxes one by one then its header check-box i.e. select all check-box is not getting checked and same with whenever am deselecting all the check-boxes one by one then the select all check-box didn't get deselected remains in mixed state . There three states True,False and Mixed.
When i was searching a solution for this i found that its a bug in Dojo Dgrid itself.
This is the URL where you can check.DOjo Dgrid Sellect All functionality
Please help me to resolve this issue, Thanks in advance.

The property used to updated the header checkbox (allSelected) is not updated when you select the rows individually. You might be right it might be a bug. Have you reported it?
The workaround solution I could think of is to update the state of the header checkbox yourself. Below is the code to do the same.
grid.on('dgrid-select', function () {
var selectedRows = [];
for (var e in grid.selection) {
grid.selection[e] && selectedRows.push(e)
}
//get the selector column and checkbox from that column
var column = grid.columns["select"];
var headerCheckbox = column._selectorHeaderCheckbox;
if (selectedRows.length === grid.get('total')) {
//update the checkbox when the selection count equal to total count.
headerCheckbox.indeterminate = false;
headerCheckbox.checked = true;
headerCheckbox.setAttribute('aria-checked', 'true');
grid.allSelected = true;
}
});
grid.on('dgrid-deselect', function () {
var selectedRows = [];
for (var e in grid.selection) {
grid.selection[e] && selectedRows.push(e)
}
//get the selector column and checkbox from that column
var column = grid.columns["select"];
var headerCheckbox = column._selectorHeaderCheckbox;
if (selectedRows.length === 0) {
headerCheckbox.indeterminate = false;
headerCheckbox.checked = false;
headerCheckbox.setAttribute('aria-checked', 'false');
grid.allSelected = false;
}
});
Hope this was helpful.

How to autoselect radio buttons in jQuery

I have a form that contains several rows of radio buttons. When a button is selected in the first row (only first row), I need the subsequent rows to be auto-selected one position over (to the right) from the previous selection until end of table is reached.
Result should look like this, after clicking on "MD" in the first row:
Desired Output
See JSFiddle Example Here
The solution should be relative-position-based if that makes any sense. The only element with consistent ID is the table ("#skuTable").
What I have so far is this (console logging to debug):
$("#skuTable tr").first().find("input:radio").on("click", function(){
var $this = $(this);
console.log($this);
console.log($this.position());
console.log($this.parents("tbody").children("tr:nth-child(2)").find("input:radio").first().prop('checked', true));
});
What that manages to do is select the first radio button on the following row. I need some help figuring out how to select the next radio button relative to the first one's position.

This is how I did it:
var rows = $("#skuTable tr");
rows.eq(0).find("input:radio").each(function(i) {
$(this).on("click", function() {
for(var m = 0, n = rows.length;m < n;m++) {
rows.eq(m).find("input:radio").eq(i + m).attr("checked", true);
}
});
});
DEMO: https://jsfiddle.net/Lnk9p55x/4/

one more solution:
$("#skuTable").find("input:radio").on("click", function(){
loop = 0;
$("input").prop("checked",false);
index = $(this).parent().index("td");
$.each($("table tbody tr"), function() {
$("table tbody tr:eq("+loop+")").find("td:eq("+index+")").find("input:radio").prop('checked', true);
index++;
loop++;
});
});
https://jsfiddle.net/Lnk9p55x/7/

Check duplicate column data using Jquery filter

Notice that my first two table Data (Apple and Orange) are set to read-only. And I do have function for dynamic adding of row.
see this FIDDLE FOR DEMO
If the user click the Save button, all input field that detect duplicate of data from database or last duplicate of data from row which dynamically added, border-color will change to red.
$("#save").off("click").on("click",function(){
var $rows = $('#myTable tbody tr:not(:hidden)');
$rows.each(function(){
var $id = $(this).find('td input[type=\'text\']');
alert($id.val());
//Im stuck here, for checking column data is duplicate.
});
});
Im looking forward on using Jquery filter , like this :
$( "li" ).filter( "DUPLICATE DATA()" ).css( "border-color", "red" );

I am assuming you want to target the "Name" column, although you could easily change this to target all columns.
Basically, you want to go through the input elements, keeping a reference to the values you've already reviewed:
$("#save").off("click").on("click",function(){
var existing = [];
var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
var value = $(this).val();
if (existing.indexOf(value) >= 0) {
return $(this);
}
existing.push(value);
});
duplicates.closest('tr').css('background-color', 'red');
});
JSFiddle
Edit: To avoid marking a read-only line as a duplicate, the process is a little less straightforward
$("#save").off("click").on("click",function(){
// Clear status of all elements
$('#myTable tr').css('background-color', 'none');
// Get all values first (Apple, Orange, etc) as strings
var allValues = $('#myTable td:nth-child(3) input').map(function() {
return $(this).val();
}).toArray();
// Iterate unique values individually, to avoid marking a read-only input as duplicate
var processedValues = [];
for (var i = 0; i < allValues.length; i++) {
var value = allValues[i];
if (value != '' && processedValues.indexOf(value) >= 0) continue;
var inputs = $('#myTable td:nth-child(3) input').filter(function() { return $(this).val() == value; });
// Check if this value is in one of the readonly
var readOnlyInput = inputs.filter(function() { return $(this).is('[readonly]'); });
if (readOnlyInput.length) {
inputs.not(readOnlyInput).closest('tr').css('background-color', 'red');
} else {
inputs.not(':first').closest('tr').css('background-color', 'red');
}
processedValues.push(value);
}
});
Updated JSFiddle

How to change row number when add\delete rows

I have integrated add row and delete row functionality in my table. If i add row second row number is also 1. I need to change number of each row as per every add and delete like 1, 2 etc.
I used the code from this fiddle http://jsfiddle.net/MJGV2/6/.
How to achieve this? Any help would be appreciated. Thanks.

You can add this:
var renum = 1;
$("tr td strong").each(function() {
$(this).text(renum);
renum++;
});
See this Fiddle demo.
There are a lot of errors in your code - for example all id needs to be unique and you should fix this.

For example, you can add call recalculate function, like this:
function recalculate() {
var i = 1;
$(".numberRow").each(function() {
$(this).find("strong").text(i++);
});
}
Where numberRow is css class on td, where store number of row.
I add this in your jsfiddle example

There were lot of things missing in your code. i have tuned everything properly
JS CODE:
$("input[type='button'].AddRow").on('click',
function () {
if ($(this).val() == 'Delete') {
trSet = $(this).closest('tr').nextAll();
currIndex = $(this).closest('tr').find('td span').html();
$(this).closest('tr').remove();
trSet.each(function () {
$(this).find('td span').html(currIndex);
currIndex++;
});
count = currIndex - 1;
} else {
var $tr = $(this).closest('tr').clone(true);
var $input = $tr.find('input.startdatum');
++count;
$tr.find('td span').html(count);
$(this).val('Delete');
var id = 'datepicker' + count;
$input.attr('id', id).data('index', count);
console.log(count);
$tr.appendTo($(this).closest('table'));
setdatepicker();
}
});
LIVE DEMO:
http://jsfiddle.net/MJGV2/14/
Happy Coding :)

How to get all td's spans by clicking outside button?

i have been read alotof article about each(function(){ .... to get values html tablee childs. But i can not do that. i would like you help me. My some bad experiments are not working.There is a outside a button which is not in rows. While clicking a button, row values must return me.I need td's span values...
My not working samples: NOT WORKING:
var id = $("#listsends").closest("tr").find(".label label-warning").text();
NOT WORKING :
alert(id);
$("#listsends").find('.label label-warning').each(function () {
var textval = $('.label label-warning').text(); // this will be the text of each <td>
alert(textval);
});
var t = $('.label label-warning');
for (var i = 0; i < t.length; i++)
alert(t[i].text());
By clicking web button(outside of table, not inside) , tables's td ^s span values:

$("#listsends").find('.label label-warning').each(function () {
var textval = $(this).text(); // as this is the scope of the element
alert(textval);
});