I managed to add a images in the extjs combo selection list however after selecting an item did not manage to have the same images displayed int he collapsed combo. I tried changing the template (displayTpl) by adding some custom HTML however it will get escaped. any help would be appreciated.
Thanks
this.chartCombo = Ext.create('Ext.form.field.ComboBox', {
height: '20',
fieldLabel: 'Chart Type',
displayField: 'chartLabel',
valueField: 'chartValue',
store: chartComboDataSource,
queryMode: 'local',
listConfig: {
getInnerTpl: function() {
this.cls = 'option-list-chart-img';
return "<img class='{cssClassName}'/> {chartLabel}";
}
}
});
It doesn't work because the collapsed combo is just a simple <input> element that can't contain HTML. I suggest you set the image as a background image to the <input>, switching it programmatically when selection changes.
Related
How to make row editor visible all the time in extJS roweditor..
I am using extJS grid and row ediotr pluing in the grid. I want to make my row editor visible all the time.
Currently it happening when I am clicking into the row/cell.
I want overide activateCell as soon as I load the gridso it become visible in grid. Any solution for this. I am overiding the grid plugin.
You can try aplly something like:
gridcolumn:
{
text: 'Some Text',
dataIndex: 'Color',
renderer: function (value, meta) {
meta.style = 'border: 1px solid grey;';
return value;
},
editor: {
xtype: 'textfield
}
}
Great article about grid styles: http://skirtlesden.com/articles/styling-extjs-grid-cells
Guys i have a column which i want to hide and show based on condition in settings ... so how to do that in dojo ... here is my code
this._grid = new Grid({
myColumn,
{field: 'description' ,label:'description', dismissOnEnter: false, editor: 'textBox', autoSave: true, renderCell: function(object, data, td, options){
td.innerHTML = data;
}}]
});
var myColumn = {
field: 'myColumn',
label: 'myColumn',
editor: Select,
hidden:false, /* hide or show based on condition*/
autoSave: true,
};
any help will be greatly appreciated ... thanks
use grid.layout.setColumnVisibility(0,true); to show or hide a column of your grid dynamically.
If you have more columns to hide or show then use
grid.beginUpdate()
grid.layout.setColumnVisibility(i, visible);
grid.endUpdate();
i is the column index which you want to hide/show and visible is true/false
Hope this helps.
**********************update**********
adding jsfiddle
**************update 2*****************
take a look into this extension
https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/ColumnHider.md
You can easily use CSS
grid.styleColumn("idOfColumn", "display: none;");
I am using slick grid. On top of the grid, we have a text box. When user enters a value in textbox and tabs out, we need to enter a new row into the grid.
This is how the code looks:
gridOptions = {
useCheckBoxField: 'selected',
data: 'data',
columns: 'columns',
enableCellNavigation: true,
enableColumnReorder: true,
editable: true,
autoEdit: true,
multiColumnSort: true,
rowSelectionModel: 'selectedRows',
enableAddRow: true
}
This is how the first column looks which I am trying to edit.
{id: 'id', name: 'id', field: 'id', editor: Slick.Acsiom.Editors.Text, sortable: true, width: 210, minWidth: 100},
This is the code to enter new row and then make the first cell editable and set the focus on the cell.
var d = $scope.$grid.grid.getData();
$scope.$grid.grid.invalidateRow(d.length);
//Adds the new row as the first row.
d.unshift(item);
$scope.$grid.grid.updateRowCount();
$scope.$grid.grid.setData(d);
$scope.selectedRows = [];
$scope.selectedRows = [0];
//Sets the first row and first column as editable
$scope.$grid.grid.setActiveCell($scope.selectedRows,0);
$scope.$grid.grid.gotoCell(0,0,true);
Problem: Everything works fine, except the cell remains uneditable. User has to manually click on cell to edit it. How can I make the cell editable as soon as a row is added?
Use grid.editActiveCell - see more here https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-editActiveCell
After setting active cell, make it editable.
var grid = $scope.$grid.grid;
var row = $scope.selectedRows[0];
var col = 0;
grid.setActiveCell(row, col);
grid.editActiveCell(Slick.Acsiom.Editors.Text);
Having a similar problem, I needed the following three lines to open a cell for editing.
grid.setActiveCell(row, col);
grid.setOptions({editable: true});
grid.editActiveCell(grid.getCellEditor());
If a cell was validated for editing, I used the booleans 'editCell' and 'cellEditOpen', and set grid.setOptions({editable: false}); as necessary
I have a template column in my gridpanel containing a URL:
{
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate',
'Edit'
)
}
When a user mouses over a particular row in the gridpanel, I want the link to be visible:
listeners: {
'itemmouseenter': function(gridpanel, record, item) {
var editLink = Ext.select(Ext.query('a.x-leave-request-edit', item, 'select', true));
editLink.setVisible(true);
},
'itemmouseleave': function(gridpanel, record, item) {
var editLink = Ext.select(Ext.query('a.x-leave-request-edit', item, 'select', true));
editLink.setVisible(false);
}
}
This works fine. The problem though is that by default, I want the links in the tpl to be invisible.
How can I achieve this?
I tried using similar code as above in onRender(), afterRender() and finishRender() but the Ext.query() always returns an empty array.
Instead of all that query ugliness, you can just use:
item.down('.x-leave-request-edit').
To make it not visible the initially, just add display: none; in the inline style.
return 'Edit';
I've following issue: I have two kogrids on my page. One one the left, one on the right side.
Between them I added two buttons so that the user can move selected items from the left to the right side and the other way round.
Therefor my view model has 4 arrays, ItemsA, SelectedItemsA, ItemsB and selectedItemsB. The two kogrids are configured as followed:
<div data-bind="koGrid: {
data: ItemsA,
selectedItems: SelectedItemsA,
displaySelectionCheckbox: false,
enableRowReordering: true,
enableSorting: false,
columnDefs: [
{ field: 'Name', cellTemplate: tableCellTemplate, cellClass: 'player-row' },
{ field: 'ClubName', displayName: 'Mannschaft' },
{ field: 'DisplayPosition', displayName: 'Position', cellTemplate: playerPositionNameTemplate}
],
footerVisible: false
}">
</div>
On moving items from left to the right, I will push every item from SelectedItemsA into ItemsB via:
$.each(self.SelectedItemsA(), function(idx, player) {
self.ItemsB.push(player);
});
And cleaning the selection on the left side via:
self.ItemsA.removeAll(self.SelectedItemsA());
They items will appear correctly in the grid on the right side bounded to ItemsB, but they are automatically selected. So if I want to move a single item back, I first have to deselect all items I moved previously! How can I prevent kogrid from automatically selecting newly added items?
Its a bug in koGrid.
In koGrid-2.1.1.debug.js:
self.setRenderedRows = function (newRows) {
self.renderedRows(newRows);
self.refreshDomSizes();
};
newRows is an array of the rows you selected / copied.
koGrid copies them as they are, that means, that newRows.selected() (observable) is true.
UPDATE
Turns out, the above change would also de-select rows after they scrolled out of vision range. But i figured you can just set __kg_selected__ to false for each row you want to copy.
Say:
ko.utils.arrayForEach(self.SelectedItemsA(), function(player) {
player.__kg_selected__ = false;
});
and then push them all to the new array:
ko.utils.arrayPushAll(self.ItemsB(), self.SelectedItemsA());