ui-grid: trigger sorting in custom header template - javascript

I use the following in order to implement custom column headers for my grid:
<div role="columnheader">
<table class="table-header-rotated">
<theader>
<tr>
<th class="op-table-group-heading rotate-45">
<div class="op-table-group-heading-title rotated-container"
ng-class="{inclined : col.headerCellClass}">
<span>{{col.headerCellClass}}</span>
</div>
</th>
</tr>
<tr>
<th class="op-table-asset-heading rotate-45">
<div class="rotated-container colt{{col.uid}}">
<span>{{col.displayName}}</span>
</div>
</th>
</tr>
</theader>
</table>
</div>
However, clicking on this header does not trigger any change to the sorting. A (probably outdated) article in the wiki suggests to use col.sort() in order to do so. However, doing this fails with v2.sort is not a function.
I have looked at the source code for the current default header templates in ui-grid 3. However, I can find no ng-click in it that would trigger the sort event, so I can only assume they are binding their click listeners somehwere else.
How do I go about enabling sorting in my custom template?

Alright, so after dissecting the original template, it seems that the one crucial component needed to trigger sorts when clicking the header is ui-grid-cell-contents class. Thus, the minimum header template that can be used for sorting is simply <div class="ui-grid-cell-contents"></div>

Related

How can I add a tooltip/popover to table data using Angular2 and Bootstrap?

Please bear with me if I sound a little inexperienced (I am), but I'm currently trying to add a tooltip or a popover (either one, doesn't matter) to a td using Angular2 and Bootstrap to ultimately get rid of an unnecessary column. I would like the popover or tooltip to open on hover rather than on click. I've tried installing the ng2-popover module via nodejs as was recommended on another post on here, but to no avail. Here's a simplified version of the beginning of my table:
<table class="table table-striped table-bordered table-hover">
<tbody><tr>
<th>Table Name</th>
<th> Max As Of Date </th>
<th> Row Count for Date</th>
<th> Comments </th><th>
<td> Table Data </td>
The original guy who recommended to someone else to use the ng2-popover module rather than JQuery suggested the following:
<span popover="content to be shown in the popover">
element on which this popover is applied.
</span>
However that didn't work for me when I put a td in there. Thank you in advance if you have any clue how to do this!
You can use the
angular's bootstrap: https://angular-ui.github.io/bootstrap/#/tooltip
already has tooltip feature adapted for angular.
<div class="form-group" ng-class="{'has-error' : !inputModel}">
<label>Disable tooltips conditionally:</label>
<input type="text" ng-model="inputModel" class="form-control"
placeholder="Hover over this for a tooltip until this is filled"
uib-tooltip="Enter something in this input field to disable this tooltip"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
</div>
Just adding the directive like:
uib-tooltip: text to display
tooltip-placement: place or where will the text will be positioned
tooltip-trigger: what will make the text appears (can be any event)
Here an example

Stripes: In jsp page html table pagination

I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).

Avoid unnecessary evaluation of bound values in Angular.js

Have an angular.js directive that renders as a table. Most of the time, the table is small, so performance is not an issue.
But sometimes, the table has many rows (e.g. thousands), so rendering every row is expensive, as each bound value appears to be evaluated twice, and there are a lot of bound values. And Angular seems to evaluate this table a lot, only to find that all of the values in it are unchanged and thus need not be rerendered, paralyzing the application needlessly.
For instance, the entire table appears to be re-revaluated when the value of $scope.showMenu changes on mouseenter / mouseleave.
Is there a way to tell Angular that the entire table is dependent on some other value, say, $scope.checksum thus if that doesn't change, then the entire table doesn't change?
<div class="header" ng-mouseenter="showMenu=true" ng-mouseleave="showMenu=false">
<!-- show dropdown menu only when hovering over the header -->
<span ng-if="showMenu" class="menu dropdown" > ... menu content goes here...</span>
<h2>{{getTitle()}}</h2>
<p>{{description}}</p>
</div>
<table>
<tr ng-repeat="key in rowKeys">
<td title="{{getRowItem(key)|pretty">{{getRowItem(key)|abbreviated}}</td>
<td>{{getRowValue(key)|number</td>
</tr>
enter code here
</tr>
</table>
If you're using Angular 1.3 and the data in your table is not updated in other moment you must try bind once.
<tr ng-repeat="key in ::rowKeys">
<td>{{::key}}</td>
</tr>
Also ng-mouseenter and ng-mouseleave generate more $watchers, I recommend you use CSS rules to make this effect in your menu.

dojox DataGrid not displaying

I have a contentPane/tabContainer declared in html markup. The 3rd tab holds a dojox.grid.DataGrid, which is hidden by default.
After findTask.execute, the dataStore is set and dojox.grid.DataGrid is filled, but I can't get it to display.
here's a jsfiddle:
http://jsfiddle.net/dbecker88/BhNEa/2/
At the bottom of the html markup, if you remove the "searchStatus" div and re-run the jsfiddle, the results display fine.
Any advice?
Thanks!
Reason is, that the ContentPane layout container evaluates if there's a single child - or multiple. It handles sizing differently - and will know if 'isSingleChild' and child == widget. If it reckognizes a widget, it calls its resize function.
To go abouts this, you need to call resize manually - with the dimensions of the ContentPane which houses your grid. Here's one way, via markup
<div id="searchCol" dojoType="dijit.layout.ContentPane" title="Find Results">
<script event="onShow" type="dojo/connect">
// onShow connect is 1 ms too early to connect, adding 'whenIdle'
setTimeout(function() {
dijit.byId('grid').resize(
dojo.getMarginBox('searchCol')
);
},1);
</script>
<!--REMOVE the searchStatus element and the dataGrid displays? -->
<div id="searchStatus"></div>
<!--REMOVE the searchStatus element and the dataGrid displays? -->
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="PARCELID">Parcel ID</th>
<th field="OWNERNME1" >Owner 1</th>
<th field="OWNERNME2">Owner 2</th>
<th field="RESYRBLT ">Year Built</th>
<th field="SITEADDRESS" width="100%">Address</th>
</tr>
</thead>
</table>
<button id="clearSearch" dojoType="dijit.form.Button" type="button" onclick="clearSearchResults()" title="Clear Search Results" label="Clear Results"
iconClass="clearSearchBtn" style="position:absolute; bottom:7px;cursor:pointer; visibility:hidden"></button>
</div>
Off course, this will consume the full size and leave out nothing for button and searchstatus. You would need a calculation to do that. Something similar to:
var size = dojo.getMarginBox('searchCol');
size.h = size.h
- dojo.getMarginBox(dojo.byId('searchStatus')).h
- dojo.getMarginBox(dojo.byId('clearSearch')).h;
dijit.byId('grid').resize(size);

Tablesaw in AngularJS

I've been trying to use filamentgroup's tablesaw ( https://github.com/filamentgroup/tablesaw ) in angularJS (I really love this feature filled table), but i have no idea how to start. Many articles seems to point towards using AngularJS's directives in converting existing JQuery plugins to Angular's Directives. Does that mean for every JQuery tag i'm using from Tablesaw, i have to rewrite the entire JQuery function from Tablesaw over to Angular?
Understanding that Angular wants us to avoid DOM manipulation from JQuery, and to rethink how we develop our apps. However, it doesn't make sense to forego hundreds of well done JQuery libraries available online and just waste time and effort to rewrite libraries to work in the way Angular wants.
Really appreciate anyone to kickstart me with JQuery TableSaw and Angular. Thanks in advance!
I got tablesaw to work for a table where the rows are generated by ng-repeat with the following directive:
app.directive("tableSaw", ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function($scope, element, attr) {
if($scope.$last === true) {
$timeout(function () {
$(document).trigger("enhance.tablesaw");
});
}
} // end link
};
}]);
The key being the call to tablesaw only works after the complete table has been rendered, this is why I am applying the directive row-wise, so it can initiate tablesaw only after the final row has been rendered.
Here's my table (note the table-saw directive applied alongside ngRepeat):
<div id="myContainer" ng-controller="AdminUserListCtrl as vm">
<table id="myTable"
class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<thead class='study-list-header'>
<tr>
<th scope="col" data-tablesaw-sortable-col>
Name
</th>
<th scope="col" data-tablesaw-sortable-col>
Email
</th>
</tr>
</thead>
<tbody id="studyListData">
<tr class="study-list-row"
ng-repeat="elem in vm.usersList"
table-saw>
<td>{{elem.last_name}}, {{elem.first_name}}</td>
<td>
{{elem.email}}
</td>
</tr>
</tbody>
</table>
</div>
My includes are:
require('jquery');
require('../../node_modules/tablesaw/dist/tablesaw.css');
require('../../node_modules/tablesaw/dist/tablesaw.jquery.js');
I do not include tablesaw-init.js (it results in an error and should be absent in the case of manual initialization as specified in their docs).
A note on the call to $(document). The docs in the tablesaw git page specify that for manual initialization of tablesaw on an element we should call trigger("enhance.tablesaw") on any parent element and tablesaw will scan the tree and enable itself on all child elements that have the correct tablesaw markup. It is up to you if you want to call it on $document or perhaps on some kind of predefined parent element.

Categories