I'd like to add a column with checkboxes in a rally grid (something like "Select Default"). It looks like that should be pretty simple using the 'checkcolumn' xtype. But that requires you to link in some additional extjs styles, and I'm not sure how to do that within the Rally extjs framework:
Extjs 4 checkcolumn not visible
Here's an example of such a column in ext-js: http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/edit-grid.html
Is there a way do this with a Rally grid?
I ended up using a quick and dirty solution based on the anwser below:
{text: 'Default', dataIndex:'selected', align: 'center', width: 50, renderer: function(value, style, item, rowIndex) {
return "<input type='radio' name='primaryIndex' alt='"+ rowIndex + "' " + (value ? "checked='checked'" : "") + ">";
}},
AND:
checkRadioClick: function(event) {
var button = event.getTarget('input[type="radio"]');
if (button) {
...
Currently Ext's grid (which the Rally grid extends) doesn't support a checkbox column. The closest thing that comes out of the box is the Boolean column:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Boolean
This is because the grid expects you to have to click a cell to initiate an edit and a checkbox column is immediately editable without that action.
That given, I think you should be able to render a checkbox column by simply specifying a renderer for that column in your column config. It may be a little challenging to get the values back out of the grid when they change though since the values will not have been committed to the underlying records in the store (because no actual edit was triggered).
There is also a user submitted CheckColumn here that you may be able to use or at least as an example to get started:
http://docs.sencha.com/ext-js/4-1/source/CheckColumn.html#Ext-ux-CheckColumn
Maybe this is new with one of the newer preview versions? I did this:
Ext.create( 'Rally.ui.grid.Grid', {
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 1,
mode: 'SIMPLE',
listeners: {
selectionchange: function( model, selected ) {
// do stuff
},
scope: this
}
}
Related
I have a kendo grid with inline editing. I want to be able to make one of the cells in the row editable if another cell in the row is checked. If it's not checked then I want the cell to be read-only.
My columns look like this:
columns: [
{ field: "Title" }, // string
{ field: "Body" }, // string
{ field: "IsCalculated", template: "#= IsCalculated ? 'Yes' : 'No' #" }, // boolean
{ field: "Expression" } // string
]
If Calculated is checked then I want Expression to be editable, otherwise, I want it to be read-only.
I have looked at the configuration docs for the kendo grid and I have experimented with the columns.editable function but as explained in the docs: "The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created."
I can use this function to determine whether the cell should be editable or read-only before it's opened but I want to be able to change it while the cell is open for editing and the Calculated checkbox is checked or unchecked.
Try preventing the edit event with cancelRow():
edit: function(e) {
if (!e.model.IsCalculated &&
$(e.container).find('input').attr("name") == "Expression")
{
this.cancelRow();
}
}
Demo
UPDATE - Better condition:
if (!e.model.IsCalculated &&
$(e.container).find('input[name="Expression"]').length) // <---
Demo
Part 1) In my grid, I have some editable columns which I would like to do inline editing to. However when I select any particular cell and if the inline editing is available on that cell (editable: true), it should select the text to be edited.
For example if this is the default grid:
then upon selecting any cell in Quantity, the result should be something like this:
When we click on a cell to edit that row in jqGrid, current implementation does not highlight the selected text like this. Is there any way to achieve this?
Part 2) Migrated to this question as per Oleg's suggestion
GRID CODE: jsFiddle
Note: My real application datatype is JSON
I'm not sure about all versions of old web browsers, but you can modify the code of onSelectRow to the following
onSelectRow: function (id) {
var $self = $(this);
if (id && id !== lastsel2) {
$self.jqGrid('restoreRow', lastsel2);
$self.jqGrid('editRow', id, {
keys: true,
focusField: 'Quantity',
oneditfunc: function (rowid, options) {
$control = $("#" + rowid + "_Quantity");
if ($control.length > 0) {
$control[0].select();
}
},
aftersavefunc: reload
});
lastsel2 = id;
}
}
see http://jsfiddle.net/OlegKi/HJema/163/. It uses focusField: 'Quantity' option to set the focus on the 'Quantity' column. It uses select() method to select the text of <input> field.
The second part of your question (about bindKeys) seems to me a separate question. The method bindKeys allows to implement custom callbacks onLeftKey, onRightKey. Which one you would like better to use is not full clear for me.
I have a web application that uses ExtJS 4 that incorporates a Ext.grid.EditorGridPanel.
One of the columns of the Ext.grid.EditorGridPanel has a combobox editor that I would like to disable programmatically when the store loads based on the value of another field in the store.
It seems like this should be pretty simple - but so far nothing seems to work.
When the Grid's store loads, I have a listener to check each row and disable the combobox in index 4 depending on the value of another field.
The only thing that I can't get to work is actually disabling the combobox.
Any suggestions?
Here is the psuedo-code. Thanks in advance
listeners: {
'load': function(st, records, options) {
var view = getMyEditorGridPanel().getView();
for (var i = 0; i < this.getCount(); i++) {
if (store.getAt(i).get('setDisabled') === 'Y') {
//The cell at index 4 has a combobox editor - I CAN'T GET IT TO DISABLE!!
view.getCell(i,4).setDisabled(true);
}
}
}
From my point of view you have two different things you need to manage here:
Cell Styling, the way a cell looks when not being edited (either is enabled or disabled)
Editor Availability, how to react when a cell is about to be edited (should be possible to edit the cell)
Cell Styling
For the first one I would advice to provide a style to each cell in order to make it look disabled, this can be achieved during rendering time instead trying to do it when the store loads (btw nothing ensures you that the grid items have been fully rendered just after getting the load event callback). You can return a custom class per row by providing an implementation to Ext.grid.ViewView.getRowClass
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
return record.get("disabled") ? "mail-disabled" : "";
}
}
Editor Availability
You will also need to handle the Ext.grid.plugin.CellEditingView.beforeedit event and provide a custom logic to determine when the editor will be available
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, e, eOpts) {
return e.record.get("disabled") == false;
}
}
})]
You can find a working example of both solutions here, hope it helps to solve your problem.
I have a grid with handsontable but this grid is wider than the screen. Here is a capture of what it looks like :
As you can see, I have a scroll bar because the grid is too wide.
The user insert some data in this grid and I make a request in ajax to test the content (required field, numeric field, ...) When there is an error, I return a number to know which cell is incorrect. I use this number like that :
$(cells).eq(jsonobject[item]-11).css("background-color","red");
With the .eq function I can select the cell I want. But when the grid is wider than the screen, I feel that the index of each cell is moved.
Here is a wonderful sketch of what I think :
So the indexes are dependants of the screen but not of the grid.
How can I overcome this problem please ?
EDIT :
The code where I declare my hot :
var container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement,
stretchH: 'all',
minSpareRows: 1,
observeChanges : true,
rowHeaders: false,
colHeaders: false,
contextMenu: true,
height: 550,
... //more options
In the ajax return, I get an array of values with some indexes where the data is incorrect and I try to color the cell in question. So I tried like that :
for(var i=1; i<(data_traitement[0].length);i++ )
{
for(var item in jsonobject)
{
if((item % 2 ) == 0) //Si l'indice est pair, on affiche la couleur
{
hotTraitement.getCell(i,jsonobject[item]-j).css("background-color","red"); //Here, firebug tells me "hotTraitement is undefined"
}else
{
$(cells).eq(jsonobject[item-1]-1).qtip({
content : '<div id="bulle">'+jsonobject[item]+'</div>',
position: {
adjust: {
x: -100
}
},
style: {
classes: 'myCustomClass',
def: false
}
});
}
}
j = j+3; //Just to loop through the rows (I have 3 cells in a row)
}
Well to start off, there's virtual rendering happening horizontally meaning that if you were to have a table with many many columns, most aren't being rendered therefore jquery will never find them.
Now, to do this more efficiently, I would simply get the cell using the HOT methods included:
hot.getCell(row,col);
This returns to you the TD after which you could attempt to do the css like you were asking.
I don't think this would be the best way to go, however, because physically modifying the DOM doesn't work well with Handson given that it re-renders pretty frequently. Instead, you should be setting the custom renderers on each cell to respond to your validation efforts. A simplistic solution is to have an array with cell coordinates which should be marked as "invalid". The custom renderer could then ask if the current cell coordinates are in this array and if so, apply your css logic as you did above.
And just FYI, Handson has wonderful validation functionality built in which I highly recommend using. It will apply a class name for you if it fails validation so there wouldn't even be a need to do any fancy cell finding, just add the class you want and in your CSS file attach whatever style you want.
I've got a YUI DataTable with various columns that represents a list of users. I would like to add a column that contains a button in each row with a specific label (say, "grant access") and which invokes some function when clicked. Is this possible?
I've tried checking the YUI documentation, but as far as I can see, they don't allow you to change the label of the button itself in the way I allude to here. Any hints?
In your column definitions, You should be able to specify a formatter ala
var myCols = [
... /* your other cols */
{
key: 'foo', formatter: function (cell, rec, col, data) {
cell.innerHTML = '<button type="button">'+data+'</button>';
}
}
];
Custom formatters give you complete control over what is rendered into the cell. Also look at this example