I have a grid using this store:
MyStore = Ext.create('Ext.data.ArrayStore',{
data : [
['field1'],
['field2'],
['field3']
],
fields : [{name:'title'}]
});
So i get a grid with 3 rows and 1 column.
I create an event that when i select a row in another grid the content of row 1 in this grid change (for example 'field1' becomes 'field4').
This code makes me get the content of the row: MyStore.data.items[0].data.title
But i don't know how to change it in the grid
I hope my question is clear and thank you for helping.
Try this:
MyStore.getAt(0).set('title', 'field4');
Related
I am building a custom component where I am using the table component provided by Ant Design. For most of the parts, everything works as expected, however, there is a "tiny" issue.
I am using the "tree-data" (i.e. nested JSON) data to populate the Table component. Due to the fixed column size (which is a requirement) it has been noted during QA that the row`s label is not properly indented if it overflows (i.e. starts on a new row).
So my question is, how can indent the label such that when the label starts on a new line it starts from the initial indentation like this:
The GOAL would be to have the label "squeezed" within the green-dashed container.
On THIS LINK you can find a demo (the same as the one in ant design documentation with minor changes) which replicates the issue I am working on.
open the link
expand the first row (i.e. John Brown sr.) as it is expanded in the picture above.
You can apply display 'flex' to the column
// index.css
.name-column {
display: flex;
}
// demo.js
// column
...
...
...
{
title: "Name",
dataIndex: "name",
key: "name",
className: 'name-column'
},
...
...
...
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);
Is it possible to programmatically create a Grid that has 3 rows and 2 columns, but the last row only has 1 column instead of 2?
public class MyGrid : Grid
{
public void DefineRowsAndColumns()
{
// I know you can add RowDefinitions and ColumnDefinitions here, but how to make them uneven?
}
}
I'm not trying to get someone to do my homework here...I just want to know how I can get a grid to have rows with different number of columns.
you can use the ColumnSpan property to make content span multiple columns
var label = new Label { Text = "Row 1" };
myGrid.Children.Add(label,0,0);
Grid.SetColumnSpan(label,2);
the Label will span 2 columns, effectively making that row contain only a single column
I have implemented bootstrap 4 data table 4 in angular 4 but not able to change or modify row color. row selection color and header color as well.
I am using the data table 4 example : https://github.com/afermon/angular-4-data-table-bootstrap-4
and in this examples demo go through the demo 1 of link: https://afermon.github.io/angular-4-data-table-bootstrap-4-demo/
Considering the below code snippet present in data-table-component-demo1.ts got by the Git project you downloaded:
<data-table id="persons-grid"
[header] = "false"
[multiSelect] = "false"
[substituteRows]="false"
[indexColumn]="false"
[items]="items"
[itemCount]="itemCount"
(reload)="reloadItems($event)"
[pagination]="false"
(rowClick)="rowClick($event)"
[rowColors] = "callBackForChangineRowColors"
>
<data-table-column
[property]="'name'"
[header]="'Name'"
[sortable]="true"
[styleClass]="someExplicitClass"
In this, we can assign the value 'someExplicitClass' to [styleClass] as shown above and define the class someExplicitClass in our data-table-component-demo1.css file as below:
:host /deep/ .someExplicitClass{
background-color:red;
}
However, this is applied to the whole of the DataColumn and not controllable on a granular level.
We can indirectly apply only background-color using the rowEvent variable available within the rowClick(rowEvent) function of 'data-table-component-demo1.ts'
On click of the row, I will set the selected property of the row to true and thereby will trigger the onRowSelectChanged function of table.component.ts file
Now, once I set [rowColors] value to "callBackForChangineRowColors" as shown above and make the below changes in my data-table-component-demo1.component.ts file:
rowClick(rowEvent) {
console.log('Clicked: ' + rowEvent.row.item.name);
rowEvent.row.selected = true;
}
callBackForChangineRowColors(a,b,c)
{
if(b.selected)
return 'blue';
}
This way, I will be able to apply the color of blue explicitly for the selected Row.
*I could'nt unfortunately find any solution to apply any other styles on a granular level using a readily available input parameter like [styleClass] for it wasnt exposed as an #Input within our column.component.ts. If anyone has an idea, please do help me know it.
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