I am using wenzhixin bootstrap table with server side pagination. My table has two special column(First column for row Guid row id, Second column include two button for each cell)
My problem is, I should hide first column content because I don't want to see all Guid id by Users. Moreover, My table data coming with server side pagination. I couldn't button with html code for second column.
How can I add custom column for server side pagination or how can I add attribute to all cells in the first or second column?
To hide a column, you can use either JavaScript command after the bootstrapTable('load',..) if you used that, or in a document ready block:
$table.bootstrapTable('hideColumn', 'name')
shown on Bootstrap-Table site: bootstrap-table.com: showColumn-hideCoulumn
or if defining within the table, add data-visible="false" to the column you wish to hide.
bootstrap-table.com: column-options visible
i.e.
<table id="table"
data-toggle="table"... >
<thead>
<tr>
<th data-field="id" data-visible="false" >ID</th>
For the buttons - I am not sure what type of project this is for - but I solved this by adding link buttons to the table rows via data-formatter - read up on this on the API documentation bootstrap-table.com/docs/api/column-options/#formatter
I used the examples found on github.com/wenzhixin/bootstrap-table/issues/1765 - under Format -> 'Basic Format' - which shows how to add a link (button via Bootstrap CSS). To make the link specific to a row, use row[] to get a field value, or you can even use the id column instead of hiding it, if that is your field (use 'value' instead of row[] then - see examples).
I did mine something like:
<th data-formatter="buttonFormatter">View Links</th>
then in the javascript <script> block:
function buttonFormatter(value, row, index) {
var id= row["id"];
var url = "https:/...&id=" + id;
return 'View';
}
These are based roughly on stuff I've been doing recently - haven't tested these examples, but should give you a good start if you haven't already figured it out...
Related
I’m looking to add search fields in each table header automatically using peoplesoft.
Example
Javascript solution:
add an html area to your page (with rec field)
assign via peoplecode an html object to the field
use something like this Javascript Filter on the table
For this to work well, your grid needs to show all rows and not paginate.
If it paginates and you need to keep the pagination, then you need to go for the PS solution:
Add one search field per header you want to search
On the fieldchange you perform a rowset flush then .Select(" WHERE ...") to populate it based on the filter
How do I get the element next to currently selected element?
So my scenario is I open a page and click some button to load a table. When I click on the header of any column in the table it sorts and adds an image next to it. I have a locator for the header link. Problem is as it's old code it does not have id and that header link is in a td tag without any id or class. All it contains is a column name with a link. I want to make sure when I click that link image with sorting symbol appears next to it.
<td>
<a>Column Header</a>
</td>
Click on the column header and it changes to :
<td>
<a>Column Header</a>
<img src="sorting icon url" />
</td>
This can be done through something called XPath axes , refer this link
http://learn-automation.com/how-to-write-dynamic-xpath-in-selenium/
the following methodologies work in katalon as well , you will have to make an object and give the xpath of that object.
for your query xpath could be ://div[#class='xyz']/following-sibling::*
Let us asume that the button is uniquely identified by css selector 'td a'. Then your script could be something like
TestObject button = new TestObject().addProperty('css', ConditionType.EQUALS, 'td a')
WebUI.click(button)
TestObject button2 = new TestObject().addProperty('css', ConditionType.EQUALS, 'td a img')
WebUI.waitForElementHasAttribute(button2, 'src', 30)
It will return true if the img with any source is present. Will wait 30 seconds before giving an error, but you can change it as you wish.
I want to save the list of hidden columns so that next time when the table is loaded I show the table with the same set of column which the user chose to see in the past. Is there a way to get a list of all hidden columns in bootstrap-table library.
You can use the cookie extension to solve your problem, here is an example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/cookie.html.
The plugin saves:
Sort order
Page number
Page number from the list
Visible columns
Search text
Docs here: http://bootstrap-table.wenzhixin.net.cn/extensions/#table-cookie
you can use the jquery datatables plugin to easily handle this problem, this plugin auto generate the table columns and show that.
you will get more information from link below,
https://www.datatables.net/
hope it helps.
try this below
var tab = $('#table').bootstrapTable('getHiddenColumns');
$.each(tab, function(index, value) {
alert(value.title);
})
I am using FilePicker.IO with Meteor. I have it set up and working, but I have fun into an issue using multiple widgets on a page.
I have a table with rows of data. The data set is a bunch of users with name, photo, address, etc.
I'd like to include a "upload photo" button on EACH row, but since the widget is rendered by ID, I am limited to one per page. Wondering if there is a solution where I can have an upload widget on each row of the table.
Here is my code in my coffee file:
filepicker.setKey('askdjw&H*(Djkjew)') #Not my key
Template.admin.rendered = () ->
filepicker.constructWidget $('#uploadPhoto')
HTML:
<td><input type="filepicker-dragdrop" id="uploadPhoto" class="{{_id}}"/></td>
A couple of things :
if {{_id}} is a unique id it should be in the id attribute
it looks like you are just passing a jQuery selector into filepicker, what is stopping you from using $('.uploadPhoto') instead?
You can see a similar pattern here in my datatables implementation
i need to be able to produce a "pretty" printout of an individual list item's values, with the goals being:
get rid of all navigation
organize data as it would appear on a typical paper form (a customer requirement)
i'm avoiding using InfoPath at this time due to other issues (which i'll post separate questions for...)
for example, i have an individual list item that normally displays similar to the following DispForm.aspx example:
i need a printed version (PrintForm.aspx??) that will display similar to the following example:
from what i can tell, i can't do this just by modifying/creating custom CSS.
it also seems that i can't quite do this just by creating my own "print" version of DispForm.aspx.
any suggestions, ideas, links would be very helpful.
Creating a custom list form is probably what you want. Without the master page attached to it or anything.
You can find a walkthrough here that will get you started:
http://office.microsoft.com/en-us/sharepointdesigner/HA101191111033.aspx
Enjoy.
You could use CSS to hide all the navigation etc. that you don't need using a media="print" stylesheet, but you won't be able to make the exact changes to the layout you've illustrated.
If it doesn't have to be exactly like the example, it would be fairly trivial to hide all but the name->value table and just print that. If you really do need to merge fields and re-layout the table then you likely have to hack up the server-side.
Why can't you create your own version of the page?
Using Sharepoint Designer, you could create a custom aspx page that uses a dataview webpart to do this...
#mortenbpost's link was just what i needed:
Create a new page that contains a custom list form
specifically, here's what you need to do to get a "basic" custom page for a list item -- from which you can completely customize it with XHTML/CSS:
first
ensure your list has all the columns you'll need
second
here's how to create a custom "view" page (virtually the same steps can be followed for a custom "new" or custom "edit" page):
Open MS Office SharePoint Designer
File -> Open Site...
enter your web-site URL
Make sure the "Folder List" Task Pane is visible (Task Panes -> Folder List)
Expand the "Lists" folder
You should see entries like the following:
Announcements
Calendar
...
YOUR LIST NAME
...
Expand the entry with YOUR LIST NAME
You should see entries like the following
Attachments
Items
AllItems.aspx
DispForm.aspx
EditForm.aspx
NewForm.aspx
Right-Click on YOUR LIST NAME
Select New -> ASPX
Re-name the file to something meaningful, like: PrintForm.aspx
Open PrintForm.aspx
View in "Split" mode
In the Code pane, you should see your insert-point inside a blank html form
Insert -> SharePoint Controls -> Custom List Form...
Select YOUR LIST NAME from the first drop-down (List or document library to use for form)
Select "Item" from the second drop-down (Content type to use for form)
Select "Display item form (used to view list items)" (this is where you choose between view, new, edit)
Un-check "Show standard toolbar" when creating a printable form
Click OK
In the Design pane, you should see a basic table layout with labels on the left and values on the right
In the Code pane, you should see such code as the following for every Column in your list (this one's for a "Single line of text" column type):
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Column name</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<xsl:value-of select="#Column_x0020_name"/>
</td>
</tr>
You can now just take all those <xsl:value-of select="#Column_x0020_name"/> entries and do standard XHTML/CSS layout
To test, save your work
Then, in a web browser, navigate to your SharePoint web-site
Select an item you've already entered data for
Choose "View Item"
In the address bar, replace DispForm.aspx with PrintForm.aspx
some things to keep in mind:
spaces and punctuation characters make for annoying naming of Column name
Column name in the code will have a maximum length of 32 -- any names longer will be truncated, e.g.:
SharePoint Column name: this is a long name
becomes in the code: this_x0020_is_x0020_a_x0020_long
any Column name in the code that would be a duplicate will be length 32 plus a numeric suffix. so, given the above column also exists, we would then have e.g.:
SharePoint Column name: this is a long name also
becomes in the code: this_x0020_is_x0020_a_x0020_long0
if you add columns or modify columns, you'll have to add them in by hand to this page
(do the Insert -> SharePoint Controls -> Custom List Form... on another "dummy" page to get the naming right)
again, i couldn't have done this without #mortenbpost's answer!
*****You can now just take all those entries and do standard XHTML/CSS layout *****
can you expand this with an example on how to do it?
This isn't an answer so much as a note to the above.
Use a custom list form but keep in mind that if any of the columns have versioning turned on you will not be able to get at the "data" easily. For example if one of your colums is a Notes column and everytime someone edits the notes field a new version is appended then none of that is accessible as it's essentially a seperate "list." I'm stuck on this issue as I also have a client asking for a print out which "doesn't look like it's from SharePoint."
Alternatively, you could export to a spreadsheet & print from there.