How can I listen to the event when user clicks on row caret to either expand/close the row detail area?
You can use de-sugard syntax for the *clrIfExpanded directive like so:
<clr-datagrid>
<clr-dg-column>Col1</clr-dg-column>
<clr-dg-column>Col2</clr-dg-column>
<clr-dg-row *clrDgItems="let item of [1,2,3,4,5]">
<clr-dg-cell>Item {{item}}</clr-dg-cell>
<clr-dg-cell>Item * Item ({{item*item}})</clr-dg-cell>
<clr-dg-row-detail clrIfExpanded (clrIfExpandedChange)="rowChange($event)">
details
</clr-dg-row-detail>
</clr-dg-row>
</clr-datagrid>
Here is a working stackblitz that logs the change each time the row is opened or closed: https://stackblitz.com/edit/so-55617551-click-handler-for-datagrid-row-details
Related
I am trying to make Mui select scrollbar position on center of the list by default and keep this field empty on start. Now whenever user clicks the select it shows values starting from the first one. For example in this select example here, I would like it to show values with the "100" on the center of the list. Now it shows "10" on top of the list what is by default.
I want it to look like that without user interaction - empty field:
After user click - it is now:
after user click - What I want to achieve:
Thanks in advance.
You set it in the in the default value in your useState which is what i recommend.
const [value, setValue] = useState("100");
or if for any reason you don't want this approach you can write it in the value of the Select like this:
<Select
label={null}
MenuProps={{ style: { maxHeight: "300px" } }}
IconComponent={() => null}
name={"example_name"}
value={value || 100}
onChange={handleChange}
>
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);
Simple starter app with clarity 1.0.0. When attempting to display datagrid the following fails to align any the columns across rows.
<clr-datagrid>
<clr-dg-column>ID</clr-dg-column>
<clr-dg-column>First Name</clr-dg-column>
<clr-dg-column>Last Name</clr-dg-column>
<clr-dg-column>Email</clr-dg-column>
<clr-dg-column>Gender</clr-dg-column>
<clr-dg-column>IP Address</clr-dg-column>
<clr-dg-column>Department</clr-dg-column>
<clr-dg-row *clrDgItems="let employee of employees">
<clr-dg-cell>{{employee.id}}</clr-dg-cell>
<clr-dg-cell>{{employee.first_name}}</clr-dg-cell>
<clr-dg-cell>{{employee.last_name}}</clr-dg-cell>
<clr-dg-cell>{{employee.email}}</clr-dg-cell>
<clr-dg-cell>{{employee.ip_address}}</clr-dg-cell>
<clr-dg-cell>{{employee.department}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer><clr-dg-footer>
<clr-dg-pagination #pagination [clrDgPageSize]="10">
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Employees per page</clr-dg-page-size>
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
of {{pagination.totalItems}} users
</clr-dg-pagination>
</clr-dg-footer></clr-dg-footer>
</clr-datagrid>
It appears you have an extra column declared but no corresponding cell for it.
This should work for you.
<clr-datagrid>
<clr-dg-column>ID</clr-dg-column>
<clr-dg-column>First Name</clr-dg-column>
<clr-dg-column>Last Name</clr-dg-column>
<clr-dg-column>Email</clr-dg-column>
<clr-dg-column>Gender</clr-dg-column>
<clr-dg-column>IP Address</clr-dg-column>
<clr-dg-column>Department</clr-dg-column>
<clr-dg-row *clrDgItems="let employee of employees">
<clr-dg-cell>{{employee.id}}</clr-dg-cell>
<clr-dg-cell>{{employee.first_name}}</clr-dg-cell>
<clr-dg-cell>{{employee.last_name}}</clr-dg-cell>
<clr-dg-cell>{{employee.email}}</clr-dg-cell>
<clr-dg-cell>{{employee.gender}}</clr-dg-cell>
<clr-dg-cell>{{employee.ip_address}}</clr-dg-cell>
<clr-dg-cell>{{employee.department}}</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>
Here is a stackblitz with it running.
I have a Material Tab component in Angular 2.
I want to have a button at the end of the tabs, that acts as a add tab button. Upon clicking on it a new tab is created before it.
I tried putting a button there, but couldn't find how to place it exactly next to the last tab.
So what I did is I added a tab that acts like a button. When this tab is clicked, a new tab is created.
However, when this tab is clicked, it gains focus. While I can change which tab is selected, the tab still has the focused UI (it is colored).
How can I make it lose it's focus completely?
P.S. If there is a way to add a regular button next to the last tab, without making it a tab, this would also be good.
Edit - Code:
This is how my tabs are setup:
<mat-tab-group (selectedTabChange)="selectedTab($event)">
<mat-tab>
<ng-template mat-tab-label>
Basic Details
</ng-template>
</mat-tab>
<mat-tab #categoryTab *ngFor="let table of mCase.Tables; let tableIndex = index" [attr.data-index]="tableIndex">
<mat-tab>
<mat-tab #addCategory>
<ng-template mat-tab-label>
<div color="white" class="center">Add category</div>
</ng-template>
</mat-tab>
</mat-tab-group>
Code behind:
public selectedTab(e) {
if (e.index == 1 + this.mCase.Tables.length) {
//Add new category
this.CreateTable();
this.selectedIndex = this.mCase.Tables.length;
}
Promise.resolve().then(() => this.selectedIndex = e.index);
}
You could try add the button like this:
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
Basic Details
</ng-template>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="foo()">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
Working example: https://stackblitz.com/edit/angular-zrklwg
By the way, if you are bothered by the button having disabled like styles, you can just override that with some custom CSS! :D
You can use .blur() on the event.currentTarget of the button which has been clicked. .blur() is the opposite of the .focus() method and will remove focus from an element.
In you question you said:
Upon clicking on it a new tab is created before it.
You didn't add any html, so I just went and created an example of how you can dynamically append buttons to the html via a data bound array.
this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
To learn about how this works, see this answer.
This is the crux of the component code that you can use to blur focus on the element.
addButton(clickedButtonIndex, event){
this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
event.currentTarget.blur();
}
Working Example: https://stackblitz.com/edit/angular-vslscm
In the example, I have set a red background in css to be applied to buttons when they are focused. You can see that when you click on a button, it momentarily will turn red before being toggled off again. Clicking the buttons will add a new button before the button which was clicked.
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?