Timeline getting data from database - json

Timeglider is a timeline project.
Timeglider is a jQuery plugin for displaying any number of events in a highly-flexible timeline.
One of the easiest way for fetching and reading data is using a TABLE.
this TABLE is a HTML TABLE that have a specific properties
for example we should create table with its data in SQL.
I use the objects like GRIDVIEW or (TABLE and panel) but these are not have those tags.
please help me
may i use json datasource? but i dont know how?
but with table it is easier.
Timeglider timelines can load directly from data you provide in an
HTML table.
may i use with response.write ? or another proposed way?
or add hese line to table. (i know only gridview have property header) but table doesnt??!!!!
please help me.
<!-- The first row of the table is reserved for meta-data.
Class values below are *critical* for mapping out data from the
<td> elements that follow --- though order is not important.
The text in <td> elements is *not* critical: just the class names.
-->
<tr>
<th class="tg-startdate">start date</th>
<th class="tg-enddate">end date</th>
<th class="tg-title">title</th>
<th class="tg-description">description</th>
<th class="tg-icon">icon</th>
<th class="tg-importance">importance</th>
<th class="tg-link">link</th>
</tr>

i solve it by creating my desired HTML code and with
Response.Write();
fire it in the output
and Timeglider is also work good

Related

Visualforce / Apex: Access two objects with one controller

I'm forcing the problem that I have to set up a visualforce page rendered as pdf, which outputs a automatically generated invoice. Because of intern workflows this page has to be set up to the Opportunity object.
Most of the fields used are taken from the Opportunity object itself and work fine.
But I also need access to the OpportunityLineItem fields to display the products on the invoice.
How can this be realized? Do I have to write a controller extension in apex or is it possible without?
As an alternative, would this eventually be possible with cross formula fields referring from Opportunity to OpportunityLineItem? I tried this, but could not find any possibility to select OpportunityLineItem in a formula field in the Opportunity object.
Any help is much appreciated. Thanks!!
Below is a sample page accessing the OpportunityLineItems for a given Opportunity using the standard controller ammended from this doc reference.
<apex:page standardController="Opportunity">
<table border="0" >
<tr>
<th>Description</th><th>Quantity</th>
<th>Unit Price</th><th>Name</th>
</tr>
<apex:repeat var="oli" value="{!Opportunity.OpportunityLineItems}">
<tr>
<td>{!oli.Description}</td>
<td>{!oli.quantity}</td>
<td>{!oli.unitprice}</td>
<td>{!oli.Name}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
With respect to formula fields, you cannot access child fields in a formula on the parent for the simple reason that it is a one to many relationship. The parent Opportunity would not know which of the children to lookup to.
The best you can do is make a regular (text or whatever) field, run a Process Builder triggered by a change to the relevant field(s) on the parent (opportunity) and trigger a Flow to loop over the children (LineItems) and make the changes to the parent based on some condition you specify.

HTML/Bootstrap Table Sorting and Sort Direction Indicator

I am using bootstrap to display and sort a table. I was wondering how/if I could implement a temporary arrow(or something) in each header in the table to indicate which direction it is being sorted.
Yes this is possible. For the header, add the following...
<table>
<thead>
<tr>
<th>Column 1 <span class="glyphicon glyphicon-sort"></th>
...
</tr>
</thead>
</table>
EDIT: I assume you actually want the icon to sort the table, as well.
This is dynamic behavior, so you won't be able to do this in pure HTML/CSS: you will need to use JavaScript. Here are the general steps that you would do to make this happen:
Store all of the table rows inside of a JavaScript variable
Inside the <th>, place another element, like a <span> or <img> that contains your arrow image.
Attach a click handler to the arrow, that sorts the array of table rows
After the array is sorted, use DOM API functions to remove the old table, create a new table, and then insert a new table in its place. Bootstrap usually is used with jQuery, so you can look at some jQuery functions to remove the table, build a new one (by going through the rows), and then render the built table to the page, in place of the old one.
There are a variety of libraries that do this, but you can accomplish it more simply by doing it yourself.

Creating a dynamic table In HTML and AngularJS from contents of a Javascript array

I need help creating a dynamic table in the format of a round robin competition using HTML and AngularJS. An array of strings will be given and then the table will be created based on how many names were in the list so part of the table will be generated dynamically and part of the table will always be the same. This is an example of a table that would be generated if I passed an array with 8 names. Only columns A, B, and C should have any information when the table is generated though I kept everything blank for simplicity's sake. The rest of the boxes should all be text input fields.
Until now most of the tables I have done have been pretty simple and I am a little out of my depth here, any help would be much appreciated.
Assuming you always have a full 8 teams this would get you started
<table>
<tr>
<th>club</th>
<th>team</th>
<th>#</th>
<th ng-repeat="item in items">{{$index+1}}</th>
<th>V</th>
<th>TS</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.club}}</td>
<td>{{item.team}}</td>
<td>{{item.rank}}</td>
<td ng-repeat="item in items" ng-class="{black:$index==$parent.$index}"></td>
<td><input ng-model="item.v"></td>
<td><input ng-model="item.ts"></td>
</tr>
</table>
DEMO
This is a really nice example of using nested ng-repeat elements.
Please see this plunker for a working demo.
The main trick for detecting when to black out a box is to use ng-init="$rowIndex=$index" on the outer ng-repeat (where we generate a row for each entry). This allows the inner ng-repeat (where we generate a column for each entry) to have an ng-class="{'blackout': $index==$rowIndex}"

Parameters and Loops in snippets

I would like to make a snippet that makes an HTML table.
Here are some examples of things to type :
table name address city
- table team wins losses draws
- table views clicks clickthrough
This is what I want it to output : a table with a columns for each of the fields (with 'table' triggering the snippet).
I'd also like to run these field names through a function to transform them (for example to field names - "First Name" -> 'first_name'.
Is this possible? How would I do it?
Not exactly what you want, but I would go with Emmet (here is a handy cheet sheet). There is a Sublime package available, so it's easy to install. It might be a little overwhelming at first, but once you start to use it, you will get the hang of it and it will speed up your html/css production.
Type table>tr*3>th and hit tab at the end. This will produce:
<table>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
</table>
Then you can tab to the ths to type in your column headers.

Updating Table dynamically - Ajax HTML

I am trying to update the table as new records come in for table below:
I have got the part where I need to get live information using Ajax. I am using the <tr id = {$university}> as ids to create new rows or update existing. But the updating doesn't seem to work. i.e. If a new student entry is made for University A, than adding a new HTML code. So my existing HTML code looks like
<tr id = "A">
<td>A</td>
<td>Mr. X</td>
<td>a#b.com</td>
</tr>
<tr id = "A">
<td></td>
<td>Mr. Y</td>
<td>e#f.com</td>
</tr>
<tr id = "A">
<td></td>
<td>Mr. S</td>
<td>u#i.com</td>
</tr>
and when I add new data using same <tr id = "A">, it does not append information, but creates a new row:
<tr id = "A">
<td>A</td>
<td>Mr. Z</td>
<td>t#t.com</td>
</tr>
will not append information but create another row in UI. How can I append new information to existing rows?
Added the js code: http://pastebin.com/4tjyUgZa
IDs in HTML are meant to be unique, you shouldn't be duplicating them. Try using a class instead, like <tr class="a">.
I also think you need to revisit your table structure. It looks like what you need are multiple tables, such as table "a" and table "b" that you can then append rows to. The way you are manipulating the table rows just isn't how they're built to work. If you had something like <table id="a"> and <table id="b"> you could then simply target those and add rows easily.
You may also want to make use of a JavaScript framework such as jQuery. It will make manipulating the table much easier and you will be able to write the code much faster.