I'm using a YUI DataTable with a checkbox column like this:
var myColumnDefs = [
{key:"check", label:'', formatter:"checkbox"},
{other columns...}
];
How can I iterate over all the rows that have been checked?
UPDATE:
Here is my current work-around:
function getCheckedIds() {
var records = yuiDataTable.getRecordSet().getRecords();
var ids = '';
for (i=0; i < records.length; i++) {
var checked = false;
if (records[i] != undefined)
{
checked = $('#' + records[i].getId() + ' td div.yui-dt-liner input.yui-dt-checkbox').attr('checked');
if (checked) {
if (ids != '') {
ids += ',';
}
ids += records[i].getData("item.id");
}
}
}
return ids;
}
A better approach might be to subscribe to the checkboxClickEvent of the Datatable, then when a check box is selected (or unselected) programmatically mark the row as selected using the selectRow/unselectRow method of the Datatable. If you do this, it looks better in the UI (the rows are highlighted) and it is easy to get the selected rows using the getSelectedRows method of the Datatable.
Related
I'm using a Kendo Grid / Custom validator editing to validate the a Column in the grid,Actually I'm trying the check the email already exists in the database or not ? to implement it I would like to get ID for the Row.
For example given in reference its products table, so in this case I would to get the ProductID inside the validation function ?
Reference:
http://demos.telerik.com/kendo-ui/grid/editing-custom-validation
You can get the id by retrieving the uid and then getting the data item from the dataSource via dataSource.getByUid(). Each row in the grid has a unique uid generated by the grid.
So for instance, referring to kendo's demo, the validation would now look like this:
productnamevalidation: function (input) {
//get row and uid
var row = input.closest('tr')[0];
var uid = $(row).attr('data-uid');
//get data item and then its ProductID
var dataitem = dataSource.getByUid(uid);
console.log(dataitem);
console.log(dataitem.ProductID);
//continue doing validation
if (input.is("[name='ProductName']") && input.val() != "") {
input.attr("data-productnamevalidation-msg", "Product Name should start with capital letter");
return /^[A-Z]/.test(input.val());
}
return true;
}
Here is their demo with this code included, you can open the console to see that each data row is being printed out with all its model properties.
You can get the record's ID with this:
input[0].kendoBindingTarget.source.ID
For example:
emailUnique: function (input) {
if (input.is("[name=Email]") && input.val() !== "") {
input.attr("data-emailUnique-msg", "Email already exists");
return isEmailUnique(input.val(), input[0].kendoBindingTarget.source.ID);
}
return true;
}
Bonus track, in case it's useful for someone:
function isEmailUnique(val, id) {
var data = YourGridDataSource; // If you don't have it, you may need something like $("#YourGrid").data().kendoGrid.dataSource
for (var i = 0; i < data.length; i++) {
if (data[i].ID != id && data[i].Email == val)
return false;
}
return true;
}
I have this code to have a select field filter through a Footable. It works but it's straining more results than needed. Example: "Article in National Journal" option is filtering rows with both "Article in National Journal" and "Article in International Journal". How can I make it more precise? Thank you.
jQuery(function () {
jQuery('#projectos').footable().bind('footable_filtering', function (e) {
var selected = jQuery('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
});
jQuery('.clear-filter').click(function (e) {
e.preventDefault();
jQuery('.filter-status').val('');
jQuery('#projectos').trigger('footable_clear_filter');
});
jQuery('.filter-status').change(function (e) {
e.preventDefault();
jQuery('#projectos').trigger('footable_filter', {filter: jQuery('#filter').val()});
});
});
When Footable filters, it uses the entire text from the whole row and it uses indexof() to test. You can see this in footable.filter.js in the filterFunction function.
I had to do 3 things to solve the problem.
Replace window.footable.options.filter.filterFunction with my own function
Do a per column match instead of the whole row. Depending on the HTML in your row, the spaces between the columns could be lost causing the first word of a column to concatenate with the last word of the previous column.
Use a regex match instead of indexof(). This allows you to match a whole word. As an example, if you us indexof() for "be" in "Don't be evil, because that's not good" will return 6 and 15 even though 15 is the beginning of a completely different word.
Here's the function: (I'm sure there are loads of improvements. Feel free to edit...)
window.footable.options.filter.filterFunction = function(index) {
var $t = $(this),
$table = $t.parents('table:first'),
filter = $table.data('current-filter').toUpperCase(),
columns = $t.find('td');
var regEx = new RegExp("\\b" + filter + "\\b");
var result = false;
for (i = 0; i < columns.length; i++) {
var text = $(columns[i]).text();
result = regEx.test(text.toUpperCase());
if (result === true)
break;
if (!$table.data('filter-text-only')) {
text = $(columns[i]).data("value");
if (text)
result = regEx.test(text.toString().toUpperCase());
}
if (result === true)
break;
}
return result;
};
You can find a plunk here: http://plnkr.co/edit/P2DWDtyHP3xmoUIcvgDe
Is there a way to refresh a single Kendo grid row without refreshing the whole datasource or using jQuery to set the value for each cell?
How do you define the row that you want to update? I'm going to assume that is the row that you have selected, and the name of the column being updated is symbol.
// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");
// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// update the column `symbol` and set its value to `HPQ`
data.set("symbol", "HPQ");
Remember that the content of the DataSource is an observable object, meaning that you can update it using set and the change should be reflected magically in the grid.
data.set will actually refresh the entire grid and send a databound event in some cases. This is very slow and unnecessary. It will also collapse any expanded detail templates which is not ideal.
I would recommend you to use this function that I wrote to update a single row in a kendo grid.
// Updates a single row in a kendo grid without firing a databound event.
// This is needed since otherwise the entire grid will be redrawn.
function kendoFastRedrawRow(grid, row) {
var dataItem = grid.dataItem(row);
var rowChildren = $(row).children('td[role="gridcell"]');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
var template = column.template;
var cell = rowChildren.eq(i);
if (template !== undefined) {
var kendoTemplate = kendo.template(template);
// Render using template
cell.html(kendoTemplate(dataItem));
} else {
var fieldValue = dataItem[column.field];
var format = column.format;
var values = column.values;
if (values !== undefined && values != null) {
// use the text value mappings (for enums)
for (var j = 0; j < values.length; j++) {
var value = values[j];
if (value.value == fieldValue) {
cell.html(value.text);
break;
}
}
} else if (format !== undefined) {
// use the format
cell.html(kendo.format(format, fieldValue));
} else {
// Just dump the plain old value
cell.html(fieldValue);
}
}
}
}
Example:
// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");
// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// Update any values that you want to
data.symbol = newValue;
data.symbol2 = newValue2;
...
// Redraw only the single row in question which needs updating
kendoFastRedrawRow(grid, select);
// Then if you want to call your own databound event to do any funky post processing:
myDataBoundEvent.apply(grid);
I found a way to update the grid dataSource and show in the grid without refreshing all the grid.
For example you have a selected row and you want to change column "name" value.
//the grid
var grid = $('#myGrid').data('kendoGrid');
// Access the row that is selected
var row = grid.select();
//gets the dataItem
var dataItem = grid.dataItem(row);
//sets the dataItem
dataItem.name = 'Joe';
//generate a new row html
var rowHtml = grid.rowTemplate(dataItem);
//replace your old row html with the updated one
row.replaceWith(rowHtml);
updateRecord(record) {
const grid = $(this.el.nativeElement).data('kendoGrid');
const row = grid.select();
const dataItem = grid.dataItem(row);
for (const property in record) {
if (record.hasOwnProperty(property)) {
dataItem.set(property, record[property]);
}
}
}
I want the following ability in jqGrid.
When a user clicks on the checkbox in the grid a row is selected.
When the user subsequently clicks "Control key" and selects the checkbox the user can subsequently select more no of rows. Then when user clicks on the checkbox and if the current row is selected, the current row is then selected. Is this possible with jqGrid?
However nothing should happen when cells are are clicked. Only events should be available from checkbox.
Yes, it should be possible. Take a look at the normal example for checkbox selection - it gets you part of the way there. It doesn't really handle the SHIFT select stuff the way you'd expect, though.
I did some searching and found this code on the jqGrid support site:
function multiSelectHandler(sid, e) {
var grid = $(e.target).closest("table.ui-jqgrid-btable");
var ts = grid[0], td = e.target;
var scb = $(td).hasClass("cbox");
if ((td.tagName == 'INPUT' && !scb) || td.tagName == 'A') {
return true;
}
var sel = grid.getGridParam('selarrrow');
var selected = $.inArray(sid, sel) >= 0;
if (e.ctrlKey || (scb && (selected || !e.shiftKey))) {
grid.setSelection(sid,true);
} else {
if (e.shiftKey) {
var six = grid.getInd(sid);
var min = six, max = six;
$.each(sel, function() {
var ix = grid.getInd(this);
if (ix < min) min = ix;
if (ix > max) max = ix;
});
while (min <= max) {
var row = ts.rows[min++];
var rid = row.id;
if (rid != sid && $.inArray(rid, sel)<0) {
grid.setSelection(row.id, false);
}
}
} else if (!selected) {
grid.resetSelection();
}
if (!selected) {
grid.setSelection(sid,true);
} else {
var osr = grid.getGridParam('onSelectRow');
if ($.isFunction(osr)) {
osr(sid, true);
}
}
}
}
To use it, you're supposed to be able to set the beforeSelectRow handler to this function. Ex. something like this:
$("#gridid").jqGrid({
// Rest of code to configure grid
beforeSelectRow: multiSelectHandler,
// Other handlers/configuration
});
How do I obtain the selected row value for a hidden column in a Telerik RadGridView? The column is hidden on the aspx page and I would like to retrieve the value on the client side (JavaScript).
Essentially, I want to display a name in the grid view and be able to retrieve a value from the hidden field "ID" to bring up an edit form.
Here is an example of how I'm hiding the RadGridView column.
code sample:
onKeyPressEvent(sender, args) {
var variable = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
var PartyID = args.getDataKeyValue("PARTY_ID");
var oManager = '<%=winMgr.ClientID %>';
var oManager = window.radopen("AttorneyEdit.aspx?PARTY_ID=" + PartyID, null);
oManager.setSize(1000, 530);
//Width, Height oManager.center();
} else { return true;
}
}
theForm.onkeypress = variable
}
Thanks for your help...
maybe you're going the wrong way. There is a property called "ClientDataKeyNames" on the mastertableview. You can add several key separated by a comma in this property. Then you'll be able to get your value without adding an extra column.
You should do something like this:
function onKeyPressEvent(sender, args) {
if (args.get_keyCode() == 13) {
var dataItem=sender.get_selectedItems()[0];
var PartyID = dataItem.getDataKeyValue("PARTY_ID");
var oManager = '<%=winMgr.ClientID %>';
var oManager = window.radopen("AttorneyEdit.aspx?PARTY_ID=" + PartyID, null);
oManager.setSize(1000, 530);
//Width, Height oManager.center();
}
else {
return true;
}
}
good luck