When I start a page with grid, first row is focused and this style is beeing applied(row is highlighted):
.v-grid-row-focused > .v-grid-cell {
// ...
}
But when I programmtically change data source
grid.setContainerDataSource(...)
It doesn't highligh first row.
I've tried to select and deselect first item but it doesn't work.
myGrid.focus() also doesn't work.
How can I do that programmatically?
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);
I am new to .NET. I am converting an existing HTML and asp.net website into responsive. I converted an ASP DataGrid into responsive using the no more tables approach and it is working perfectly except that column headers are overlapped. The DataGrid columns are elements like:
<asp:BoundColumn DataField="M_DATENAME" HeaderText="Day"></asp:BoundColumn>
and some of these columns contain <span> elements, therefore in the small screen sizes when the headers are added before td(s), these columns get overlapped.
So I tried two ways:
As per the Udemy course using data-title or data-th attribute:
no-more-tables td:before { content: attr(data-title); }
However, the problem is that asp BoundColumn has no attribute called data-title or data-th
Second way is adding headers manually based on the example -> problem with it: Some of the columns are set to be Invisible and visible in certain conditions only. So at some point these headers text get overlapped.
So what could be the solution to my problem?
Or how can I add the BoundColumn HeaderText as a value of the content css property instead of the data-title or data-th.
I found a solution for the problem. Actually the problem was caused from the DataGrid columns that have null values (empty), therefore these cells were not displaying while the headers were displaying and thus overlapping with next cells. I did the following to achieve that:
1) I added <ItemStyle CssClass="headerStyle5"/> for each BoundColumn and TemplateColumn
2) Then in the CSS, instead of adding titles with absolute column position, I referenced columns using the headerStyle name I added in step 1 as the following:
#no-more-tables td[class="headerStyle1"]:before { content: "Date"; }
#no-more-tables td[class="headerStyle2"]:before { content: "Day"; }
#no-more-tables td[class="headerStyle10"]:before { content: "Remarks"; }
3) in the VB.NET, I wrote below code to loop through all empty cells and add a label with just space which will case the cell to show
Dim i As Integer
For i = 0 To DataGrid1.Columns.Count - 1
If e.Item.Cells(i).Text.Trim Is Nothing Or e.Item.Cells(i).Text.Trim = "" Then
Dim sosoLabel As New Label
sosoLabel.Text = "<label> </label>"
e.Item.Cells(i).Controls.Add(sosoLabel)
End If
Next
and now it is working perfectly :)
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 using dojo 1.7.2 and I have a datagrid. In one of the columns I have a long description that I want to show or hide when a "see more" link is clicked. I got all of that working with a formatter but when the description expands the datagrid's outer container does not get taller (in other words the rows below just get pushed down out of site. Is there anyway to change the height of the grid when I click on my show/hide (can the grid be redrawn? If so how?)
Update: I have created a js fiddle that shows what I want to do. You will see there is hidden text and when you click, it shows, but the rows at the bottom are pushed out of view:
http://jsfiddle.net/erayK/
Because I have to include some code, here is the formatter I used:
function formatLink(value){
// value 0: title, value 1: description, value 2: url
return ''+value[0]+'<br /><div style="display:none;" id="' + value[0] + '">'+value[1]+'</div>show or hide';
}
I found an acceptable solution, I can override the dojo styling that cuts off the stuff at the bottom and add a scrollbar using:
.dojoxGridContent {
overflow: auto;
}
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