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!
Related
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.
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.
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 tinkering with the MVCContrib Grid and am stuck on how to format a row of data in the grid based on the data.
For example, say we have a grid of products, where each product has data fields like name, price, and discontinued. I'd like to highlight all product rows that are discontinued.
One workaround would be to use jQuery on the client-side to apply a CSS class to those rows where the discontinued cell is TRUE, but that seems like a brittle solution. I'm hoping there's a way to do it on the server-side via the Html.Grid method call.
Thanks
Hello Scott: Try something like the following to add RowAttributes -
#Html.Grid(Model)
.WithModel(new CustomerGridModel())
.Sort(ViewData["sort"] as GridSortOptions)
.Attributes(id => "grid", style => "width: 100%;")
.RowAttributes(data => new MvcContrib.Hash(
#class => data.Item.Discontinued ? "discontinued" : ""))
This will add a class attribute to the tr element. Then, create a class along the lines of:
tr.discontinued td {background-color: red;}
Sorry for the long code snippet...
I need to be able to edit a table of data in the browser.
I have seen in MVCContrib there is a HTML helper to render out a table. Useful... but what about if I want the user to be able to edit that table? From what I can see it does not help there.
What is the best way to approach this?
Traditional FORM with a TABLE inside? If so is MVC smart enough to parse the posted data back into a collection of rows? How would that work anyway?
Or perhaps it should just switch to edit mode when a row is clicked (using javascript etc) then when user moves to a different row an AJAX action is called to submit just the one row. I can imagine the logic could get complex here - this would presumably still use a form but would I have to insert it into the DOM dynamically?
I also need to be able to add rows to this table. I do not require paging support.
Is there an off the shelf solution out there?
Should I go back to web forms? :)
Take a look at Phil Haack's blog where he describes how to model bind to a list.
Maybe this can help?
I've got the same problem, and I have found a solution for it. Don't think it's the most beautiful, but it's ideal for me, because one of my requirements was be able to edit table data using jQuery's Jeditable plugin.
So I generate a table using MVCContrib's Grid<> extension:
Html.Grid<Somenamespace.Line>( Model.InvoiceLines )
.Attributes( id => "InvoiceGrid" )
.Columns( column => {
column.For( li => li.LineItem.ItemDescription ).Attributes( name => ".LineItem.ItemDescription", #class => "click" );
column.For( li => li.LineItem.InvoiceUnitNetPrice ).Named( "Unit net price " ).Attributes( name => ".LineItem.InvoiceUnitNetPrice", #class => "click" );
column.For( li => li.LineItem.InvoiceQuantity ).Attributes( name => ".LineItem.InvoiceQuantity", #class => "click" );
})
.Render();
//rest of the code
Html.Submit("_submit", "Save");
Right now You can edit in place values, but it doesn't upgrade corresponding model.
All the magic happens after user clicks submit button:
$(document).ready(function() {
$('#_submit').click(function(e) {
e.preventDefault();
$('#InvoiceGrid tbody tr').each(function(index) {
var hidden = $('<input />').attr({ type: 'hidden', name: 'InvoiceLines.Index', value: index });
$(this).children('td:first-child').before(hidden);
$(this).children('td:not(:first-child)').each(function() {
$(this).append($('<input />').attr({ type: 'hidden', value: $(this).text(), name: 'InvoiceLines[' + index + ']' + $(this).attr('name') }));
});
});
$('form').submit();
});
//editable stuff
$('.click').editable(function(value, settings) {
return (value);
}, { submit: 'OK' });
});
In every TD I create hidden input, with value from that TD, in every row input with Index, and the most important here is 'name' attribute: Name of collection in Model[here goes index].rest.of.path, so in this particular case (example):
InvoiceLines[2].LineItem.ItemDescription
Hope it'll help, because rich grid isn't always an answer ;)
Regards
Mateusz
I would checkout one of the javascript UI libraries first:
ExtJS Grid
Yahoo DataTable
Flexigrid
WebForms are easier when it comes to quickly developing rich UI's like editable grids.
Last night I implemented a simple solution: form + table inside, using input fields in the cells with naming convention as described in Phil Haack's blog (thanks to #BengtBe for link).
It's working but its a bit fiddly (e.g. adding rows with jquery requires me to work out the next unused index).
So I am still looking for more solutions.
One I have discovered is the extjs library which provides a very rich grid. I have yet to work out whether there is an easy way to post back the grid data to one of my controller actions yet though...