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
Related
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've been working on JQGid and has a requirement to combine common cells together in one big cell as shown!
Now the requirement is the add another cell below the last to that would have a clickable button in new cell in the Address column.Which is for adding a new address for adam whose dob is 11/11/1988.
So the help I require is to create a an empty cell dynamically as the datasource for the jqgrid is a json object and I won't be able to modify the json value
PLease let me know any custom formatter you know for this specific odd requirement
Any help would be appreciated
Below given is the cellattr function I've used to combine then Name field
cellattr: function (rowId, val, rawObject, cm, rdata) {
var result;
if (prevCellVal.value == val) {
result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"';
}
else {
var cellId = this.id + '_row_' + rowId + '_' + cm.name;
result = ' rowspan="1" id="' + cellId + '"'+'"+"';
prevCellVal = { cellId: cellId, value: val };
}
return result ;
}
May be I'm not getting what you are trying to say but this is my current scenario and what I would need to is to move the add new Value dropdown to be added as a new row on the right side under the existing file or files (could be multiple based on the returned value from the server). I have used cellattr function as said above. with the answers i'm not able to fix this.
Using formatter I'm able to move it to the right side when there are no files are returned. But I'm not able to move it to the side with values returned
Further help would be appreciated
Thanks in advance
I posted the answer which shows how one can use rowspan attribute to fill the grid which is close to what you do. The demo from the answer you cellattr, but one can use setCell too to set rowspan too.
I made the demo to demonstrate this. It displays the following grid originally
after one clicks on the button "Click me to add new row" I use addRowData to add the row and use setCell to set new values for rowspan attributes of some previous rows. So one sees the following picture
I disable the button "Click me to add new row" because what I wrote is very rough code. I used just fixed values of rowid instead of analyzing the data and evaluating all required values full dynamically. Nevertheless the demo shows clear that one can fill such grids dynamically.
Inside of click event handler I used just the following calles
$("#list").jqGrid("addRowData", "100", { country: "USA", state: "California",... },
"last");
$("#list").jqGrid("setCell", "60", "state", "", "", {rowspan: "5"});
$("#list").jqGrid("setCell", "10", "country", "", "", {rowspan: "10"});
UPDATED: One can add any HTML fragment (like <button>) in the same way. One more demo add buttons in the grid
I am working on DHTMLX grid and i need to add edit/delete button in each row, Is there any way to do it. I googled it and i was able to find about check box and link.
Any help will be much appreciated.
You can create a custom column type with any needed html-content.
For example, the following code will create an eXcell which will render the cell value as a button with a label:
function eXcell_button(cell){ //the eXcell name is defined here
if (cell){ // the default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){} //read-only cell doesn't have edit method
this.isDisabled = function(){ return true; } // the cell is read-only, so it's always in the disabled state
this.setValue=function(val){
this.setCValue("<input type='button' value='"+val+"'>",val);
}
}
eXcell_button.prototype = new eXcell; // nests all other methods from the base class
all you need after that is to set your column type in your grid:
grid.setColTypes("button,...");
Here you can find a detailed tutorial with various examples:
http://docs.dhtmlx.com/grid__columns_types.html#customeditors
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
}
}