dojox DataGrid not displaying - javascript

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);

Related

How to open another page in pop up modal on click of hyperlink

I have a page one.html that contains a hyperlink
<a href="#">Open second page<a/>
When this link is clicked I want to open second.html in a pop up modal.
My second page contains a simple table which I want to show, like:
<html>
<div class="table-responsive-md">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>adidas</td>
<td>one of the top sport brand.</td>
</tr>
</tbody>
</table>
</div>
</html>
If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.
But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.

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

ui-grid: trigger sorting in custom header template

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>

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).

Bootstrap CSS table-striped not working with knockout if binding

Let's say I have the following table that works with bootstrap css and knockout:
<table style="cursor:pointer;" class="table table-striped table-bordered table-hover table-condensed">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
</tr>
<tr data-bind="if: somecondition">
<td>test</td>
</tr>
</tbody>
</table>
Now if I set "somecondition" to return "true", I can see the result table has the zebra striping. Everything is fine. But if I change the condition to "false", obviously the row disappears from the screen, but I don't see any alternating row color at all. Anybody knows why and how I can make the alternating row color shown?
The problem is that the Knockout if binding doesn't control whether the element it's on will exist or not, just whether that element's content will exist or not. (This isn't as clear from the documentation as it might be, but it is there, mostly in the "Note: Using “if” without a container element" bit). So the if in your example will control whether the content of the tr is present, but the tr will be there regardless, giving you a tr with absolutely nothing in it, which counts as part of the :nth-child work that the Bootstrap striping does but not occupying any vertical space. (You can see this by rendering the page, then right-clicking the table and using "Inspect element" in any modern browser to look at what's actually in the DOM.)
To make the entire row exist/not exist based on the condition, wrap the row with a KO virtual element:
<!-- ko: if: somecondition -->
<tr>
<td>test</td>
</tr>
<!-- /ko -->
Example of your original code, not striping correctly: http://jsbin.com/tupusemu/1
Example using a virtual element, striping correctly: http://jsbin.com/tupusemu/2
Just simply remove tbody tag from your table it will smoothly work..

Categories