How to change the header of ag-grid dynamically using angular 7?
I have tried:
this.gridOptions.columnController.allDisplayedCenterVirtualColumns[1].colDef.headerName = "22";
but it works only in debug mode.
Columns are updated with setColumnDefs()
Refer this doc
const col = document.getElementById('colSelect').value;
columnDefs[col].headerName = value;
gridOptions.api.setColumnDefs([]);
gridOptions.api.setColumnDefs(columnDefs);
Try this solution
Related
My application (based on Vaadin 8) has a CheckBox and a CheckBoxGroup wrapped in a HorizontalLayout.
CheckBox myCheckBox = new CheckBox("My Checkbox");
CheckBoxGroup<String> multi = new CheckBoxGroup<>("Multiple Selection");
multi.setItems("Many", "Muchos", "Monta");
multi.setCaption(null);
multi.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
checkBoxLayout.addComponents(myCheckBox, multi);
checkBoxLayout.setComponentAlignment(myCheckBox, BOTTOM_LEFT);
checkBoxLayout.setComponentAlignment(multi, BOTTOM_LEFT);
this.addComponent(checkBoxLayout);
The problem is that the horizontal alignment of the checkbox and the checkbox group is not correct.
Setting the checkbox group caption to null does not help either. I suppose that the checkbox group has some additional spacing which could cause this behavior. How can I make sure that the horizonal alignment is working as used with setComponentAlignment?
Update 1
The solution suggested by #ollitietavainen (using MIDDLE_CENTER) results in the following:
If you have nothing else than the checkboxes inside the HorizontalLayout, using Alignment.MIDDLE_CENTER seems to work better than BOTTOM_LEFT.
I tried removing the CheckBoxGroupState.primaryStyleName "v-select-optiongroup" style name than along with the alignment suggested by https://stackoverflow.com/a/65180983/12854146 I have the following code
HorizontalLayout checkBoxLayout = new HorizontalLayout();
checkBoxLayout.setMargin(true);
CheckBox myCheckBox = new CheckBox("My Checkbox");
CheckBoxGroup<String> multi = new CheckBoxGroup<>("Multiple Selection");
multi.setItems("Many", "Muchos", "Monta");
multi.setCaption(null);
multi.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
multi.removeStyleNames("v-select-optiongroup");
checkBoxLayout.addComponents(myCheckBox, multi);
checkBoxLayout.setComponentAlignment(myCheckBox, MIDDLE_CENTER);
checkBoxLayout.setComponentAlignment(multi, MIDDLE_CENTER);
you may have a similar output if you do not remove the style name "v-select-optiongroup" from multi and instead you add it to your checkbox with
myCheckBox.addStyleName("select-optiongroup");
I am trying to get my Material table to first load with a column sorted and have the header arrow set to show that it is sorted. I added the following to my table to sort the table by default when loaded:
<table matSort matSortActive="name" matSortStart="asc" matSortDisableClear>
This seems to work and the data is sorted but the header arrow does no reflect the sort.
You can define the default sort before you set the sorter of your datasource.
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;
}
Working Stackblitz example
There are some known issues with mat sort arrow not being displayed.
One issue, while not exactly the same as yours, provides a working, programmatic solution: https://github.com/angular/components/issues/10242
It was the only workaround that worked for me.
For specific code see this answer: https://stackoverflow.com/a/65501143/407758
In my Vaadin 7 application I can add a new style name to a component for example via following method:
panel.addStyleName("criteria-menu-active");
But right the next click on this component I need to check if this style was already added to this component and if so - remove it.
So, how to test the component for the presence of a certain style by its name ?
Did you try the following?
myLayout.addStyleName("custom-style");
System.out.println("Style = " + myLayout.getStyleName());
Output:
Style = custom-style
Apparently is is possible to use Cocos2d-js 3.0 RC3 cc.LabelTTF with custom fonts, for example as answered here. However this doesn't seem to produce any results for me, neither in the local JSBinding app nor in the web browser.
Font file was included in the res object:
var res = {
lobster_ttf: "res/Lobster.ttf"
};
var g_resources = [];
for (var i in res) {
g_resources.push(res[i]);
}
Lobster.ttf does exist in the directory res.
The label is instantiated as follows:
var label = new cc.LabelTTF("labeltext", res.lobster_ttf, 48);
Doing this will not display the label in the specified font but in the default font. Specifying an installed font instead of the path to the custom ttf does however work.
Is there extra work required to be able to use TTF files?
cocos2d-js v3.0 rc3
Mine worked using the font name (font name when installing the font, not the file name font)
sample:
var label = new cc.LabelTTF("labeltext", "Lobster", 48);
Give it a try..
Tim
I want to create Vaadin drop down with 2 separators in it. I couldn't find a way to implement that, can anyone help me to solve this issue?
This is the way I want to display my drop down:
Option 1
Option 2
------------;
select 1
select 2
-----------;
group 1
How can I do that?
There is no built-in way to add separators to selects. The only way I can think of is to add an item with the desired separator as its caption. For example if you use the default caption (item id) select.addItem("-----"); should be enough. This should work for both ComboBoxes and NativeSelects.
You can implement a new Vaadin component including the client behaviour, but this is not an easy solution. This page https://vaadin.com/book/-/page/gwt.html of "Book of Vaadin" and Vaadin forum can help for that.
Also, creating your own component using existing components is another solution. You can implement a special combobox which takes values of String or Component arrays. The way of doing this is using Vaadin panels, layouts and windows with size and locations and click listeners.
I haven't tried it myself but give a go at NativeSelection dropdown.
You can always do
{select.addItem("-----");}
Once I also wanted a do something like that but there was no proper way to do that with Vaadin. I actually created a Vaadin widget extending the Combo Box. In the client side widget of Vaadin they filter out the HTML content before adding items to the list. So Using the client side code I override that functionality and use HTML tag "" to add the line.
select.addItem("-----");
looks like the best way, I dont know about some other
Btw if you are reading items from some list you can combine that with some item counter and (itemsCount%n)==0 operator to set separator after 'n' items inserted :)
You can add the item to the selected (as mentioned before) and then disable the separators with some javascript:
add the item to the select.
cb.addItem("separator");
cb.setItemCaption("separator", "-------------");
execute the javascript
final String javascript = ""
"var selects = document.getElementsByTagName('select');"
"for(var j = 0;j < selects.length;j++){"
"var op = selects[j].getElementsByTagName('option');"
"for (var i = 0; i < op.length; i++) {"
" if(op[i].text == '" + separatorText + "') op[i].disabled = true;"
"}}";
Page.getCurrent().getJavaScript().execute(javascript);
Is there a reason that you use the ComboBox instead of the Select, because with the select you can do that.
Select select = new Select();
select.setItems("Option 1", "Option 2", "select 1", "select 2", "group 1");
select.addComponentAtIndex(2, new Hr());
select.addComponentAtIndex(5, new Hr());
Or you can use a MenuBar but it looks very diferent that the ComboBox.
menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Select");
menuItem.getSubMenu().addItem("Option 1");
menuItem.getSubMenu().addItem("Option 2");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("group 1");