Develop Reference

Check if KendoGrid selected checkbox is checked or not

I have a ASP.Net MVC Kendo Grid with checkbox selection, as the documentation I added the checkbox using columns.Select().Width(50); as, then I want to fill an array of selected checkboxes inside of onChange function with javascript as:
Note: the stations array already have some values I.E [1,2,3], so I want to add new values in the next script
function onChange(e) {
const grid = $("#grid").data("kendoGrid");
var items = grid.items();
let ids = '';
grid.select().each(function() {
if (ids === '')
ids = grid.dataItem(this).StationId.toString();
else
ids = ids + ',' + grid.dataItem(this).StationId.toString();
stations.push(grid.dataItem(this).StationId);
})
}
The problem is on each check it is adding all existing checked checkboxes, I have no way to do something like if(checkbox is not checked) do a pop instead a push.
How can I check if clicked checkbox is checked or not in order to implement push or pop logic?

The select method will return all rows that are currently selected. If you need to figure out which is the checkbox that the user clicked last, you can probably toggle a class when the checkbox is checked/unchecked
function onChange(e) {
const grid = e.sender;
var items = grid.items();
let ids = '';
grid.select().each(function(idx,itm) {
$(itm).find("input").hasClass("checkedFlag") ?
kendoConsole.log(grid.dataItem(itm).ProductName + " was checked") :
kendoConsole.log(grid.dataItem(itm).ProductName + " was NOT checked");
})
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
function onDataBound(arg) {
$("input.k-select-checkbox").change(function(){
$(this).toggleClass("checkedFlag")
})
kendoConsole.log("Grid data bound");
}
If you are interested in only the Id's of the selected items then the Grid exposes a selectedKeyNames method, that you could use instead.

The change event of the Kendo grid will fire when the user selects or deselects a table row or cell in the grid (documentation), but it does not provide us with which rows are selected or deselected.
What you will need to do is store the selected items outside of the grid, compare it to the results of the select method in the change event, then store the updated results.
Something along these lines:
var selectedRecords = [];
function onChange(e) {
var updatedSelectedRecords = e.sender.select();
if (selectedRecords) {
var recordsSelected = updatedSelectedRecords.filter(record => !selectedRecords.includes(record)).map(record => record.StationId.toString());
stations.push(...recordsSelected);
var recordsDeselected = selectedRecords.filter(record => !updatedSelectedRecords.includes(record));
// do something with deselected records?
}
selectedRecords = updatedSelectedRecords;
}

Get sibling td values based on all checked checkboxes in a datatable?

$('#save-board-assignees').click(function ()
{
$('#board_assignee_table_wrapper input[type="checkbox"]:checked').each(function(i, td_e)
{
console.log('Found checked checkbox');
var assignee_id = 0;
var team_id = 0;
var assignee_holder = [];
assignee_id = $(this).closest('td').next().attr('id');
assignee_name = $(this).closest('td').next().html();
team_id = $(this).closest('td').next().next().attr('id');
console.log('Assignee name: ' + assignee_name);
console.log('Team id: ' + team_id);
console.log('Assignee id: ' + assignee_id);
assignee_holder.push(assignee_id, assignee_name);
board_assignees.push(assignee_holder);
});
}
This code only gets the values of the sibling <td> (Assignee name, team id, assignee id) of the checked checkbox on the page selected. It doesn't pick up the checked checkboxes in the other pages of the DataTable.
Here's a sample snippet of the table structure:
https://jsfiddle.net/30u4knrs/

Use .$() (https://datatables.net/reference/api/%24()) to access all table elements (not just those currently visible):
var table = $('#example').DataTable();
table
.$('input[type="checkbox"]:checked')
.each(function(i, td_e) { ...

How to alter table row value which is inserted dynamically using Jquery?

I want to alter HTML Table row which is inserted by dynamically.
At beginning there will no rows in table.
HTML Code
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JQUERY Code
//SELECT Table ROW
$(document).on("click", '#queryTable tbody tr', function () {
var tr = $(this);
var FieldName = tr.find("td:first").text();
var Values = tr.find("td:last").text();
FieldName = FieldName.replace('AND ', '');
FieldName = FieldName.replace('OR ', '');
Values = Values.replace('IN(', '');
Values = Values.replace(')', '');
$("#FilterField option[value=" + FieldName + "]").attr("selected", true);
$("#FilterField").val(FieldName);
$("#txtFilterValue").val(Values); //FilterValue textbox id
});
$("#btnChange").click(function () {
td.text($("#txtFilterValue").val());
});
Those 3 records are added dynamically. When user wants to modify the value of any FieldName of Values ,Once user click that row from the table, the value will show on Filter Value textbox as you can see above.
In the above pic, User select second row. once the user change the value in textbox and when they click the Change button the second row should alter.

Assuming your table id as YOURTABLEID and your textbox id as FILTERVALUETEXTBOX
var td;
$(document).on("click","#YOURTABLEID td",function(){
td=$(this);
$("#FILTERVALUETEXTBOX").val($(this).text());
});
If you want to click on tr and want to get second td value, then
var td;
$(document).on("click","#YOURTABLEID tr",function(){
td=$(this).find("td:last"); //AS SECOND TD IS LAST
$("#FILTERVALUETEXTBOX").val(td.text());
});
Once you get your td value in textbox, Change button click event will be as follow
$("#btnChange").click(function(){
td.text($("#FILTERVALUETEXTBOX").val());
});
UPDATE
var td;//THIS IS MISSING IN YOUR CODE
$(document).on("click", '#queryTable tbody tr', function () {
var tr = $(this);
td=$(this).find("td:last");//THIS IS MISSING IN YOUR CODE
var FieldName = tr.find("td:first").text();
var Values = tr.find("td:last").text();
FieldName = FieldName.replace('AND ', '');
FieldName = FieldName.replace('OR ', '');
Values = Values.replace('IN(', '');
Values = Values.replace(')', '');
$("#FilterField option[value=" + FieldName + "]").attr("selected", true);
$("#FilterField").val(FieldName);
$("#txtFilterValue").val(Values); //FilterValue textbox id
});
$("#btnChange").click(function () {
td.text($("#txtFilterValue").val());
});

Select unselect checkboxes using jquery

I have a list of checkboxes in my kendo grid.Select all option is also there.
Problem is When i click select all then all the checkboxes selected and then unselect some checkboxes and going to save then it shows me all the checkboxes.(un checked checkboxes also shown )
My Code
$('#itemGrid').on('change', '.usedchk', function () {
var checked = $(this).is(':checked');
var grid = $('#itemGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
var selected = $('#selected').val();
var id = dataItem.itemId;
if ($('#selected').val().indexOf(id) == -1) {
if ($('#selected').val() == '') {
$('#selected').val(id);
} else {
$('#selected').val(selected + "," + id );
}
}
});

use below code on save, to get all checked checkboxes as a comma separated string
var output = $.map($('#selected:checked'), function(n, i){
return n.value;
}).join(',');

Append option values to a hidden field?

With the push of a button, I'm iterating through a list of options in a select. I wish to append all of these option (values of the options) to a hidden fields, separated by a pipe |. So far I've come up with this, however, It just puts the last value of the option in the select in the hidden field?
//Select all cities
$jq("input#checkcities").click(function () {
$jq(".select-cities > option").each(function () {
var zipCodeValue = $jq(this).val();
$jq(".select-cities option").attr("selected", "selected");
$jq(".select-cities option").appendTo(".chosen-cities");
//Put value of cities in hidden field.
$jq('.hiddenFieldChosenCities').val(zipCodeValue);
});
});

You can use map method:
var zipCodeValues = $jq(".select-cities > option").map(function () {
return this.value;
}).get().join('|');
$jq('.hiddenFieldChosenCities').val(zipCodeValues);

Try like this
$jq('.hiddenFieldChosenCities').val($jq('.hiddenFieldChosenCities').val() + '|' + zipCodeValue);

You need to add the value:
$jq('.hiddenFieldChosenCities').val($jq('.hiddenFieldChosenCities').val() + '|' + zipCodeValue);

Create the string zipvalues
Loop over the cities and append cities to zipvalues
Finally set the hidden field value to zipvalues.
// Select all cities
$jq("input#checkcities").click(function () {
var zipvalues = "";
$jq(".select-cities > option").each(function () {
var zipCodeValue = $jq(this).val();
$jq(".select-cities option").attr("selected", "selected");
$jq(".select-cities option").appendTo(".chosen-cities");
zipvalues += "|" + zipCodeValue;
});
//Put value of cities in hidden field.
$jq('.hiddenFieldChosenCities').val(zipvalues);
});