I have a TreeView with a 200+ rows.
When i click on the checkbox, it take about 1 sec to perform the check.
When i click on the header checkbox, it freeze the browser.
here is the code i used when the header checkbox change:
function toggleAll(e) {
setTimeout(function() {
const view = dataSource.view();
const checked = e.target.checked;
//$(`input[data-name=${e.target.dataset.name}]`).prop('checked', checked);
for (let i = 0; i < view.length; i++) {
view[i].set(e.target.dataset.name, checked);
}
},
0);
}
This is jsfiddle url
I can't get your example to run for some reason("toggleAll is not defined") but the reason the performance is slow is because of the use of .set().
Everytime .set() is called, this cause the TreeList to completely rebind to the changes dataSource.
You can avoid this by changing the field value "directly" in the loop instead of using the MVVM .set() and then trigger a single rebind when you are done, i.e.:
for (let i = 0; i < view.length; i++) {
// Does not trigger a rebind of TreeList and its dataSource.
view[i][e.target.dataset.name] = checked;
}
// Now that the dataSource is done being mass updated, trigger a single rebind.
$("#treelist").getKendoTreeList().refresh();
Example: http://dojo.telerik.com/#Stephen/OmoNu
Related
We have an Ag-Grid table with row selection via the built in checkbox functionality. The check boxes are conditionally displaying via the isRowSelectable options:
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.published === false : true;
}
The published column is being updated as part of a modal called from another column. A redrawRows is being called when the modal is closed:
modal.result.then(() => {
const row = params.api.getDisplayedRowAtIndex(params.rowIndex as number);
//this.gridApi?.redrawRows([row] as any);
this.gridApi?.redrawRows();
});
The display values in the row are being updated when the modal is closed, however, the checkbox is not appearing when the published value is set to false. If I hang a breakpoint in Dev Tools the isRowSelectable code does not appear to be hit.
Any suggestions would be much appreciated.
Cheers,
-John
Can you try this and see if it works?
let itemsToUpdate = [];
let data = rowNode.data;
// modify data fields
// Ex: data.field1 = "new value";
itemsToUpdate.push(data);
this.gridApi.applyTransaction({update: itemsToUpdate});
https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
Use refreshCells
this.gridApi?.refreshCells({force:true});
https://www.ag-grid.com/react-data-grid/view-refresh/#redraw-rows
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.
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 working with an EXTJS 4 dataview and having inconsistent results when adding listeners to html elements (links) in each data node. I have placed the code in the load listener on the store that is tied to the dataview. It appears to work on the first load but subsequent loads get worse as it begins missing some elements. Each time a call store.reload() it gets worse.
I have verified in firebug that the html element ID's are rendering properly but for some reason when I reload the store it begins to miss some elements at first, then all elements. Code for the load listener below:
listeners: {
load: function(store, records, successful, options){
var nodes = records;
for (i=0, len = nodes.length; i < len;i++){
var id = nodes[i].data.id;
var addtocartel = Ext.get('img-cart-'+id);
var viewel = Ext.get('img-view-'+id);
//Setting hidden class for nonimage items
switch (nodes[i].data.type) {
case 'image' :
viewel.addCls('imgprf');
addtocartel.addCls('cartprf');
break;
default :
viewel.addCls('sc_hidden');
addtocartel.addCls('sc_hidden');
viewel.hide();
addtocartel.hide();
break;
}
if(addtocartel !== null){
addtocartel.itemid = id;
addtocartel.on('click', function(e,t){
var el = Ext.get(t);
var imgrec = imagestore.getById(el.itemid);
e.stopEvent();
prfproductwindow.show();
});
}
if(viewel !== null){
viewel.itemid = id;
viewel.on('click', function(e,t){
var el = Ext.get(t);
var imgrec = imagestore.getById(el.itemid);
});
}
}
}
}
Refreshes to the grid view can happen without any sort of load occurring. When the grid view refreshes it wipes out the existing html elements and creates new ones, so any listeners you had attached to those elements will be useless.
You should look into adding a click listener to your entire grid and using a delegate to listen for clicks on specific html elements within the view. This will allow you to add a single listener once that will always work no matter how many times the elements within the view are rerendered.
grid.getView().getEl().on('click', function(evt, target) {
console.log('clicked on ' + target);
}, {delegate: '.my-css-selector-for-some-element'});
The click handler will only be fired for clicks on elements that match the delegate selector.
Also, the logic where you are adding css classes based on the record's type should be done in the renderer (if you have a grid) or handled by the data view's template.
I have overridden the hide column functionality of extjs which is working fine. When the column is given hidden:true, during first time page load my hide functionality is not working. When i do hide/show column, it is working. Need to have the same functionality enabled during page load too
columnhide: function() {
var cell = this.getEl().query('.x-grid-cell-inner');
var collen = grid.columns.length;
var i = 1;
for (var y = i; y < cell.length; y = y + collen) {
for (var x = 0; x < cell.length; x++) {
if (x == y) {
cell[x].style.display= "none";
}
}
}
}
You're right, the columnhide event fires only when a column is hidden after it has been rendered.
The simplest way to make your current code work would be to call hide() on the column, instead of using the hidden option.
Replacing hidden: true with the following in the column config will do the trick:
,listeners: {
// we want to catch the event only the first time it is fired
single: true
,afterrender: function() {
this.hide();
}
}
This code will add a listener to the column you want to hide, and after the column is rendered, it will call its hide() method. That will trigger your event, etc.