I am trying to develop a ersi map javascript page.
I am creating
var myData = { items: myItems };
var myStore = new dojo.data.ItemFileReadStore({ data: myData });
These create correctly and have the correct data in
I have a problem updating a dojox.grid.DataGrid with the myGrid.setStore(myStore);
The code I have for the grid is:
<table dojotype="dojox.grid.DataGrid" jsid="myGrid" noDataMessage="No results found in the current map extent" style="width:100%;height:100%;" selectionMode="none">
<thead>
<tr>
<th field="NAME" width=75%>Neighborhood</th>
<th field="ownPct" width=25%>% Own</th>
</tr>
</thead>
</table>
This table in nested in a number of divs in the HTML.
I suspect that when I run myGrid.setStore(myStore); it cannot find the table in the DOM.
If I move the table to be out of any DIV's and have it directly after the <body> tag (see link). the code will work and populate the table. If I move the table to the end of the HTML just before the </body> tag it will work (see link). But when I put the table in the nested Divs then it will not populate (see link). this should be on the policy tab!!
I hope i make sense, this has been driving me crazy
thanks in advance Paul
I think the problem is not with setStore, but one or two other things.
When the DataGrid is instantiated, it attempts to detect the space available (to determine how many rows to render etc). You've told it to be 100% of its parent div, but remember that divs have height 0px by default!
So, you can try to give the grid (or gridDiv) an explicit height. However, the grid is also in an inactive tab so it still detects it has no height (it's invisible, after all!).
So, next you can try to set the grid's tab as the active one (i.e. <div class="tab-pane active" id="policies">). That should give you a rendered grid when the page loads.
Alas, you don't want the grid's tab to be the active one. So the final solution is that you need to explicitly tell the grid to recalculate its height (myGrid.resize()) when the policy tab is being activated. I haven't used bootstrap's tabs, so I don't know exactly how to do that - perhaps you do?
Related
So I have a table with 50 columns and about 4-600 rows and laggy poor performance. There are some computed properties in use. The tables cells are inputs, selects and textareas.
I use the vue-scrolling-table, because I need vertical and horizontal scrolling, and fixed first column. But the performance is really bad.
I also have the same setup, somewhere else is the app, but it doesn't have the same performance issues.
I already tried to use a virtual list, but I could'nt get it working with the vue-scrolling-table/ (the header didn't follow the scrolling, and the vertical scroller was only available if I scroll to the bottom)
I also looked at virtual scroller but it recomanded not to use with inputs and such, since it is replacing the data inside the input, and that would trigger the change event etc.
I have a v-for, that goes through the data, and one v-for inside, for a subset in the columns. (I can't be sure how many columns there will be.)
<template slot="tbody">
<tr v-for="(row,index) in table" :key="index">
<td>
<input v-model="table[index].someItem">
</td>
<td>
<select v-model="listyThing">
<option v-for="item in list">{{item}}<option>
</select>
</td>
...
# I have some computed stuff ,(like 4)
SomeComputedFunction: function() {
return this.table.map((row) => {
return row.some * row.somethingelse
})
}
This should work fine. The data I'm working with is not that big, that it should cause problems. I try to do anything in this, and the cpu spins up to 100% and everything happens with 2s delays.
Also one interesting thing I found, the selects open in like 3 secs. I thought that was curious.
When I used the virtual list the performance was better, but I need some other solution for the table.
Does anyone have an idea what is the difference between this, and my other one which works just fine (more data and more computed properties actually)
So what I think the difference can be is the selects and the v-for rendered columns (about 20 of them rendered this way). Or maybe the textareas?
Thanks in advance!
I'm building a basic grid component with Angular 6. The grid itself is a <table>, with a <thead> for the header and a <tbody> section, where there are multiple rows. Each row has a fixed first column (which has de ID of the row), a dynamic number of 'positions' and a fixed last column (which holds an action combo button). Each of the positions contain a list of objects, dragged from an external tree component. All the rows, the positions and the list of objects inside them are generated from a DB, and displayed using *ngFor in the component template.
To make it clear, here's an schema of the grid:
The grid is built in this way:
<table #mainGrid>
<thead>
[...]
</thead>
<tbody (contextmenu)="showContextMenu($event)">
<tr *ngFor="let row of objectGrid; let i=index">
<td>{{ i }}</td>
<td *ngFor="let position of row.positions">
<ul class="object--list">
<li class="object--list--item" *ngFor="let object of position.objects">
{{ object.name}}
</li>
</ul>
</td>
<td><!-- CODE FOR THE ACTION BUTTON --></td>
</tr>
</tbody>
</table>
Each object has several actions associated to it (f.i. 'Delete', 'Locate in tree', 'Edit', etc) that must be chosen using the right button of the mouse. I'd like to avoid attaching an event handler to each object because sometimes the grid will contain more than 700 objects, so my idea is to attach only 1 contextmenu handler to the <tbody> (to disable right clicking on the table header) and use logic to find out the object where the user right clicked.
So far, I can use the event path property to identify the row, cell and the object (li element) where the right click occured. But now I'd like to know an elegant way of associating univocally the clicked li element to the position of the array that generated it.
For example, if I right click on the object 'Object 1.4.2', I'd like to get the reference to this.objectGrid[0].positions[3].objects[1].
Any suggestions? Thanks!
I couldn't find a safe way of doing it, so I've ended up adding the event handler to each of the objects that need it. So far, the performance for a grid with 500+ elements is pretty good, but I'm studying how to implement a virtualization to the grid component to load only the rows displayed on screen.
So this one is baffling me and I'm hoping someone has encountered it. I've checked this site for answers but haven't found the correct answer.
I'm using Bootstrap 3.1.0, and I have a page that has tabbed content, each of which is holding dynamically generated tables. Within those tables, I have dynamically generated content that has a link - and on this link, I am attempting to generate a tooltip.
This makes the structure of the element as such:
-A Tab
--A Table
---A Row (tr)
----A Cell (td)
-----A link (a data-toggle="tooltip" id="{dynamically generated based on content}" class="specificClassName")
I've put the scripts before the closing body tag.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
});
I'd link all of the code but it's dynamically generated so I am not sure it would make sense. Ideally, I would like the tooltip to be placed to the right of the link, but I thought perhaps it was attaching itself to the wrong element as a "parent" and not showing up as a result, which is why I changed the placement to top.
Note: I've also tried the class name instead of data-toggle=tooltip, but this did not produce any different results.
The rest of the bootstrap items work- the tab functions correctly, the tables show up as desired. The tooltips are the only item that isn't functioning as intended.
Short Answer: I can't do what I'm trying to do. Or I could, but it's a bad idea. So I'm going to just write custom JS.
Long(er) answer: You have to include a title in a bootstrap tooltip, but the title is the tooltip content. My tooltip content is a dynamically generated div and div content, and I don't want that to be the value of the title property.
I gave up on trying to get my previous attempts to work properly on fixed header on scrollable tables, and I resorted to this plugin:
http://mkoryak.github.io/floatThead/
Our web interface at my work displays tables for this particular view in two ways -- with tabs or just the table outright.
Here's the structure WITH tabs:
<div class="tab-content">
<div class="tab-pane active" id="tab1">
... a couple stuff
<table id='resizable118' cellpadding='5' cellspacing='0' border='0' Width='75%' leftmargin='50' >
... stuff in the table every row has font size of 3 but that's it
</table>
</div>
</div>
Here's the structure without tabs:
<table id='resizable118' cellpadding='5' cellspacing='0' border='0' Width='75%' leftmargin='50' >
... stuff in the table every row has font size of 3 but that's it
</table>
As you can see, the tables are generated exactly the same way for both. The ONLY differences are the two <div> elements enclosing the table for the tabbed view.
The plugin instructs to wrap the table in something like a div element. When I wrap the table with a div element when tabs are NOT used and then activate the plugin, everything turns out ok.
Problem: Regardless of whether I wrap the table with a new div element or use one of the existing <div> elements when USING TABBED VIEW, the table breaks.
The table header and body get squished horizontally and then none of the columns will line up afterwards. When I destroy the plugin use, everything returns to normal.
Has anyone seen this before with jQuery floatThead? What can I do to address the issue with the tabbed table view?
from documentation (http://mkoryak.github.io/floatThead/) there is a "reflow" method,
so, add onclick event to the tab which containing that table,
onclick="$table.floatThead('reflow');"
i made in this way works :)
This is the problem page I'm developing.
Consider the leftmost column header, with header text "Undr." Here is the simplified html for that column header:
<th class="underlying" onclick="toggleColSelect(this);">
<img class='ad' onclick="toggleColSortOrder(this);">
Undr
</th>
The user can do two things in the column header:
select and deselect the column, by clicking the column header. EDIT: The column is selected when the column header has a yellow background; and unselected when the column header has a white background.
select ascending or descending sort on the column contents, by clicking the up/down-arrow image.
However, clicking the image also selects/deselects the column, which I don't want. When he clicks the image, I want to toggle the sort order only; I don't want to toggle the select on the column.
My JavaScript function toggleColSortOrder(); does indeed toggle only the sort order; but it seems the function to select the column also gets called (wrongly) when the user clicks the image.
What I've tried: thinking this might somehow be a manifestation of bubble-up at work, I tried all combinations of returning true, false and nothing in each of the two functions. None of this had any effect. I'd like to avoid hacking the JavaScript any further.
Question: how, by changing my html or css, can I prevent the function toggleColSelect(); being called when the user clicks inside the up/down-arrow image?
Your can cancel event-bubbling by adding
event.cancelBubble = true;
to your functions. See this fiddle: http://jsfiddle.net/fcyCz/
Here is my theory, since your <img> tag is INSIDE your <th> tag, you cannot click the <img> without first 'clicking' through the <th>. If there was a way to un-nest these two tags, I would then assume that their functions would be called separately. Possibly using a <div> to align your <img> over the correct spot. I am going to try to do live adjusting of what I just said using firebug and see (if it doesnt break the javascript) if it works, and I will report back.
Good luck.
As Tomalak points out, the click event for the <img> is bubbling up to the parent <th>, and so you must specify otherwise in your function. Also, add a call to event.stopPropagation() for the browsers which have deprecated cancelBubble.