Develop Reference

Hide/Show all columns in kendo grid in one go

I have 120 columns in kendo grid, and have select all and deselect all functionality.
If I go with for each loop it takes huge time to hide or show all column.
Is there any way to hide/show all columns in one call.
Just want to mention kendo showColumn/hideColumn is very slow.
$(".some-class").each(function(){
var field1 = $(this).data("field");
input.find('label').addClass('enableCheck');
input.find('label').removeClass('disableCheck');
$("#grid-id").data("kendoGrid").showColumn(field1);
}

Well I have created a demo of this kind of scenario for you: Show/Hide all columns
This uses the inbuilt show/hide function for the grid and using a slightly larger grid than yours approx 130 columns on average it is completing the operation in sub 2 seconds. I have added a "timer" so you can see from the point it hits the looping of the columns to the end of the operation how long it takes.
$("#clickme").on('click',function(){
var grid =$("#grid").data("kendoGrid");
var columns = grid.getOptions().columns;
var start = new Date().getTime();
columns.forEach(function(me){
if(me.hidden !== undefined && me.hidden === true)
{
grid.showColumn(me.field);
}
else
{
grid.hideColumn(me.field);
}
//console.log(me);
});
var end = new Date().getTime();
console.log(start,end, end-start);
$("#timer").text((end-start)/1000 + ' Seconds to run' );
});
All this does is gets the columns within the grid and then checks to see if it is currently hidden (if it is then it will show it otherwise it will hide it)
This is just bound to a simple button that you can click underneath the grid.
For this type of operation I think sub 2 seconds is more than quick enough and "feels" about right for this number of columns as depending on how many rows you have on the current page it has to hide all those elements as well.

DataTables 1.9.4 get live row data

I have a legacy DataTable that has a range of hidden columns that the user can show, then edit the cell via editable, then hide again.
each cell has a hidden text input which editable populates when the value changes. I have foudn that in datatables 1.9.4 i can
var r = oTable.$('tr');
//loop through datatables rows
for (var i = 0; i < r.length; i++) {
//get current rows data
var c = r[i];
if (i === 0) {
//convert to jQuery object
jc = jQ(c);
var changed = jc.find('.rowChanged').val();
}
}
which gets me the current live data but only for columns that are showing.
I tried oTable.fnGetData(c) passing the current row but this give me the initial starting html for each cell and not the live html (some inputs may have changed)
is there a way to return a jQuery object similar to the oTable.$() api call that contains the entire rows live data and not just the visible rows?

i solved this by showing all columns, grabbing the data using the oTable.$('tr') and then hide the relevant columns again.

Deleting dynamically created rows in Knockout.js

I'm using knockout.js 2.3.0 and I have a table with dynamically added rows and select lists in each of these rows. Upon changing a date input, the select lists populate with different content. Because different dates will populate the lists with different content, I want to remove any previously added rows because the content may not be accurate.
The issue I'm having is that not all of the rows are being removed. Ex: If I have more than 4 rows, there will always be 2 remaining. The only time all rows are cleared is when there is only 1 row to start with.
Here's the subscribed function for deleting the rows
self.date.subscribe(function() {
//I also tried setting the loop length to a very long number but the same results happened each time
for (i = 0; i < self.customers().length; i++){
self.customers.remove(self.customers()[i]);
}
//now populate the select list and add an empty row - commented out for testing to make sure rows are being deleted
//setCustomerList(self.date());
//self.customers.push(new AddCustomer(self.customerList[0]));
});
I was just testing to see what would happen, and the only way I've gotten all of the rows to remove is by adding multiple for loops which obviously isn't desirable.
Is there a simpler way to remove all dynamically added rows?

If you want to remove all the items in an observable array, use the removeAll method:
self.customers.removeAll();
If you really want to use a loop, you could do so by continuously removing the last (or first) item until there are none left:
while (self.customers().length) {
self.customers.pop();
}

I think you need to reverse the for loop and remove the items from the bottom up. the problem with your code is that the each time an item is removed the length of the array changes.
self.date.subscribe(function() {
var customerLength = self.customers().length
for (i = customerLength ; i >= 0; i = i - 1){
self.customers.remove(self.customers()[i]);
}
});

Figure Out Which Merged Table Cells Would Have Been Clicked?

Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?

You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});

I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.

How to programmatically change css of gridpanel's cell

I have two distinct gridpanels and throughout my code, whenever value of one of the cells in Grid1 changes I want to be able to change value of certain cells in the Grid2,
How can I change the css of the second grid from within the Grid1.
The following allows me to change the css for an entire row in Grid2 but I need to be able to change the css for a cell of Grid2 row: 2, column 3
var Grid2Store= Ext.data.StoreManager.get("MainComparisonStore");
Grid2.getView().addRowCls(Grid2Store.getAt(2), 'orange-bar');

Get a hold of the element and you can use cellElement.addCls('orange-bar');. See Ext.dom.Element.addCls() documentation. I put together a jsFiddle for you to see an example. Just click the "Test" button in the grid toolbar.
Here is the code that does the work. It is hard coded to add a class to column 1, row 1.
var grid = Ext.getCmp('myGrid');
var column = grid.columns[1];
var record = grid.store.getAt(1);
var cell = grid.getView().getCell(record, column);
cell.addCls('orange-bar');
Here (Sencha Forum) is some discussion on how to get the cell. This is what I used to put together my example. You can see how you could make a helper like getCell(rowIndex, columnIndex) pretty easily.