I have a kendo-angular-ui chart and I am displaying labels for each point on a line chart. I don't want to display labels on specific points if the label values are null or zero. How do I go about hiding labels only if null or zero?
I realise this is quite late but you can use the content property on the kendo-chart-series-item-labels element and bind it to a function in your component that checks the label, and then returns a blank label depending on your conditions.
HTML:
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item type="donut"
[data]="pieData"
categoryField="category"
field="value">
<kendo-chart-series-item-labels [content]="labelContent"
[visible]="true">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
And then in your component your function can look something like this:
public labelContent(e: any): string {
if (e.value === 0) {
return '';
}
return e.value;
}
So quick recap: bind property content on the kendo-chart-series-item-labels element to a function in your component that returns a blank value for a label you want to hide.
Related
I have a table in Tabulator and would like to show all 0 values in the cells as blank. What's the best way to achieve this?
My first attempt was to write a custom mutator:
mutator: function(value, data, type, params, component){
if (value == 0){
return "";
}
else{
return value;
}
}
This works but feels wrong. Further, I would like to create calculated fields on top of this and this doesn't work properly with the blank strings. Then I need to re-convert them back to zeroes in the next function.
Thanks for your help
you can create a function that returns a copy of the original array but with all 0 values in the cells as blank then you display it, and each time you need to calculate or update you do it based on/in the original one then you always display the copy
Just use a cell formatter. A mutator will change the data but I don't think you want this - you just want to change the display of the data.
See my Codepen here and take a look at the moneyColFormatter function.
Specifically, in the cell definition:
...
formatter: (cell) => this.moneyColFormatter(cell),
and then implement it somehow
private moneyColFormatter(cell): string {
// If we want to show 0 values as blank:
if (!cell.getValue()) {
return "";
}
return cell.getValue();
}
The Codepen also contains aggregated functions, calculated cols and custom dynamic columns.
this one should be simple for tabulator experts (but not for me)...
i have a tabulator table. I've made one column, "edit" clickable as shown below. it works fine and returns the value of the cell i clicked. HOWEVER, that's not what i need. I need to get the value of ANOTHER cell in the same row (column "transactionID"). I know how you would do it in other languages, just use x and y values to move over 3 columns and get the value. but how is it done in tabulator? by the cloumn name? I can't find any example code on how to accomplish this.
This is the snippet from my tabulator init :
{title:"edit" , name:"edit", formatter:myformatter, cellClick:function(e, cell){alert("cell clicked - " + cell.getValue())}},
i just need to make it return value for "transactionID" instead of "edit"
and before anyone asks, no, i can't just make "transactionID" clickable. I need the clickable cell to be separate.
thanks for your help!
ok so since i got no answers to this question, i slogged thru and figured it out myself eventually. To save others time who run into this in the future, i am posting how i solved it. code with comments below :
// this goes in your tabulator column definitions. In my example, "edit" is a column
with an image button that on clicking, redirects to another page depending on what cell was clicked
{title:"" , name:"edit", formatter:openIcon, headerSort:false, cellClick:function(e, cell){
var re = cell.getRow(cell); // get the row of the cell that was clicked
var thenum = re.getData().id; // gets the value of column "id" in the same row
var theurl = "editTransaction.php?trans="+thenum; // creates my url
console.log(theurl); // perform whatever action you need to do. replace this.
}},
If you are using react-tabulator and you want to access some column data to perform a specific action ,here is the snippet for your help.
import { reactFormatter } from "react-tabulator";
// your React Component to use in a cell
function CustomFormatter(props: any) {
const rowData = props.cell._cell.row.data;
return <a onClick={() => alert(rowData.customField)}{cellData.customField }</a>;
}
const columns = [{ title: 'Custom', field: 'custom', align: 'center', formatter: reactFormatter(<CustomFormatter />) },
]
I use Tabulator component and I need replace regular ellipsis (...) with custom.
Then I want add click event for them. Main idea - user can click on custom ellipsis (or glyph) and for him will be shown modal window with full text and a copy button.
Most browsers don`t support custom string as ellipsis, so I cant use CSS property.
I think I can add some glyph using Tabulator formatter functionality and handle click on this glyph, but in this case I got another problem: "how check text is truncated".
Please give advice with this - custom ellipsis in Tabulator cell.
You would need to use a Custom Formatter to achieve this.
because formatter functions are called before the element is added to the DOM you will need to use the onRendered callback passed into the function to trigger the display of the ellipsis if the cell is overflowing once it is drawn:
//custom formatter
var ellipsisFormatter = function(cell, formatterParams, onRendered){
onRendered(function(){
var element = cell.getElement();
if(element.scrollWidth > element.clientWidth){
//add ellipsis
}else{
//hide ellipsis
}
});
return cell.getValue();
});
//column definition
{title:"Name", field:"name", formatter:ellipsisFormatter},
using GXT 2.1.1
i have a number of FormPanel instances, all with the default FormLayout layout. each form contains a number of TextField instances, with the host form automatically placing a label for each text field. the trouble is that in some cases, label text is quite small, placing a rather large space between a label and it respective text field. in other cases, label text is too large, forcing its contents to wrap. what i would like to do is somehow autosize all the labels to the width of the widest label on that form.
FormLayout does have a setLabelWidth(int pixel) function, but its argument must be in pixels. i was thinking of using TextField.getFieldLabel() to retrieve the label text, yet i do not know how to convert it to pixels.
thank you for your time!
There is no Functionality to autosize textfield label in form panel.but you can set maximum size as follows
FormPanel formPanel = new FormPanel();
formPanel.setBodyBorder(false);
formPanel.setButtonAlign(HorizontalAlignment.CENTER);
FormLayout layout = new FormLayout();
layout.setLabelAlign(LabelAlign.LEFT);
layout.setLabelWidth(200);//Here you can set maximum size of your label
formPanel.setLayout(layout);
don't know if this is really the answer to the question, but i hope that it perhaps helps someone down the road.
i really liked the way GWT's FlexTable behaved with respect to the label resize i was looking for. however, GXT treats GWT's Widget instances as a WidgetComponent, which does not get traversed for nested Field instances when placed in a FormPanel. so my final solution was to extend GXT's FormPanel and overwrite its getFields() and getChildFields() functions, with the latter's logic looking for WidgetComponent instances in addition to Container instances:
for (Component comp : c.getItems()) {
if (comp instanceof Field) {
fields.add((Field<?>) comp);
}
else if (comp instanceof WidgetComponent) {
if (((WidgetComponent) comp).getWidget() instanceof FlexTable) {
// logic to retrieve Field instances from FlexTable
}
}
else if (comp instanceof Container) {
getChildFields((Container<Component>) comp, fields);
}
}
to complement this logic, i also had to extend FlexTable to allow for setting and retrieving Field instances.
I am need of a requirement that in a list, some of the list item should exhibit different style than others. How can this be achieved in lwuit?
For Example,
List menu = new List();
menu.addItem("1. Green");
menu.addItem("2. Red");
menu.addItem("3. Blue");
In this list Each item should have the style of representing its color(i.e) Green should have green Background and Red should have Red Background. Is it possible in LWUIT? How can we achieve this?
Thanks in Advance.
You must create a cell renderer for this use case. Just derive 'DefaultListCellRenderer' e.g.:
DefaultListCellRenderer rend = new DefaultListCellRenderer() {
public Component getCellRendererComponent(Component list, Object model, Object value, int index, boolean isSelected) {
Component c = super.getCellRendererComponent(...);
c.getStyle().setBgTransparency(255);
c.getStyle().setBgColor(theColorYouWant);
return c;
}
};
Then set this renderer to the list. You will probably need some additional refinements here since this is a WAY oversimplified example of a renderer.
This is one way of doing it.
1. Create a component for each item in the list
2. Add the bg color and text to it.
3. Once done, add it to a form or any other custon component you have created.
Other way:
You can create your own List renderer. Here is some information on how you can do it