I used dir-paginate for the first time in angularJS and it was very easy to have a pagination that works as desired... Until I noticed a small problem.
The items are now correctly paginated, when I go in the details of an Item (a row) I have a button "back" that should bring me on the page where the item was.
For example, if I am on page 4 and click on any item, I go to a page with its details, then I want to create a button "back" that should bring the user to page 4.
The code of my table is quite easy, I just used dir-paginate on the item list and added at the end of the page.
On the button I wanted to create, I tried to use setCurrent(4) - for now using a fix number, but nothing happens. I suppose because detail page is in a totally different page and the pagination is not visible from there.
I just had to change my table into something like this:
<table class="mytable">
<thead>
<tr> headers th..</tr>
</thead>
<tbody>
<tr dir-paginate="record in filteredData = (data | itemsPerPage: 20)"> columns... </tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
how could I go directly to page X of such table?
Related
I am getting stuck in horizontal table(apex) which I need to share inside the email template.Table structure would be like below:
Html Table
Earlier, I am giving space between them by using ensp; or nbsp; but whenever the data is filling out in these fields, their alignment is not coming correctly.So that I need table instead of using these ( or )
I'm going to make a couple of assumptions here. If these assumptions are wrong, you're kind of SOL.
that you're using a Visualforce Email template
that your comfortable writing both the visualforce and the apex controller
You're aware of how to get a handle on the necessary objects and fields you want to display
If those three things are true, this is actually just an example of how weird visualforce can be.
Visualforce allows you to mix in regular HTML, so the HTML for a table like your image would look something like this:
<table>
<tbody>
<tr>
<td colspan="2">OpportunityNameVar</td>
</tr>
<tr>
<td>AccountNameVar</td>
<td>Opp Type</td>
</tr>
<tr>
<td>Phone</td>
<td>CloseDate</td>
</tr>
</tbody>
</table>
Sorry if my subject doesn't make sense, but what I am trying to do is create a custom component that displays a table of visits relative to a lead. This table displays the following:
Visit ID
Duration
Page Views
Browser
This list is displayed on a tab
on the leads (sales insights) form.
What I would like to do is create a link on Visit ID column, that when clicked, takes you to the form related to that Id. This would operate similar to that of a default table that you can create in the editor (like shown below), however it would be coded in a PCF.
Example table
For example, clicking on the columns of a record with the id 2ec06197-31ec-ea11-a817-000d3a1b14a2 would take you to:
https://{organisation name}/main.aspx?appid={app id}&pagetype=entityrecord&etn=visit&id=2ec06197-31ec-ea11-a817-000d3a1b14a2
Here is my code for creating the table
<table className="table table-striped">
<thead>
<tr>
<th scope="col">Visit Id</th>
<th scope="col">Duration</th>
<th scope="col">Page Views</th>
<th scope="col">Browser</th>
</tr>
</thead>
{/* <!-- Table Contents --> */}
<tbody id="table-contents">
{
this.props.visits.map((visit: IVisit) => {
return (
<tr key={visit.id}>
<td>{visit.id}</td>
<td>{visit.duration}</td>
<td>{visit.views}</td>
<td>{visit.browser}</td>
</tr>
);
})
}
</tbody>
</table>
Is this possible?
if you are using dynamics 365 subgid (out of the box), you can use openform or navigateto function of dynamics 365 client api
Here is an article explaning exactly what you wish to achieve
But I see you tagged reactjs, I believe you wish to create you own subgrid, you can definitely do so. For that you should try PowerApps component framework (PCF). Now there is community which already contains different subgrids created by community users. Take a look at pcfgallery especially subgid from pcf this shall be very helpful
I followed all the steps described in the docs, I installed smart-table via bower, then I ref the script at index.html, then I added the module to one of my sub-modules, and I created my table:
<table st-table="vm.product_conditions" class="table">
<thead>
<tr>
<th st-sort="name">Nombre</th>
<th st-sort="description">Descripcion</th>
<th st-sort="status">Estado</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="condition in vm.product_conditions track by condition.id"
ng-click="vm.detailProductCondition(condition.id, condition.name)">
<td>{{ condition.name }}</td>
<td>{{ condition.description }}</td>
<td>{{ condition.status ? 'Activa' : 'Inactiva' }}</td>
</tr>
</tbody>
</table>
The table gets populated, but whenever I click on the column in order to sort it, the table gets empty, I also tried to implement the global search, and the same result, empty table...
Also, I get no error output, I tried to reproduce the error in a plunker, but to my surprise It worked there...
Is there any way to debug it?
Are you loading data asynchronous? If you are, you will need to have two collections, one that is the displayed collection and the other that contains all the items for the table.
Smart Table has a data attribute for st-safe-src.
The only way that I believe your tables would return a blank result, is if the product_conditions collection is somehow being interpreted as blank or undefined.
I would attempt to log out the collection to the console, before and after sorting the table and confirm if the collection is the same.
Reason why (from the documentation):
smart-table first creates a safe copy of your displayed collection: it
creates an other array by copying the references of the items. It will
then modify the displayed collection (when sorting, filtering etc)
based on its safe copy. So if you don't intend to modify the
collection outside of the table, it will be all fine. However, if you
want to modify the collection (add item, remove item), or if you load
your data asynchronously (via AJAX-Call, timeout, etc) you will have
to tell smart-table to watch the original collection so it can update
its safe copy. This is were you use the stSafeSrc attribute
<td id="ext-gen383" class="x-toolbar-cell">
<table id="ext-comp-1144" class="x-btn x-btn-icon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em class=" x-unselectable" unselectable="on">
**<button id="ext-gen384" class="x-btn-text x-tbar-page-last" type="button">** </button>
</em>
I tried to click the button. Please see the html above. Tried so many ways.
eg:
//*[contains(#class,'x-btn-text x-tbar-page-last')] or
//button[contains(#class,'x-btn-text x-tbar-page-last')]
But still not working.
I'm guessing that only the number at the end is generated. Try:
By.cssSelector("em.x-unselectable > button[id^='ext-gen']")
Also, looking at that <em>, are you sure that that class isn't making the button NOT clickable? By the name, it looks like it disables clicks.
Its hard to tell without seeing the full html of the page. Since ExtJS generates random ids, there really are not any good properties to use for finding the element.
I would recommend just using an XPath, and then use an index (if your page has multiple button elements):
//button[1]
And adjust the index accordingly until you get the correct button to click.
Likewise, you could use the WebDriver API for driver.findElements, which will return a collection of all matching items, and then you could apply the index to that collection to get the correct button.
I have the following code
<tr>
<th ng-click="predicate='-name'; reverse=false;">Name</th>
<th ng-click="predicate='age'; reverse=true;">Age<th>
<tr>
<tr ng-repeat="user in users | orderBy:predicate:reverse">
<td>{{user.name}}<td>
<td>{{user.age}}</td>
</tr>
My aim here is whenever i click on the table header, then the corresponding column has to be sorted based on particular predicate and reverse. And that is happening perfectly. But I have a scenario where, when i click on an external object, then my age value in table changes here and hence as a result the table sort order is getting disturbed. But i don't want sort to get disturbed. How can i skip table to not obey sort on other actions and have it only on click of table column headers? Can anyone help me with this?
I don't think this is possible. Whenever "users" changes, Angular will notice (since that scope property (i.e., "users") is bound (one-way data binding) to the ng-repeat directive), and Angular will update the view.