I have a grid in my module. In this grid the first column "Vessel Name". In the vessel name is present in a alphabetical order. If I click any one of the vessel, one popup will open. After closing popup the grid is not refreshed properly. And the last data is present in first. I need to scroll.
So what I need is, After closing popup I need focus on the clicked vessel. How can I do this. I have more than 30 data in a grid. Based on rowIndx how can I achieve? Please help me.
Considering your table strucutre
<table class="grid-class">
<tr>
<td>ele 1</td>
..
<td>ele X</td>
</tr>
<tr class="active"> // the one you clicked,set active to this and remove to all other
<td>ele 1</td>
..
<td>ele X</td>
</tr>
</table>
Firstly set a css(write your css based on your need) class active which highlight the row.Then try something like-
$(document).ready(function(){
$('.grid-class tr').click(function() {
$(this).sibling('tr').removeClass('active');
$(this).addClass('active');
});
});
Related
I applied fadein effect of Angular-Animations to my Angular project based on ASP.NET, and display only the first row faded-in. However, the other rows are not displayed when using *ngIf as shown below:
<ng-template pTemplate="body" let-row let-i="rowIndex">
<tr *ngIf="i==0" [#fadeInOnEnter]>
<td>
<a [routerLink]="['/detail/']">{{ row.Summary }}</a>
</td>
</tr>
</ng-template>
I know that else can be used in this situation, but I do not want to repeat lots of <td> blocks omitted in this example. So, is there a way to display animation only if the condition is true in *ngIf field and display the same block without animation.
Can you just apply the condition to the animation?
[#fadeInOnEnter]="i == 1"
I've been straggling with this issue for a while.
I have a table view cell, when selected, a subview containing some buttons is added to the cell.
Those buttons are not accessible via Voice Over.
Does anyone know how to solve this issue?
Thanks!
This is not so much of a coding answer but...
You should be fine with what you got.
Safari and Mac VoiceOver can click buttons and links when focus is on a cell. Chrome and VO on the otherhand can not, but if you are a VO user you know that you might have to "interact" with some elements to reach a deeper interactive element. So if you use QuickNav and arrow Left + Down you can press the button in Chrome.
Tested with this code:
<table id="theTable">
<thead>
<tr>
<th scope="col">Hey push it</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="pushMe">Push Me!</button>
</td>
</tr>
</tbody>
</table>
and a lite jQuery to se if somethings happend:
$('#pushMe').on('click',function(e){
$('#theTable').css('background','red');
});
Test for yourself on CodePen: Screen Reader and Table test
i have such a checkbox and i whant to turn it into jquery ui checkbox to look the same on all browsers.
<tr>
<td valign="middle" class="ck"><input name="perk-senior" id="senior" type="checkbox" value="4" checked /></td>
<td valign="middle"><div class="text">Show available plans for senior</div></td>
</tr>
but after i use
$('#senior').button()
the checkbox just disappears. I tried adding jqueryui icons, and removing css, it gives the same effect.
how can i make it into a standard checkbox with a tick icon on toogle?
Should that not be:
$('.ck').button()
Or:
$('#senior').button()
You've selected the entire containing div and not the checkbox itself (presuming that the table is nested within a div named #search).
i often used rich-faces for makes a user interface, recently i passed at vaadin.
Now i'm looking for a vertical menù in vaadin, is there this kind of compontent?
Rich-faces has the followed:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky
If you're using vaadin 6.2+, you can use this add-on :
https://vaadin.com/directory#addon/melodion
But I suppose you are using vaadin 7, so you could probably achieve the same result either by
updating this add-on (should be easy)
using the accordion component: https://vaadin.com/book/vaadin7/-/page/layout.accordion.html
Unfortunately vaadin provides only a menubar.
If you have experience in html and css, you can create your own vertical menu and then use vaadin CustomLayout to embed it in a panel.
For example you can try something like this.
You should create an html file:
<table width="100%" height="100%">
<tr height="100%">
<td>
<table align="center">
<tr>
<td align="left">Menu 1</td>
<td><div location="menu1"></div></td>
</tr>
<tr>
<td align="right">Menu2</td>
<td><div location="menu2"></div></td>
</tr>
</table>
</td>
</tr>
</table>
Then you should embed it in vaadin in this way:
// Have a Panel where to put the custom layout.
Panel panel = new Panel("Menu");
panel.setSizeUndefined();
main.addComponent(panel);
// Create custom layout from "yourfile.html" template.
CustomLayout custom = new CustomLayout("layoutname");
//the style name refers the one you should define in css
custom.addStyleName("customlayoutexample");
// Use it as the layout of the Panel.
panel.setContent(custom);
// Create a few components and bind them to the location tags
// in the custom layout.
TextField menu1 = new TextField();
custom.addComponent(menu1, "menu1");
TextField menu2 = new TextField();
custom.addComponent(menu2, "menu2");
Pay attention at binding location name with component name.
If you want to add some javascript to xml (for open/close menu elements) you should write it directly in tag attribute.
Inside a panel I have an asp calendar and an asp detailsView. Im trying to get them to display along side each other but cant get the alignment correct. I would like the the calendar top left, and the detailsView top right, with the top of the grid matching the calendar.
<asp:Panel ID="detailsPanel" runat="server">
<asp:Calendar ID="calendars" VerticalAlign="top" HorizontalAlign="left" runat="server" OnSelectionChanged="LoadRequestedDate_OnClick" OnDayRender="cal_DayRender"></asp:Calendar>
<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource" HorizontalAlign="right" VerticalAlign="top" >
After table example now looks like:
Just need to align the tops
iv tried <td align="left"> ad right but no gd
There are several options how to do this. I'll give you two.. one simple and one correct :)
a.) Simple: Use HTML table like:
<table>
<tr>
<td>PUT_CALENDAR_HERE</td>
<td>PUT_DETAILS_HERE</td>
</tr>
</table>
b.) Correct: Use CSS to modify positioning:
float:left; // apply this to calendar
Caution: You might need additional styles to tweak position. If you provide pure HTML, I could try to make a prototype in jsFiddle (otherwise I would only create it with some placeholders).
btw: You either didn't paste complete HTML, or you are missing closing tag for panel.
Edit: Here's an jsFiddle to solve your table positioning problem: http://jsfiddle.net/KdhnV/