Develop Reference

Select programmatically Kendo grid row

I found posts with similar titles but I still cannot resolve my issue. Definitely I am doing something wrong.
In Kendo grid configuration have some function which take context (grid) and read selected row:
change: function (e) {
refresh(this);
}
This is how I configured "change" event.
In function "refresh(grid)" I am getting selected row on following way:
refresh: function (grid) {
var selectedRows = grid.select();
var selectedRow = grid.dataItem(selectedRows[0]);
var id = selectedRow.Id;
}
This approach works perfect when I select grid row manually. But when I select row programatically "selectedRow" variable is null.
I am selecting programatically on following way:
var grid = $("#grid").data("kendoGrid");
var rows = grid.dataSource.data();
var row = rows[rows.length - 1];
grid.select(row);
As I sad in above, in previous "refresh(grid)" method variable selectedRow will be null.
Does anybody have some opinion about that? Why is it happened?
Thanks

According to the Grid documentation the "select" method accepts "string" parameter (selector) or jQuery element. That why if you need to correctly select the row you should modify your current code as follows:
var grid = $("#grid").data("kendoGrid");
//if you are using the "pageable" option of the grid
//you should get the visible rows using the .view() method
var models = grid.dataSource.data();
var model = models[models.length - 1];
var lastRowUid = model.uid;
//find the target row element:
var row = grid.table.find("[data-uid=" + lastRowUid + "]");
grid.select(row);

Hide row in Extjs grid view not work

I need to hide duplicate rows in master/detail grid. I found this fiddle http://jsfiddle.net/tPB8Z/1465/ that hides some cells based user choice, but when I applied this in my code http://jsfiddle.net/alebotello/axvhtrcL/21/ method addRowCls() from view grid, it did not work for rows. Master and detail grids shared same store, and I only want to change rows visibility in master grid, without modify store or create a new one.
In master grid listeners:
afterrender: function (comp) {
var st = comp.getStore();
var arr = [];
var i = 0;
var view = comp.getView();
st.each(function (record) {
// console.log(record);
if (arr.indexOf(record.data['idOrden']) === -1) {
arr.push(record.data['idOrden']);
} else {
view.removeRowCls(record, 'x-grid-view');
view.addRowCls(record, 'oculto');
// console.log(view);
}
i++;
});
css
.oculto{
display: none;
}

Fix is very simple, change the master grid listener from 'afterrender' to 'viewready'.
For most of the Ext.view.View based Components like Grid, List developers should use viewready events instead of afterrender to perform post render DOM manipulations.
This is documented in their API Doc and Guides.
viewready: function (comp) {
var st = comp.getStore();
var arr = [];
var i = 0;
var view = comp.getView();
st.each(function (record) {
debugger;
if (arr.indexOf(record.data['idOrden']) === -1) {
arr.push(record.data['idOrden']);
} else {
view.removeRowCls(record, 'x-grid-view');
view.addRowCls(record, 'oculto');
console.log(view);
}
i++;
});
}
Working example forked from above jsfiddle:- http://jsfiddle.net/chetanbh/rpbdq4ex/

Why can't I bind this onclick event?

I'm producing buttons for editing and removing each element in a Firebase database dynamically with javascript. And when there is only one element in the database (these elements represent polls/elections), the below code works fine. But when there is more than one database element, and hence more than one row of buttons, only the final pair of edit/remove buttons added are actually bound with the click event, which I suppose means all previous bindings are being overwritten in some way? I should also mention that both pollsRef.once() and pollsSnapshot.forEach() are asynchronous function calls (as are all Firebase API calls). Here is the function which creates and binds the buttons. ...
function displayCurrentPollsForEditing(pollsRef)
{
var tbl = createTable();
var th = ('<th>Polls</th>');
$(th).attr('colspan', '3');
$(th).appendTo($(tbl).children('thead'));
pollsRef.once('value', function(pollsSnapshot) {
pollsSnapshot.forEach(function(pollsChild) {
var type = pollsChild.name();
// If this is true if means we have a poll node
if ($.trim(type) !== "NumPolls")
{
// Create variables
var pollRef = pollsRef.child(type);
var pollName = pollsChild.val().Name;
var btnEditPoll = $('<button>EDIT</button>');
var btnRemovePoll = $('<button>REMOVE</button>');
var tr = $('<tr></tr>');
var voterColumn = $('<td></td>');
var editColumn = $('<td></td>');
var rmvColumn = $('<td></td>');
// Append text and set attributes and listeners
$(voterColumn).text(pollName);
$(voterColumn).attr('width', '300px');
$(btnEditPoll).attr({
'class': 'formee-table-button',
'font-size': '1.0em'
});
$(btnRemovePoll).attr({
'class': 'formee-table-remove-button',
'font-size': '1.0em'
});
$(btnEditPoll).appendTo($(editColumn));
$(btnRemovePoll).appendTo($(rmvColumn));
// Append to row and row to table body
$(tr).append(voterColumn).append(editColumn).append(rmvColumn);
$(tr).appendTo($(tbl).children('tbody'));
// Append table to div to be displayed
$('div#divEditPoll fieldset#selectPoll div#appendPolls').empty();
$(tbl).appendTo('div#divEditPoll fieldset#selectPoll div#appendPolls');
$(btnEditPoll).click(function() {
displayPollEditOptions(pollRef);
return false;
});
$(btnRemovePoll).click(function() {
deletePoll($(this), pollsRef);
return false;
});
}
});
});
}
The buttons are just rendered in a programmatically generated table, all the jQuery selectors are correct.

slickgrid - How to loop through rows which are outside canvas?

I am having some markers on map and same number of rows in slickgrid?
What I want is when a marker is clicked the id of marker is matched with all rows and corresponding row should get selected.
Here is my code:
var $canvas = $(grid.getCanvasNode());
var $allRows = $canvas.find('.slick-row');
$($allRows).each(function() {
if ($(this).rowID == selectedMarker) {
$(this).addClass("active-row");
grid.scrollRowIntoView($(this).index());
}
});
It works fine only when the row which I want is present in the grid but the grid DOM contains only 8 rows at a time (The grid has 30 rows).
How can I loop through all data?

You shouldn't be modifying SlickGrid's DOM at all. SlickGrid will overwrite any changes as it's only rendering the rows in view (with some buffer). When you scroll past that buffer any changes you made to the DOM are lost.
You have to change the row's data and allow SlickGrid to add the appropriate classes to the DOM when it's rendering.
Edit:
SlickGrid setup:
dataView.getItemMetadata = metadata(dataView.getItemMetadata);
function metadata(metadataProvider) {
return function(row) {
var item = this.getItem(row),
ret = metadataProvider(row);
if (item && item.isActive) {
ret = ret || {};
ret.cssClasses = (ret.cssClasses || '') + ' active-row';
}
return ret;
};
}
Then when you click on a marker:
var item = dataView.getItemById(selectedMarker);
var row = dataView.getRowById(selectedMarker);
item.isActive = true;
dataView.updateItem(item.id, item);
grid.scrollRowIntoView(row);

Recursive Checkbox Selection in Treeview | Telerik MVC

I recently encountered an issue dealing with the Telerik Treeview component and handling recursive selection with checkboxes when handling larger data sets (500-1000+ nodes).
With smaller data sets (100-300 nodes) the Treeview and its selection methods work as follows (as they should):
Initially - all nodes are selected.
Clicking a parent node toggles selection of all of the child nodes.
Unselecting a single child node will unselect the parent (and any grandparent / top-level nodes)
Most of these things I believe are fairly commonplace when dealing with Treeviews and selection. The current method that is being used isn't the cleanest and calls an unnecessary amount of additional events to be fired during the selection process.
I was just curious if anyone had handled an issue similar to this before I began tearing apart the current code (available below).
Existing Selection Code:
$('#TreeView').find("li").find('> div > .t-checkbox :checkbox').bind('click', function (e) {
var isChecked = $(e.target).is(':checked');
var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');
var item = $(e.target).closest('.t-item');
var checkboxes = item.find('.t-checkbox :checkbox');
$.each(checkboxes, function (index, checkbox) { $(checkbox).attr('checked', isChecked ? true : false); treeView.checkboxClick(e, checkbox); });
var siblings = item.parent().find('> li .t-checkbox');
var siblingsLength = siblings.length;
var checkedLength = siblings.find(':checked').length;
if (siblingsLength == checkedLength) {
var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
parentCheckBox.attr('checked', true)
grandparentCheckBox.attr('checked', true)
treeView.checkboxClick(e, parentCheckBox)
treeView.checkboxClick(e, grandparentCheckBox)
}
else {
var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
parentCheckBox.attr('checked', false)
grandparentCheckBox.attr('checked', false)
treeView.checkboxClick(e, parentCheckBox)
treeView.checkboxClick(e, grandparentCheckBox)
}
});

I found a solution that I feel will function at least effectively as of right now and works a great deal faster than the existing solution, even when dealing with very large data sets.
I created a simple function that fires upon the Checked event within the TreeView and handles all the necessary child selection:
function TreeView_Checked(e) {
var current = $(e.item).find(':checkbox:eq(0)');
//Check or uncheck all child nodes from this one
var children = $(e.item).find(':checkbox');
current.is(':checked') ? children.attr('checked', 'checked') : children.removeAttr('checked');
}
which is implemented by adding the following within the TreeView declaration:
TreeView().Name("TreeView").ClientEvents(e => e.OnChecked("TreeView_Checked"))

This code will select or deselect the parent along with all of its children. If you want the grand-parent, you can probably do .closest(".t-item")
$(document).ready(function () {
$("#btnSelectChildren").click(function () {
nodeCheck(true);
});
$("#btnDeselectChildren").click(function () {
nodeCheck(false);
});
});
function nodeCheck(isChecked) {
var treeView = $('#TreeView').data('tTreeView');
var selected = $('#TreeView .t-state-selected');
treeView.nodeCheck(selected, isChecked);
selected.closest('li').find(".t-item").each(function () {
treeView.nodeCheck($(this), isChecked);
});
}