I have container, which have box,textfield and button. I am adding that container in one panel. When I am clicking on button I want to remove that container. Problem is, Container is removed but it not showing on UI.
My Code where I am removing container from panel.
var panel = Ext.getCmp("ABC");
var record = panel.items.items;
var recordlength = record.length;
for (var j = 0; j < recordlength - 1; j++) {
if (record[j].Label == me.Label) {
record.remove(me);
panel.remove();
}
}
As you say you are able to remove container then try this to update your panel.
panel.update();
panel.doLayout();
It will update your panel after removing item from that.
it works for me:
while (this.items.items[0]) {
this.remove(this.items.items[0]);
}
Related
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 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
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.
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);
we have an application that use some TextArea components in various tabs. The problem is that when we insert text into a TextArea (with grow:true) the TextArea correctly resize itself, but when we change the tab and display a new TextArea, this new TextArea has the size of the TextArea present into the other tab.
When we click on it the TextArea automatically resize to the right size.
How can i fix it ?
Thanks
i've found a solution by myself, i call autoSize() when the user change the tab
mytabs.on("tabchange", function(){
var list = Ext.query('textarea');
for(var i = 0; i < list.length; i++){
var ta = list[i];
var id = ta.getAttribute('id');
var cmp = Ext.getCmp(id);
if(cmp && cmp.autoSize){
cmp.autoSize();
}
}
});
And it works great