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},
I'm using tabulator (fantastic thing), which has a built in, in line editing functionality.
The thing is though, it's either on or off by having the editor tag on a column basis.
You can disable the editor for a given cell as well.
What I'm trying to do is to have the table displayed as read only so to say.
Then click on a 'edit' button (which is in my table and I capture the click). That would in turn enable the inline, built-in editor functionality for that raw only.
Then I click a save button, write the updated data back to my DB and make the row read-only again.
So, with tabulator 4.2, I'd be looking for something like
var usrtable = new Tabulator("#usrtable", {
ajaxURL:"/account/cgi-bin/getallusers.php",
resizableColumns:false,
tooltips:true,
history:true,
pagination:"local",
paginationSize:10,
paginationSizeSelector:true,
reactiveData:true,
selectable:true,
initialSort:[{column:"username", dir:"asc"},],
columns:[
{ formatter: editIcon, width: 40, sortable: false, align: "center", cellClick: function (e, cell) {
var id = cell.getRow().getData().id;
row(id).editable=true;
/\/\/\/\/\/\/\/\/\/\/\
}
},
{title:"Id", field:"id", visible:false},
{title:"Username", field:"username", width:80, editor:"input"},
{title:"Password", field:"password", width:70, editor:"input"},
{title:"Role", field:"role", width:70, align:"center", formatter:"plaintext", editor:"select", editorParams:{values:["user","admin"]}},
{title:"Change passwd", field:"changepasswd", width:90, align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
],
});
Is that somehow possible or do I have to re-invent the wheel? i.e. create a model to edit the data outside the table?
What I have tried.....
Once rendered, a cell looks like this:
<div class="tabulator-cell" role="gridcell" tabulator-field="username" tabindex="0" title="test" style="width: 80px; height: 29px;">test</div>
And when you click on the cell, it becomes editable and the class 'tabulator-editing' is added to the div.
So..... I though I could 'just' catch the click event and do something like this:
$(".tabulator-cell").on("click",function(){
($this).removeClass("tabulator-editing");
});
that didn't work so tried this:
$(".tabulator-cell").on("click",function(e){
e.preventDefault();
});
that didn't work either.
When doing this:
$(".tabulator-cell").on("click",function(){
alert("cell clicked");
});
it actually never fires... :-(
Either I'm doing something wrong or really do not know where to go from here....
This can be achieved with Tabulator's Optional Editing:
// column definition
{ title:"Name", field:"name", editor:"input", editable:editCheck }
var editCheck = function (cell) {
var isEditable = cell.getRow().getElement().classList.contains('isEditable');
return isEditable;
}
With this logic in place, you simply need to toggle isEditable class on the appropriate Tabulator Row.
In the documentation under Column Setup, there is a Data Manipulation option called editable.
http://tabulator.info/docs/4.2/columns#definition
editable - callback to check if the cell is editable (see Manipulating Data for more details)
I haven't experimented with it myself, but it appears as if this is only called when initially rendering the table, so you may have to force a re-render with table.redraw(true) when the user clicks the Edit and Save buttons.
You could also just use your cellClick event and call cell.edit().
So, I also got feedback from Oli who is the developer for Tabulator.
The short answer is that there is no option to enable editing at the row lever as I feared.
Furthermore, the option will not be added due to multiple factors.
In other words, what I'm trying to do is not available out of the box and the editing is to be done at the cell level.
There is no option for this in the tabulator. But if you want to disable a cell from editing, you can simply remove all the tabulator applied classes for the particular cell. For eg., if you want to make the last row edit disabled, you can use something like this,
$(".tabulator-row:last .tabulator-cell").removeAttr("role tabulator-field tabindex title");
I know this is a old question but my answer can be useful for visitors come here (like me) in future..
We have also a similar requirements, and we ended up by this solution. We have added "editor" in every column with another attribute "editable". In "editable", we are checking whether the row is selected or not, if row is selected then field can be editable otherwise not editable.
Other than that we have also used a "rowSelected" and "rowDeselected" to show/hide save button and on "rowSelected", we are checking that only 1 row is selected at a time.
If I have a parent-child-dimension, whose data I show in the IcCube/PivotTable and I want to show the leaves only (with descendants([categories].[categories].[All-M],,leaves)), those leaves are shown hierarchically. So a level5 leave of one category is suddenly the parent of a level6 leave of the next category.
Is there a way to "flatten" this tree, so that those leaves are all shown on one level and not sorted in the tree wrongly?
EDIT:
Here is a query:
SELECT
NON EMPTY { [Measures].[group_quality] } ON COLUMNS,
NON EMPTY { TopCount(descendants([categories].[categories].[Level$0].[Portal],,leaves),30,[Measures].[revenue_potential]) } ON ROWS
FROM [Cube]
All categories in the picture are leaves, so none of them has any children.
As workaround for that case you can use simple CSS dirty-hack.
1) First of all under Widget option tab of your widget you should set Hide icons to yes.
2) After this, to avoid collision with other Pivot Tables, add custom CSS class
3) Add these styles to Report CSS.
.pt-flattened .pt-hcont{
margin-left: 0 !important
}
I'm working with liferay portal 6.2. And I want to get the value of the text in a tag with alloy user interface.
exemple:
<div>
<p> Paragraph </p>
"value"
</div>
the desired result is: value
please help.
AlloyUI, being an extension of YUI3, uses get/set methods to access and manipulate the properties/attributes of the object (YUI3 Node / AlloyUI Node) that is returned when looking up elements from the page.
Some examples can be reviewed in this documentation as well as this documentation.
In general you'll need something unique (i.e. id, css class) to the div in order to fetch only that element. Once you have that element, divNode.get('text') will give you all of the text within the element. There is not a means to easily "skip" the paragraph contents within the div without the value being contained within some other markup. If you have control over the markup and can do this, that would be the best option. Otherwise you are left to using the replace function to strip out the paragraph contents from the text.
<script>
AUI().use('aui-base', function(A) {
var paragraphText = A.one('#myDiv>p').get('text');
var divText = A.one('#myDiv').get('text')
var onlyValue = divText.replace(paragraphText, "").trim()
console.log(onlyValue)
})
</script>
I am using Pentaho cde 4.8
I need to show Sparkline and Arrow in my Table component, I am using pagination in my table component.
My sparkline and arrow chart is visible While dashboard is loaded at first. Table component will show 10 rows per page and it will show all the charts as per my column type.
The problem occurs here, if I try to navigate to second page using pagination in my table then the charts are not shown and it will only show the values in the column. the same happens during when I use search bar in my Table component.
This is code I use in preexecution:
function f(){
this.setAddInOptions("colType","trendArrow",function(state){
return {
includeValue: true,
good: function(state) { if(state.value<=100) return false; else return true;}
};
});
}
I can see sparkline and trend arrow during 1st load like below:
After page navigation, it becomes like this
Avinash,
Try using Draw function.
The same code of preexecution is to be copied in Draw function.
If you need to read API details: https://datatables.net/reference/api/draw%28%29