I want to remove the first column(the column used for selecting the row(s)) of the sap ui5 table.
I don't have the requirement to select the row(s).
I tried to do that by css, but, it is messing with the table alignment.
Can any one suggest, how to remove first column of table?
You can use oTable.setSelectionMode(sap.ui.table.SelectionMode.None) if you want to disable row selection completely or oTable.setSelectionBehavior(sap.ui.table.SelectionBehavior.RowOnly) if you want to be able to select a row by clicking on the content.
You can do it in different ways.
table td:nth-child(1){ display:none;}
Works OK in Chrome + FireFox but not in IE
Use Jquery to handle cross platform issues using:
$('table td:nth-child(1)').hide();
works in all browsers!
Or if you have control of the html, you can:
<table>
<tr>
<td class="first">...</td>
<td>..</td>
..
</tr>
</table>
You can then create a css entry like:
table td.first { display: none; }
<table:Table id="toa__table"
enableSelectAll="false"
selectionMode="Single"
busy="{utilModel>/busy}"
selectedIndex ="1"
selectionBehavior="RowOnly"
rows="{path:'path' ,templateShareable:false}" >
use selectionBehavior="RowOnly" its hides first row ,and it work based selection mode Single or Multiple
Related
I have a page with lots of text using the same class. I am wanting to select and store all the text with that same class. Is this possible? All advice & comments appreciated!
I have HTML code like this:
<p class="foo">Some sample text</p>
<p class="foo">Some more sample text</p>
I have tried this:
<tr>
<td>storeText</td>
<td>//p[#class=foo']</td>
<td>var1</td>
</tr>
I expected var1 to be:
Some sample text
Some more sample text
Alternatively do I need to set up a while statement and gather each individually?
This page talks about a similar exercise, but uses Selenium for Python: Get the text from multiple elements with the same class in Selenium for Python?
//gather all p[class=foo]
List<WebElement> ele = driver.findElements(By.cssSelector("p.foo"));
Iterator<WebElement> iter = ele.iterator();
// initialize array, map, whatever
While(iter.hasNext()) {
// insert text into map
// print to log
// store in array
//whatever you need
var.add( iter.next().text() );
}
I didn't get to try out the answer from #bcar because I am not a javascript expert nor am I sure I could put the answer into IDE. I found another way however. I discovered that the text is stored in tables, so I am using the following code to extract the entire table (which includes the text I need).
<tr>
<td>storeText</td>
<td>//div/h2[text()="Elements and Performance Criteria"]/following::table</td>
<td>Content</td>
</tr>
Now I have to work out how to replace the new lines with as this is plain text. Another question for stackoverflow! Thanks.
Quite easy:
Just loop through the stored elements.
Whenever you use find_elements_by_class_name, it returns the list of selenium web elements. Hence you just need to iterate with a loop, like this.
names = driver.find_elements_by_class_name("_xEcR")
for i in names:
print(i.text)
I'm designing a form like this, where the bottom of the labels in that row align in straight line and the top of the input fields in that row align in straight line.
Owing to some restriction in CSS (we can't fix the height as it will vary), I've to place the labels of the form elements in first row and then place their respective input fields in the next row (such that the input fields are placed just below their labels).
I tested the keyboard & the tab order with this html structure, it works fine.
I'm wondering that the reading order in JAWS or any other screen reader is not going to be right.
Any recommendations for any method to change the reading order
or
is it ok to go ahead with this html structure since the tab order is anywys working ?
In the HTML structure each input should be preceded by its label, rather than having labels on one row and inputs on the next.
However, you have a very particular display you want, and you are supporting IE7 (without display: table), so I think you are best off actually using a table.
You can do this accessibly, if you take these things into account:
Use a basic layout table for your form, and include an extra attribute on the table tag:
<table role="presentation">
That means the table is not a table from an accessibility point of view. (I only ever recommend this when supporting IE7 layouts!) Do not use <th> tags either.
The main thing for screen readers when filling it in would be an explicit label-input relationship.
<label for="input_id">My label</label>
<input type="text" id="input_id">
You can tell if this works by clicking on the label, it should put the cursor in the input.
However, your reading view needs a different approach. When you've got a row of items at the top that relate to a row of items underneath, that is the definition of a data table. So when the page is saved (or however it converts to the reading view), use a data table e.g:
<table>
<tr>
<th>Customer account number</th>
[other <th>s]
</tr>
<tr>
<tr>
<td>023456353434</td>
...
When read out by a screen reader it will read the 'header' (e.g. customer account number) before the content (023...). So the changes are:
Remove the role
Convert the top row into <th>s
It has to be said this is a hack, it is not particularly robust, and I certainly wouldn't recommend it for a responsive site. It is purely the required layout and browser support that lead to this.
without viewing your markup its impossible to tell exactly, but it sounds like you have a tow of inputs and then a row of labels....that's not ideal for accessibility.
you could nest the form control inside the label element, setting the form control's display to block to achieve the same effect, while also increasing usability and clickability.
I would like to set an own table style as default style within the TinyMCE editor (version 3.4.9 within Moodle 2.2.3).
Right now, my new styles are shown in the dropdown, but I cannot manage to get one as the default table style. The default value is always "-- not set --", which means that no table style will be used.
This is how it looks at the moment:
https://img.skitch.com/20111226-f4wgp8kudx45t6e2s17yse4cq6.jpg
This is how it should look like at the end ("Tircia Style" should be default):
https://img.skitch.com/20111226-dcf3t3w7qxagst1xgr2ieas26b.jpg
Pictures are from the TinyMCEforum.
When you initialize tinymce please add the path to a new css file which will define the styles used within the editor.
tinymce.init({
content_css: [
'/css/innerLayout.css'
]
});
Some sample styles for innerLayout.css for tables -
.mce-content-body table{width:100%;border-spacing:0;border-collapse:separate;border:0}
.mce-content-body table tr:nth-child(even){background:#FAFAFA}
.mce-content-body table caption,.mce-content-body table td,.mce-content-body table th{padding:15px 7px;border:0;font:inherit}
.mce-content-body table th{font-weight:400;color:#6E6E6E;border-bottom:2px solid #B9B9B9!important;
Other styles can be found here - link
Don't modify core files. I realize there previously wasn't a choice, but in TinyMCE 4.x there is now a way to set default table styles with table_default_styles.
http://fiddle.tinymce.com/iUeaab
in tables.js add the following code:
function init() {
settings = tinyMCE.settings;
settings["table_styles"] = "default1=red;default2=blue;" + settings["table_styles"];
tinyMCE.settings["table_styles"] = settings["table_styles"];
I had the same issue and I tried to solve it by passing Configuration or changing library JavaScript files. I started doing reverse engineering of table.js (/tiny_mce/plugins/table/js/table.js). But, no luck.
So, I went to table.htm (/tiny_mce/plugins/table/table.htm) which is template file for table plugin's modal dialog box. Commented out preset option {#not_set} form the select control.
<tr id="styleSelectRow">
<td><label id="classlabel" for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<!--<option value="" selected="selected">{#not_set}</option>-->
</select>
</td>
</tr>
Now, you should pass table_styles always to the initial configuration when we initiate TinyMCE.
var varTimyMCE = $("textarea").tinymce({
table_styles : "Custom 1=classTable1",
});
This is not the ideal solution but it works for now. I hope TinyMCE developer will give configuration options to control select control in the future releases.
You can edit the plugin.js(\tinymce\js\tinymce\plugins\table\plugin.js) if you are using the unminified tinyMCE.js. On the current version it is line 1872. I added to make the default table styling responsive.
html = '<div class="table-responsive"><table class="table"><tbody>'; // line 1882 or 1916
html += '</tbody></table></div>'; // line 1884 or 1928
I'm having some issues with attaching live event handlers to particular rows.
What I have and what I'm after:
I have some HTML that will be generated dynamically after page load as follows:
<table>
<tr>
<td></td>
</tr>
<tr>
<td class="bonus"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
I would like to have two click events:
One for rows that aren't a "bonus row"
One for rows that have a "bonus row" after them
What I've tried and the problem:
However, I cannot work out how to use a selector to select "element that has a particular element after it" (i.e. a "previous" selector). As such, the best I can arrive at is:
Rows that aren't a "bonus row": $('tr:not(:has(.bonus))')
Rows that have a "bonus row" after them: $('tr + tr:has(.bonus)').prev()
This is all well and good, except whenever I use the live() method on a jQuery object that was obtained through traversal, rather than pure selection i.e.
$('tr:has(.bonus)').prev().live('click', function() {
alert('hello');
});
I get this error:
uncaught exception: Syntax error,
unrecognized expression: )
The issue as an even more minimal example:
I was hoping this was localised to some script I am using, but I've isolated this to a minimal jsFiddle example which still replicates the issue for me: http://jsfiddle.net/ptvrA/
HTML:
<div></div>
<div id="target"></div>
JS:
$('#target').prev().live('click', function () {
alert('f');
});
It seems from this answer that this is a known limitation of live.
My workarounds
For reference, my workarounds are either:
Mark the rows that have a "bonus row" after them in some way
Bind the click to all rows, and do a check to see if there is a "bonus row" after them within the handler.
But if I can get a "nicer" solution, even out of curiosity in case I run into this problem in a different situation, I'd appreciate it.
Cheers
$('tr + tr:has(.bonus) ~ tr') //for row whose next sibling is a bonus row
Will do what you want with the .live method.
For all the people who get here in the future using google.
uncaught exception: Syntax error, unrecognized expression: )
That is happening because .live() uses the original selector that was given to the first call in the jQuery chain. It doesn't no consider additional methods used after the initial $('selector').
To be honest, I'd just use your second idea and bind click to all rows, then check to see if next row has a bonus td in it, like this:
$('tr:not(:has(.bonus))').live('click', function () {
if ($(this).next().children('td').hasClass('bonus')) {
alert('next row has bonus td');
}
else {
alert('next row does not have bonus td');
}
});
fiddle located here: http://jsfiddle.net/7gdqc/2/
I don't think there's a pure selector way to do it, and this isn't really a workaround - I'd call it a valid solution to your problem.
I am trying to access an HTML table from code behind, and set its visible="false" property (depending on what value the user has selected). The table has an id value and a runat=server attribute.
How can I call the table from the code behind in C# 2008 and set its display?
Make sure you have your table set up to run at server.
Example
<table id="tblMyTable" runat="server">
....
</table>
On server side you can access it by using the variable tblMyTable
To hide the visibility is not simple. There is not a property for it since it is a Html control rather than a server control.
I would wrap the table in an ASP.NET control such as a panel, and hide the panel.
I would wrap the table in an <asp:Panel control and change the visible property on that instead.
Seting the visibility from the codebehind is a simple as setting the Visible property:
table_control.Visible = false;
If you are doing this in response to some client side activity, then you need some javascript:
document.getElementById("<%= table_control,ClientID %>").style.display = "none";
or jQuery:
$("#<%= table_control,ClientID %>").hide();
Call this from an onclick or onchange event, as needed for your page.
we can hide the table control from server side use the following code in server side at which event you want to hide the table
your html code
<table id="tblMyTable" runat="server">
....
</table>
your server code in which event you want to hide table
tblMyTable.Style.Add("display", "none");
You should use an <asp:Table> control if you want to access the table from code behind eg
<asp:Table ID="Table1" CssClass="data" runat="server" CellSpacing="0">
<asp:TableHeaderRow>
<asp:TableHeaderCell>SKU</asp:TableHeaderCell>
<asp:TableHeaderCell>Description</asp:TableHeaderCell>
<asp:TableHeaderCell>Quantity</asp:TableHeaderCell>
<asp:TableHeaderCell>Amount</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
Bind data to the table eg. like so:
var row = new TableRow();
row.AddCell(stock.Sku);
row.AddCell(stock.Description);
row.AddCellTextbox("txtQty", cart.Values[key]);
row.AddCell(stock.Price.ToString());
Table1.Rows.Add(row);
Note: The table control doesnt provide viewstate for items added in code, for that you need to use a GridView or similar control.
In-order to set the visibility of the Table you need to set the Runat="server" attribute to your table
Design View:
....
Code Behind (C#)
tbl_test.Visible=false;
Try this it works... ;)