I have a grails application that uses EasyGrid plugin to display a table.
In one of the pages there's a table that has 3 columns. Now i want to add tooltip to the column headers when the mouse cursor is placed on top of them.
Below is my GSP code to display column headers:
<grid:grid name="myTable">
<grid:set col="userName" label="User Name" sWidth="222"/>
<grid:set col="age" label="Age" sWidth="114"/>
<grid:set col="height" label="Height" sWidth="94" bSortable="false"/>
Currently the value for the columns are set from the controller. For e.g., for one of the columns the code is like below:
age {
value {user -> user.getAge()}
enableFilter false
}
I tried adding "title" attribute to the tag and all it does is to replaces the LABEL attribute.
Can you please tell me how to add a tooltip to column header?
Thanks in advance!
If you need standard tooltips in the column headers you can add headertitles: true option to the grid. To set custom tooltips you can use setLabel method.
Related
Depending on the content in the "status" column, the row should be of a certain color. For example, if the 'status' is 'null', then the row is yellow.
I would try using asHtml method:
Text::make('Status', function () {
return view('partials.status', [
'is_passing' => $this->isPassing(),
])->render();
})->asHtml()
It is described here: https://nova.laravel.com/docs/1.0/resources/fields.html#computed-fields
Since tailwindcss is all within your html you might be able to stick some timple logic in there.
Other then that I would look at one of custom nova packages and how they do this.
Hope it helps!
I'd like to add clickable links to a Kentico Report. The report editor allows you to add all kinds of HTML mark-up in the layout, but it doesn't allow you to add HTML INSIDE of a table that you've inserted into the layout. (Or if it does, it is not obvious from the UI, or from the Kentico documentation.) I want a link to appear in each row, and the link should include a value from that row.
Clicking any of the links would open another page that shows more data about a particular record. In my case, my first column is an ID column and I want its value (in each row) to behave like a hyperlink to another page whose URL includes the clicked ID value as a parameter.
We can use jquery within our Kentico report to allow each value in a particular field to cause a link to be opened when clicked. In my case, I have a URL into which I want to embed an ID value from the report. I want to open one of the admin pages whose URL looks like the following (where 9999 is replaced with a record ID from my report):
/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=9999&displaytitle=false
So let's assume the first field in the report is an ID column and we want to make the displayed ID behave like a link to some other page.
First we need jquery. Edit the report's layout in '<>Source' mode and add a script reference for jquery, such as one you can get from code.jquery.com, or just reference it locally if you have it:
<script src="/jquery-3.4.0.min.js"></script>
Next, we must find each ID field and then make it behave like a hyperlink. To do so, we find the <th> with the ID column's title, walk up to the <table>, and then find all <tr>s immediately under the <tbody>. Once we have each <tr>, we iterate through them to:
underline the ID value like a hyperlink
set the cursor to a hand like a hyperlink
add an onclick event to do open a URL (in a new tab) with my ID field's value
So here is the script. Add it just like you added the jquery script tag. (but add it after the jquery script tag)
<script>
$('th:contains("MyIDColumnTitle")').parents('table').first().children('tbody').children('tr').each(function() {
$(this).children('td').first()
.css('text-decoration','underline')
.css('cursor','pointer')
.click(function(){
var thisId = $(this).text();
var u = "/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=" + thisId + "&displaytitle=false"
window.open(u,'_blank');
});
});
</script>
Keep in mind that if MyIDColumnTitle is not very unique, this script may find the wrong th and table. Modify the jquery selector to suit your needs. You may want to add a wrapping element around your report that has an element ID so you can be specific with your selector.
It wouldn't be difficult to take the same concept and use it to launch a page in a modal dialog instead.
My app has a pretty standard index page that lists all records in an ActiveRecord table.
I want to add a tooltip that provides some custom info when the mouse hovers over a row in the index page. However, my Google and Stackoverflow searches have yielded nothing on-target. (I suspect that if I were more familiar with ActiveAdmin and its components, I might have found the answer embedded in the documents I scanned.)
Can anybody provide me with the missing link? Thanks!
A colleague reminded me of the HTML4+ 'title' attribute, which actually displays a text-only tooltip when hovering on the element. Here is how I was able to implement it:
app/admin/some_models.rb
ActiveAdmin.register SomeModel do
...
index do
...
column some_field do |some_model|
div(title: 'tooltip text - can be a helper method call') do
some_model.some_field # the value to be displayed in the column
end
end
...
If a plain text tooltip is not sufficient, it would be necessary to add an onmouseover event listener to a style defined in the div or in the css defined for the div's class (class: must be specified in the div), then add a javascript function in app/assets/javascripts/active_admin.js or elsewhwere.
I hope this helps someone.
There are several options available here: http://www.unheap.com/section/user-interface/tool-tips/
You can do this in one line if you pass title as an optional argument to an attributes table row:
attributes_table do
row 'I am a row label', title: 'I am a tooltip', &:some_attribute_name
end
If your first (label) argument isn't a string or symbol, it will default to using the title argument as the label. You can read more about this in the ActiveAdmin source code for attributes_table.
Is there any example out there that explains how to dynamically generate a tablesorter with the pager plugin using AJAX, with checkboxes and editable cells? Currently, all of the examples have hard-coded table data, i.e. <theader> and <tbody> are pre-defined.
I can get a basic example up and running with AJAX calls to fetch paginated data, but need to integrate checkboxes into the table.
Also, is it possible to group rows (and expand collapse them) using this plugin?
Here's a screenshot of what I'm trying to accomplish:
Much thanks in advance !
The included parser-input-select.js parser file allows for dynamically added and updated inputs, checkboxes & select boxes. All you need to do is set the parser for that particular column:
Place this in the header
<script src="../js/parsers/parser-input-select.js"></script>
and include this code:
$(function(){
$("table").tablesorter({
theme : 'blue',
headers: {
0: { sorter: 'checkbox' },
1: { sorter: 'inputs' }
}
});
});
This parser will also work with the pager addon. There isn't a demo of this parser being used with the pager, but you can see it working in the grouping rows widget demo.
I am trying to set a value for DDL say
$('#ddlState').val("State"); //State matched the name in DD list value
i have this line in ready function and it works for text boxes but not DDL.
I am also using labelify plugin for text boxes but when i set values like
$('#txtBox').val("Some Value"); //Which is not same as title value
the some value is showing in the grey color.
Any clue?
Well for starters, .NET doesn't render the controls as
$('ddlState');
Try doing this:
$('#<% ddlState.ClientID %>').val('State');
Check out this answer:
Adding options to a <select> using jQuery?