I'm fairly new to infragistics and i need help -
i need to add a checkbox to every cell in my grid while still displaying the cell value and allow user to check/uncheck the cell-
for ex - my grid has many columns - text, datetime, numbers etc
each cell will display the text/date/number and also have a checkbox for user to check/uncheck that field
IS THIS POSSIBLE?
One possible way is to add an editor in the grid cells. For example, you can add UltraTextEditor with StateEditorButton (on the left or right as is better for your solution) in each cell like this:
private void UltraGrid_InitializeRow(object sender, InitializeRowEventArgs e)
{
if (!e.ReInitialize)
{
foreach (UltraGridCell cell in e.Row.Cells)
{
StateEditorButton checkBox = new StateEditorButton();
UltraTextEditor textEditor = new UltraTextEditor();
textEditor.ButtonsRight.Add(checkBox);
cell.EditorComponent = textEditor;
cell.Column.ButtonDisplayStyle = ButtonDisplayStyle.Always;
}
}
}
Keep in mind this will add many editors to your grid - bad performance. Other possible solution is to add via Creation Filter the check boxes to your cells.
Either way the main question is - how you will save the checked state back to your data source? If you have a boolean column for each column you actually do not need to add any check boxes. So think how you will save this information.
Related
I have a grid, in which some rows with data are "inherited". That is, there are some parent rows and child rows. Child rows have the id_inherit field set to the id of the parent row. The grid is editable. Now I want to add some functionality which makes it possible to analyze changes in all child rows. If some value in some cell is different from that in the parent row, then I want to change the background of that particular cell in the inherited row. I want to do these analytics on the fly: in other words, I want to make it when the user hits the button. Now, I parse my grid rows like this:
var store = Ext.getCmp('grid').getStore();
store.each(function(record,idx){
if(record.get('id_inherit')!=0){ // grid row is inherited
// here I want to compare values in all cells of this row
// and the parent row, whose `id` is equal to record.get('id_inherit')
// if values are different in a particular cell of the inherited row, then
// I want to change its background color
}
});
EDIT
Now, without any comparison, I just try to change the cell color of all inherited rows, but it does not work. I do it like this:
store.each(function(record,idx){
if(record.get('id_inherit')!=0){
grid.getView().addRowCls(idx,'red');
// I guess I should have used addCls instead, but
// I do not know how to target a particular cell inside this record
// and change its class correctly
// but of course, I know column names and indices
}
});
And red style is defined like this:
.red {background-color: red !important;}
But it is not working. If I knew how to change the cell color dynamically, I could do all the other routines - comparing with parent rows, etc.
EDIT
I tried practically all solutions posted at StackOverflow and which seem to relate to some extent to my problem, but none of them work. What I want to stress again, is that I need to change the background color of a particular cell - NOT of the entire row and NOT of the entire column. And I want to do it on the button click - NOT inside the render function.
EDIT
I consulted this article ExtJS 4 Grid Change Cell Color , but the author manupulates the DOM of the selected row, and does it like this:
var selection = grid.getView().getSelectionModel().getSelection()[0];
var dom = (grid.getView().getSelectedNodes()[0]);
tds = Ext.get(dom).select("div");
Ext.get(tds.elements[evt.target.offsetParent.cellIndex]).addCls('black');
But in my case, where I iterate through the grid store, I do not know how to get to the dom of the current record, then select the div and add a custom class.
EDIT
Well, I tried thousands of tricks, but nothing works at all. If someone could advise me on how to parse a grid record to get to the cell HTML-structure, I would mark this advice as an answer. What I now know, inspecting the DOM structure, is, for example, that one of my cells has this CSS class x-grid-cell x-grid-cell-73892 x-grid-cell-last. What makes it unique is this part: x-grid-cell-73892. So, I tried to do it this way
store.each(function(record,idx){
var div = Ext.fly(record).query('x-grid-cell-73892').select('div')
....
});
But this is not working. Who would have thought, that such a trivial thing - the most trivial that I can imagine - that is to change the background color of a cell on button click, has no simple solution. At this point I have no solution, in fact.
EDIT
Well, I did it myself. The trick was to use the getCell function:
var column=grid.columns[index],
cell=grid.getView().getCell(record, column);
cell.addCls('mycss');
I have datagrid and one panel. When I click on any row, all data should be appeared on that panel. And when I edit cell and after editing if I click another cell of same row, panel should be updated immediately. My datagrid is bound through item source (data table), so if I make any change to grid (add/delete/edit) my item source is updated and as per item source Panel is updated.
To achieve cell edit thing I use following code and it's working.
void DataGrid_CellEditEnding(object sender, DataGridCellEditEndingEventArgs e)
{
if (!isManualEditCommit)
{
isManualEditCommit = true;
DataGrid grid = (DataGrid)sender;
grid.CommitEdit(DataGridEditingUnit.Row, true);
isManualEditCommit = false;
}
}
Issue: Only issue is when this line gets called (grid.CommitEdit), it basically loading all rows again.and if datatable is really big than it takes few sec to load all rows. If I don't commit grid then my changes of datagrid appears on panel after I click on another row. I want to achieve it when i click on another cell of same row without loading rows again.
Here is Image
Pls help
Thanks
this is a common pitfall of the DataGrid : the commit logic. The solution i found (it was booleans, not numbers) was to make my own custom DataGridColumn, with my bindings triggers set on PropertyChanged, to have the content updated at once and not only on commit. Surely this is a little work, but DataGrid standards column won't allow you to change that commit logic.
I have a grid and when I click on a button in the toolbar of the panel I want to check if a row in the grid is selected.
If true I need de value of one cell of that row, so I can put it behind a url.
But I have no idea how I can use the selection model to get the cell value of a selected row in EXT JS 4.
Perhaps try something like:
grid.getSelectionModel().getSelection()
This will return an array of all selected records withing the grid.
Then, you can iterate over the selection, find your row and call row.get('PropName') to get the value.
Hope this helps.
You're approaching the issue backwards though. You want to register for the 'selectionchange' event from the grid.
thisController.control ({'#mygrid':
{
selectionchange:onSelectionChange}
});
function:onSelectionChange(model, selected, eOpts )
{
//do work here
}
So basically you want to create an event driven model.
After rendering full grid I need to change data context of selected Row since initially "simple" objects are filled as data source and when single item is selected (looking at RowDetailsVisibilityChanged event), then I want to change DataContext to complex object, that shows much more info in details than in collapsed row.
Using GridViewRowDetailsEventArgs.DetailsElement.DataContext seems to do the trick for Details element that is expanded below row on selecting, BUT Header (Columns) stay the same and values are not updated when changing GridViewRowDetailsEventArgs.DetailsElement.DataContext or GridViewRowDetailsEventArgs.Row.DataCOntext .
(Imagine like column of collapsed row is bound to Name, where Name is "John", and when expanding, Row.DataContext is changed to to object with property Name with "John Dough", but column still shows "John").
Ok i found a solution and it seems to be pretty simple.
so ... you hook up event handler to RadGridView.RowDetailsVisibilityChanged and in event handler itself you change Item property of provided Row:
private void OnRowDetailsVisibilityChanged(object sender, GridViewRowDetailsEventArgs e)
{
e.Row.Item = (my New Data);
}
Only problem right now is that row is no longer clickable (details no longer expands when selecting it).
I have a silverlight datagrid with a single editable column. This column has a combo box. To open the combo i have to click on the cell three times. Once to select the row, once to enter edit mode, and once to open the combo.
alt text http://lh4.ggpht.com/_L9TmtwXFtew/Sw6YursbUmI/AAAAAAAAGlg/QJCLu0K7o_8/image_thumb%5B6%5D.png
IMHO this is really bad UX so I would like the row to enter edit mode when the user does a row click or mouse over and allow the combo to be opened when with a single click.
The row would then drop out of edit mode if the user does a mouse off the row.
Is this possible?
What is the best way to approach this?
Thanks,
Mark
Simple way: handle DataGrid_MouseLeftButtonUp and make your desired behavior.
void MyDataGrid_MouseLeftButtonUp(sender , e)
{
if (MyDataGrid.SelectedItem != null) //ensure we have current item
{
//set current column
MyDataGrid.CurrentColumn = MyDataGrid.Columns[4];
//call begin edit
MyDataGrid.BeginEdit();
//now open combobox
MyComboBox.IsDropDownOpen = true; // a.)
}
}
I hope you catch the ideea.
a) * here I'm not sure if 100% working.
(and, of course, you need a reference to MyComboBox (ComboBox control defined in column template)*
Good luck
rlodina
setting datagrid.selectedIndex will fix the issue