I have grid in extjs program. Grid has 2 columns. I want to get each value in grid.
Is possible something like that (of course in JS):
foreach( row in grid ) {
row.cell[0] // do something
row.cell[1] // do something
}
If yes, how to do it?
Using other user answer I know how do it in extjs 3.3.1 (user863680's solution doesn't work in my program).
gridName.getStore().each(function(rec){ // for each row
var rowData = rec.data; // get record
alert( rowData['col1Name'] ); // get value from cell
alert( rowData['col2Name'] );
});
If you want to access each row in your grid, you could do the following.
yourGrid.getStore().each(function(rec){
var rowData = rec.data;
for (var i=0; i<rowData.length; i++) {
console.log(rowData[i]); //or you could do something else here
};
});
I hope this helps.
alert("Getting grid value = "+document.getElementById("yourgridblock").rows[1].cells[2].firstChild.value);
alert("Getting grid value = "+document.getElementById("yourgridblk").rows[1].cells[0].firstChild.checked);
alert("Getting grid count = "+document.getElementById("yourgridblk").rows.length);
Related
I have been searching the internet for answer but I am not having any luck. I would like to know if it is possible to only show Kendo detail rows after 19 rows of data? I have a very odd requirement and I'm not sure it can be done. However if there is a solution out there, is there a small example I can see? Or a resource I have not found yet?
As a note a side note I am using Kendo with AngularJS.
Thank you in advance!
AnthonyFastcar
This may not be the best way to do this but I just hid the detail icon for the rows. I used the dataBound event.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid');
grid.tbody.find("tr[role='row']").each(function () {
var index = $(this).index();
if (index < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
Additionally if you are trying to use a column, say an ID column you can do it like the below.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid'),
grid.tbody.find("tr[role='row']").each(function () {
var data = grid.dataItem(this);
if (data.yourColumnID < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
I hope this helps anyone else who runs into the same issue.
I am trying to implement a Kendo ui-Menu in the toolbar of a Kendo Grid in Angular. I am manually creating the column list on the menu. I am able to show/hide the columns when clicking the checkboxes. I need to iterate through the checkboxes when the menu opens so that I can set checked/unchecked based on the options set on each column in the grid. The problem is that I don't know how to access the check/unchecked of the child nodes.
The code below gets all of the child nodes, but I don't know how to access their checked/unchecked values:
var columns = $(e.item).find(".k-item:not(:has(.k-group))");
I have a Dojo setup where the check/uncheck works, but I don't know how to access them from 'onOpen'. Any assistance is grealy appreciated.
First you have to find checkbox element and then you can get checkbox checked value by using .prop("checked") method.
So if you eg. want to switch checkboxes values on menu open you can use:
$scope.onOpen = function(e) {
var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
var checkbox = $(checkboxes[i]);
checkbox.prop("checked", !checkbox.prop("checked"));
}
}
Updated dojo: http://dojo.telerik.com/OnAXI
Thanks to Jarosław Kończak who put me on the right path, here is how I eventually was able to use the "hidden attribute" on my columns to set the checkboxes as checked or !checked by altering his suggestion just a little:
$scope.onOpen = function(e) {
var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = $(checkboxes[i]);
if (checkbox.prop("checked")) {
var fieldData = checkbox.data("field");
var columns = $scope.SearchGrid.columns;
for (var x = 0; x < columns.length; x++) {
if (columns[x].field == fieldData) {
if (columns[x].hidden == true) {
checkbox.prop("checked", false);
}
}
}
}
}
}
Here is a working Dojo with dynamically created columns instead of the "manual" column list.
I am using ExtJS 5. I have a dynamic grid meaning the column configurations, store fields, data etc are all coming from the backend.
Before I reconfigure the grid with the columns, I try to add a tooltip to the header using the data-qtip attribute but this does not work.
Here is the fiddle:
https://fiddle.sencha.com/#fiddle/1fr8
Snippet:
var cols = data_1.metaData.columns;
for(var i=0;i<cols.length;i++){
cols[i].header = "<font data-qtip='"+cols[i].header+"'>"+cols[i].header+"</font>";
}
grid.reconfigure(null, cols);
store.getProxy().data =data_1.data;
store.loadPage(1)
grid.getView().refresh();
Thanks!
Please don't overcomplicate things, the gridcolumn has a tooltip configuration which should work.
for(var i=0;i<cols.length;i++){
cols[i].tooltip = cols[i].header;
}
It doesn't work in your case, because the QuickTipManager has to be initialized first in Ext.onReady:
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = ...
Please note that the header config in gridcolumn has been deprecated in favor of the text config.
You can also override initRenderData to set this application-wide. For example to always use the column text as a tooltip:
/**
* If a tooltip has not been set for a column header
* then always default to the column name
**/
Ext.override(Ext.grid.column.Column, {
initRenderData: function () {
var me = this;
if (Ext.isEmpty(me.tooltip)) {
me.tooltip = me.text;
}
return me.callParent(arguments);
}
});
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}
I'm using the RowExpander plugin with a nested grid in my app. I want to expand only one row at time so when I click on the '+' icon all the other rows have to collapse. How can I do that?
You should listen for the expandbody event of the rowexpander plugin, and keep track of the last expanded row. Whenever a new row is expanded use toggleRow to collapse the previously expanded row.
To toggle row:
grid.getPlugin( pluginId ).toggleRow(rowIndex)
To find if a row is collapsed (code adapted from RowExpander.js) - there may be a better way to do it..?
var rowExpander = grid.getPlugin( pluginId );
var rowNode = grid.getView().getNode(rowIdx);
var row = Ext.fly(rowNode, '_rowExpander');
var isCollapsed = row.hasCls(rowExpander.rowCollapsedCls);
For Ext 6.0.1 The following code might help you. I am happy to see if there are a more simple way of doing this.
var rowExpander = yourGrid.getPlugin('yourPluginId');
var expandedRecords = rowExpander.recordsExpanded;
var currentExpandedRecord;
var currentInternalId = 0; // start from 1
var currentIndex = -1; // start from 0
for(var prop in expandedRecords) {
if(expandedRecords.hasOwnProperty(prop)) {
// expandedRecords is storing internal id,
// and internal id start form 1 in Ext 6.0.1
currentInternalId = parseInt(prop, 10);
if(currentInternalId && expandedRecords[prop] === true) {
// extjs 6.0.1 store data index start from 0
currentExpandedRecord = yourGrid.store.getByInternalId(currentInternalId);
currentIndex = yourGrid.store.indexOf(currentExpandedRecord);
rowExpander.toggleRow(currentIndex, currentExpandedRecord);
}
}
}
rowExpander.toggleRow(index, record);