Good day. I'm making a gwt application with tables using GWT Grid. Now, I want my GWT Grid to have a scrollbar when rowCount is greater than 15. The header is not part of the scrollable area.
My problems are:
How can I enable table/grid content scrolling without including the header?
How can I make my table header look like a button wherein users can click it to sort the specific column?
My current code will allow scrolling when rowCount > 15 including the header. Please help. Thanks in advance.
Maybe it's time to switch to cell widgets, and DataGrid.
Javadoc
Live example (with code)
Documentation on cell widgets, and how to do column sorting (a DataGrid is almost like a CellTable).
Scrolling
I won't dig deep into GWT with this post but I'll try to give some hints on how to do the scrolling part.
If your table's data is wrapped in a separate tag than the table's body, then it shouldn't be a problem. If the table's structure is similar to the following, it shouldn't be a problem:
<table>
<thead>
<tr>
<th>ColumnHeader1</th>
<th>ColumnHeader2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</tbody>
</table>
To make the data part vertically scrollable, you should add a CSS style to the <tbody> element which sets overflow-y: scroll; when the rowcount is greater than 15. Also you need to set the height or limit it's height by other means (wrapping container) for the scrollbar to appear.
To set the height, I'd consider to get the <tbody>'s offset height right after the 15th row has been added and force it to stay at that. It might go like this:
tbodyElement.setHeight(tbodyElement.getOffsetHeight());
Remember, this has to be done right after adding the 15th row.
Sorting
For that you should wrap your column header names in some kind of a Widget. It could be a HTML or a Label for example. You just need to add ClickHandlers to them and some styling to fill the whole cell and the cursor to switch to a hand with CSS cursor: pointer; while hovering on it.
Conclusion
Well, this was my light overview of this. Without seeing the code you've done it's hard to go any further.
Related
I'm using Selenium and Ruby with IE 11 / and chrome
I'm trying to write a script that finds a specific piece of text in a table and returns the column and row which it exists.
I've found some close examples online but they were just returning the value in a cell, not returning the location of the text.
To find the object (text) itself I was using
varObject = driver.find_element(:xpath, "//*[contains(text(),'#{varDevice}')]")
driver.execute_script("arguments[0].style.border='3px solid red'", varObject) #Make sure I'm pointing to the correct text.
I wish I could attach the code for the table itself, but unfortunately I'm not allowed to share any code what-so-ever.
My goal is to take a table which column 1 row x has a checkbox and the text I'm trying to find is in column 2 row x and grab the row so that I will be able to click on checkbox in column 1 row x. Clicking on the checkbox is the easy part once I figure out what X is of the text I'm searching.
Example:
<html>
<body>
<table>
<tr>
<td>
*A check box*
</td>
<td> 192.168.0.0
</td>
</tr>
<tr>
<td>
*A check box*
</td>
<td> 192.168.0.100
</td>
</tr>
</body>
In this scenario I want to look for 192.168.0.100 and return that it is in row 2
so that I can click on the checkbox in row 2.
Thanks
I'm assuming that the checkbox is an INPUT. If it's not, you can adjust the XPath.
//input[../following-sibling::td[contains(.,'192.168.0.100')]]
This will find an INPUT whose parent (the TD) has a sibling TD that contains the IP you are looking for. It works with the HTML provided but I'm guessing the HTML you posted is not complete so you probably will have to adjust it.
There are a few ways you could achieve this, such as:
Searching through the table:
Iterate through the table rows.
Look for the text match in column 2
When found, click the checkbox in column 1.
Finding the adjacent column via relative xpath:
Find the element with a text match (i.e. exactly what you have already)
Find the relative column by applying an xpath like /../td[1] to the above.
As you initially suggested, by finding the row number in the table:
Find the element with a text match, like above.
Use some clever xpath logic to determine the row number.
As a side note, I'd suggest making your current xpath a bit more specific than "search the whole page". At some point, you're bound to detect completely the wrong thing by mistake. Instead, you can do something like:
//td[contains(text(),'#{varDevice}')]
In the jqGrid documentation to form_editing, I see how the form_editing is constructed.
<form ...>
<table>
<tr id='tr_myfield'>
<td> Caption</td>
<td>edited element named, in colModel, as "myfield"</td>
</tr> ...
</table>
</form>
Can I change this construction ?
It's necessary to me because I have too many columns to edit in my form and I want to display the form in most userfriendly way.
E.g when I have twenty columns to edit in my table. I have twenty rows in my form.
But I would obtain one row for two columns.
I understood that each rows are identifying by their index, so I can't just have two columns in the same row.
But if it's possible to faking it, be sure it's make me happy ^^
(e.g with two tables and a similar id or with form_editing parameters that I don't know ...)
PS : Sorry for my bad English.
There are rowpos and colpos properties of formoptions which would be helpful for you.
The demo demonstrate how you can change the standard editing form created by jqGrid to the following
If I understand correct your problem the usage of rowpos and colpos could be very helpful in your case.
If you need to customize the form, your best bet may be to create your own page and use a plugin such as jQuery UI Dialog to display your custom form. It will be more work since you cannot use the built-in form editing capabilities of jqGrid, but you will have complete control of the layout of the form.
Im my code i get a value from an ajax page , but it is displayed in a different position than i wish to display. I would like to display it in,..
<tr><td>hello</td></tr>
<tr id="showajax"><td>Ajax Value is:</td><div id="ajaxhide"></div></tr>
here the ajax value returned is displayed somewhere else.
I had used document.getElementById('ajaxhide').innerHTML=xmlhttp.responseText; inside javascript properly also.
The ajax value returned is like this
echo '<td>'."Thanks".'</td>';
Well the first thing is you're trying to dynamically resize the table. It would be better to create the cell as empty to start with and then update the content.
You've also got some invalid syntax with <div id="ajaxhide"></div> floating outside of any table cells but inside a table row. It's not just that it will fail validation and each browser may treat it differently, but also that when you're making the content change you're trying to insert a cell inside the div (which isn't technically allowed) which is inside a row (which also isn't technically allowed).
The solution is to use:
<tr id="showajax"><td>Ajax Value is:</td><td id="ajaxhide"></td></tr>
Now to make the AJAX update:
document.getElementById('ajaxhide').innerHTML=xmlhttp.responseText;
A word of warning on Internet Explorer
IE considers COL, COLGROUP, TABLE, TBODY, TFOOT, THEAD and TR to be read only. This means you can update a cell (TD, TH) but not the whole row and not the whole table. In your above example you're not trying to do that... but just be aware of the limitation if your design changes.
I am using jqgrid to display the data in 10 columns. There is one column PillName, we can store PillName as 100 caharacters in Database. While displaying in jqgrid, its displaying like in the following image:
How to show the value in a proper way so that jqgrid dont get distorted. Ideally, it should break after some characters.
or It can show some 10 characters and then after that ........(dots)?
Kindly Help?
Thanks.
I suppose that you have CSS conflicts between MVC and jqGrid. One sees problems already in the input field of the jqGrid pager. The problem for example can be fixed with additional CSS definition
input.ui-pg-input { width: auto; }
The close problem you have probably with <td> or <tr> elements. You can examine the styles of the grid cell with Developer Tools of Internet Explorer of Chrome oder with Firebug. You can also make a simple test and comment the whole MVC CSS or a large parts of the CSS. I suppose that the grid will looks OK after removing unneeded CSS declaration or including the fix like with the pager in the CSS of your projects.
I need to display records of information from my database to my users. Currently, I have this info bound to a datagrid. However, there are too many fields to display and my tables are going off the page. I don't really want my pages to have horizontal scrolling, and I don't want to decrease the font size.. so I was wondering if anyone had any better ideas to go about displaying long rows of data? Just ask if any additional info is needed, thx :)
My go-to solution for something like this is to round up the most essential information (anything that will immediately identify what/who the row's about) and put the rest in a following row in a new TD and interior table. Hide/show that with javascript, and you're golden.
Example HTML
<tr>
<td>Joe</td>
<td>Jones</td>
<td>555-555-5555 (m)</td>
<td class="more">more..</td>
</tr>
<tr class='showme'>
<td class='showthis' colspan="4">
<h2>More info</h2>
<table>
<!-- yet more info here -->
</table>
</td>
</tr>
jQuery to make it work
$("td.more").click(function(){
// don't hide/show the next TR itself, may cause cross-browser issues
$(this).closest("tr").next("tr.showme").find(".showthis").slideToggle();
});
Necessary CSS
.showthis { display:none; }
/* you'll want to play with padding and such for open/close states, too */
You can make it a lot more sophisticated, of course, but this is the basic functionality.
There's several ways. Largely it depends on the data.
Optional columns (user configurable -
allow the user to hide columns they
don't want). This way you can also have columns that would be "nice to have" but the user doesn't always need.
Use small icons instead of words
where applicable For example, instead of "True"
put a small checkmark.
Use Ellipsis (...) on long text, with a
div title attribute so they see full
text when they mouseover.
I know you don't like the idea of horizontal scrolling, but perhaps if you implemented it such that the first few meaningful columns were fixed/frozen the horizontal scroll would be less annoying to the users?
Horizontal scrolling on a page is the devil! But, you can at least contain it somewhat in this situation by wrapping your GridView in a div and enable horizontal scrolling on only the div itself (i.e just the grid).
<div style="overflow-x: auto;">
//GridView
</div>
Split the data into two rows. Try to keep it logical, for instance, the first column of the first row will be "First Name" and the first column of the second column will be "Last Name". Then the second column will be "street address" for the first row and "city, state, zip" for the second row. Etcetera.
You may be better served using a ListView instead of GridView in this case.