We Keep Coding

How to make row editor visible all the time in extJS roweditor

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

Unable to set focus on and edit a cell in slick grid

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

ng-grid change sorting order onchange of drop down

I am using ng-grid , i have implemented search functionality on it but i want to change orderby option by changing drop down value.
I wish to provide drop down on change of its value data soting should happen.
by default Sort-functionality is there which works on click of table heading but i need to change sorting order on change of dropdown.
This code i got from somewhere but i dont know how to use it ?
$scope.gridOptions = {
data: 'gridData',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'ageWord', displayName: 'Age'}
],
sortInfo: {
fields: ['age'],
directions: ['asc']
}
};

You need to define values for the sortInfo and useExternalSorting of your grid options, like this:
$scope.gridOptions.useExternalSorting = true;
$scope.gridOptions.sortInfo = {
fields: [$scope.selectedDropDownOption], // <-- or whatever variable used to store selected option from dropdown
directions: ['asc']
};

e.g.: if you want to sort by name, you could set
sortInfo: { fields: ['name'], directions: ['asc']}
this would order your grid by name and ascending
you also want to set useExternalSorting = true in your gridOptions.
i suggest you have a look at the docu and examples pages

I used following code ,,,
HTML :
<input type="text" ng-model="sortColumn"></input>
<button type="button" class="btn" ng-click="updateSortInfo()">Sort</button>
aap.js ::
$scope.updateSortInfo = function() {
$scope.gridOptions.sortBy($scope.sortColumn);
}

Reached here while searching for solution of similar thing. After trying all options I have applied this.
//Disable Grid Ui Sorting through header
$scope.gridOptions.enableSorting = false;
//Apply angular 'orderBy' filter to data for grid ui
$scope.resultSetTable = $filter('orderBy')($scope.gridData, 'YOUR_SORT_COLUMN');
// Apply data to grid ui
$scope.gridOptions.data = $scope.resultSetTable;

extjs 4.2.1 GridPanel - Show/Hide link in template column

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';

How do I add an image to a combo in Extjs?

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.