I am new to DoJo development so this could be basic.
I have created an EnhancedDatagrid and it shows the data fine.
The data comes from an JSON store in a different page.
I have a button which causes that one new entry is created in the datastore and then my datagrid is 'refreshed'. This works fine.
But now i want only as the last step to change the style of the first row in my datagrid.
(I need to make the newly added row more visible.)
But i simply can't figure out how to get a handle on the first row in a datagrid.
...
grid = new dojox.grid.EnhancedGrid({
id: strId,
store: store,
structure: layout,
}, document.createElement('div'));
dojo.byId(placeHolder).appendChild(grid.domNode);
grid.startup();
var row = grid.getItem(0); // ---get the first row. How ? And how to apply new style ?
...
Thank you in advance.
Solved the problem like this:
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
}
});
I use the 'Claro' theme and it prevented me to set the background color of the row-cells.
The solution was to set the customClasses to a style like this:
.highlightRow tr
{
background-color: #FF6A00 !important;
}
Found part of the solution here: http://dojo-toolkit.33424.n3.nabble.com/row-customStyles-was-overwrite-by-claro-theme-td3763079.html
Related
I want to style a grid row after clicking on it. I get the grid row / item in the itemClickListener, but I need to avoid using grid.select(item). I have achieved the desired output which would highlight the row I clicked on with the grid select method, but this causes problems for my app since I do not want that row to be selected, but I want it to be just highlighted, e.g. apply a CSS style to said row. This is my code so far:
grid.addItemClickListener(e -> {
grid.deselectAll();
grid.select(e.getItem());
});
as well as:
grid.setStyleGenerator(row -> grid.getSelectedItems().contains(row)
? getRowSelectedStyle(row)
: null);
I cannot seem to find anything on the forums which could apply a style name for the clicked row.
You probably need to add a property to your item Bean, se "clicked".
Then you could do
grid.addItemClickListener(e -> {
e.getItem().setClicked(true);
grid.getDataProvider().refreshItem(e.getItem());
});
And
grid.setStyleGenerator(row -> row.isClicked()
? getRowSelectedStyle(row)
: null);
In twitter bootstrap (and/or css), how can we ensure a table is displayed in its full form (with fixed dimensions), no matter whether or not its row are populated with data or not ?
I'm not sure to completely understand the question. But if you want to check if your table is fully displayed, I will use JavaScript/jQuery.
You could just check if the table has the size that you put in the CSS but I don't think that what you mean with your question:
if($(".table").height()==??) {
//DO WHAT YOU WANT
}
If your data are put on one line in the table, you can then check the number of row and multiply by the size of one row: https://jsfiddle.net/ugppwzsc/1/
But if your row have various size, you will have to calculate the size of every row and check if it's what you want:
var cal = 0;
$( "tr" ).each(function() {
cal += $(this).height();
});
if($("table").height()==cal) {
//DO WHAT YOU WANT
}
i would like to have one list select that will have more than one style, i put two kinds of object's one is a group of users (bold), rest are users (italic or regular) is it possible to add style that will be added to part of added obj?
My code looks like this:
for(Usr usr: userSearchResult){
listSelect.addItem(usr);
}
listSelect.addStyleName("bold");
for (Gr gr : groupSearchResult) {
searchList.addItem(gr);
}
and also have style set in css correct similar to this
.v-select-bold .v-select-select {
font-weight:bold;}
i would be glad to solve this by myself but that was two days ago now i'm in a dot ;)
Thanks in advance for help!
You can store your row as a label with style. In the container there will be a label instance. There you can simply add the style.
Container container = new IndexedContainer();
container.addContainerProperty(NAME_PROPERTY, Label.class , "");
for (int i = 0; i <= 50 ; i++) {
Item item = container.addItem(i);
Label label = new Label(HashUtils.getRandomSalt());
label.addStyleName(style)
item.getItemProperty(NAME_PROPERTY).setValue();
}
return container;
You can't style rows of a ListSelect. You can use a Table component with one column to achieve a similar result. Table.setCellStyleGenerator method is used for differentiating styles for each cell (each row in your case).
I got a problem with the widths of the advanceddatagrid-columns.
First of all, my layout is a HDividedBox, on the left there is the navigation, on the right there is a module, containing the advanceddatagrid.
left Side: navigation
right side: module (e.g. advanceddatagrid)
Most of the columns got a fixed width, some a minWidth. Now, initially the widths of the columns are correct.
So the problem is, whenever I load a new module and later reload the advanceddatagrid, the initial width of the columns is way different, although I change nothing in the process of loading the module. Neither the fixed widths nor the minWidths are initially correct.
I recently saw there is a solution for wrong widths of colums, it looks like that:
var oldPolicy:String = advanceddatagrid.myScrollPolicy;
advanceddatagrid.myScrollPolicy = ScrollPolicy.ON;
for(var i:int = 0; i < advanceddatagrid.columns.length; i++) {
var column:AdvancedDataGridColumn = advanceddatagrid.columns[i] as AdvancedDataGridColumn;
advanceddatagrid.column.width = column.width;
}
advanceddatagrid.validateNow();
advanceddatagrid.myScrollPolicy = oldPolicy;
advanceddatagrid.validateNow();
On the whole this is just a temporary change of the ScrollPolicy, re-setting the column-widths and then changing back. But still, it doenst work.
Does anyone have a clue?
Some relevant references that might help (the first one worked for me):
http://userflex.wordpress.com/2011/04/14/force-resize-datagrid/
http://forums.adobe.com/message/4285461
To summarize the first post (credit goes to Nick Schneble):
public function resizeColumns () : void
{
grid.validateNow ();
// forces the columns to size themselves properly
for each (var column : AdvancedDataGridColumn in grid.columns)
{
column.width = column.width;
}
}
It may seem a bit ridiculous, but if you execute this method whenever the underlying data in your data grid changes, you’ll have beautifully laid out columns.
<mx:DataGrid id="calendarGrid"
dataProvider="{rows}"
width="100%"
height="100%">
<mx:columns/>
</mx:DataGrid>
I dynamically add columns and rows to it in this way:
var dgc0:DataGridColumn = new DataGridColumn("timeSlot");
dgc0.headerText="Hours";
hoursColumns=new Array();
hoursColumns.push(dgc0);
for (var i:int=7;i<21;i++)
{
var dgc:DataGridColumn = new DataGridColumn();
dgc.headerText=i+":00-"+(i+1)+":00";
dgc.itemRenderer=new ClassFactory(CustomRenderer);
hoursColumns.push(dgc);
}
calendarGrid.columns=slotsColumns;
for(var i:int =0;i<maxNum+1;i++)
{
rows.addItem({timeSlot:"Day n° "+(i+1)});
}
My CustomRenderer detects user clicks and changes the color of the selected cell.
When I select one cell on, say, the first column, it is colored but if I select another cell on the same column the first one is uncolored and the second isn't colored.
Maybe the same renderer is used for all cell in the column?
There's a way to avoid it?
Thanks a lot.
I've got it!
Sorry my second unnecessary question :( my custom renderer constructor has this code inside:
addEventListener(FlexEvent.DATA_CHANGE, resetCell);
which reset cell color, I've remove it and now seems work...
sorry again.