Could someone here please, for the love of God!, post an example of an working dojox.grid.DataGrid using a dojox.data.JsonRestStore, with 2 columns, date and time?
I have tried the following :
<th field="startdate" cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.DateTextBox" editable="true" formatter="formatDate"></code></pre> and
<th field="starttime" cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.TimeTextBox" editable="true" formatter="formatDate">
Also :
<th field="startdate" cellType="dojox.grid.cells.DateTextBox" editable="true" formatter="formatDate"></code></pre> and
<th field="starttime" cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.TimeTextBox" editable="true" formatter="formatDate">
but nothing seems to work. It's been two days now and I've been reading tons of documentation and reports but I couldn't find a working example anywhere.
EDIT :
I am now facing the weirdest issue in my programmer's career : the grid is now working fine with DateTextBox and TimeTextBox (this case works in Firefox 3.6.6 and in 3.6.14pre, Internet Explorer 8 and Google Chrome.), except for the following :
In Firefox 3.6.13, with an even number of items in the grid, when I try editing the time or date of one element the widget box appears in the top left corner, the date isn't selected properly and the browser crashes with the CPU going to 100%.
However, if the number of items is odd the editing of date and time works just fine. I have absolutely no idea of what to do so please bounce some ideas.
you can keep the values in the grid to be date type but with your customized format....the grid will take care of sorting.....no need to write customized sorting for some simple field like Date....
......
var yourLayout = [[
{ 'name': 'Date', 'field': 'dateCol', 'width': '15%', 'formatter': this.formatDate}
]];
..............
formatDate: function(dateValue) {
return dojoLocale.format(dateValue, { selector: 'date', formatLength: 'long' });
}
......
There is an example of what you are trying to do in the dojo test suite. It's not actually using the JsonRestStore but that doesn't matter.
http://archive.dojotoolkit.org/nightly/checkout/dojox/grid/tests/test_edit_dijit.html
The best dojo documentation around are the tests.
If it helps, Oliver has added some examples of how to format dates in a grid, with and without editable dijit widgets. This still needs to be incorporated into the main documentation.
Related
I have a quandary that I can't seem to resolve - any pointers would be hugely welcome.
When the tab link is clicked, the new tab opens, but the datatable within tabs 2 & 3 doesn't resize - tab1 is always ok.
I'm using datatables within boostrap tabs and the following code, which I've used on other sites and they work. This site i'm working in however, isn't playing ball - wondering if it's because it's BS5 causing a conflict ??
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function (e) {
$.fn.dataTable.tables({ visible: true})
.columns.adjust()
.responsive.recalc();
});
I've also tried the code provided by Datatables, and that doesn't seem to work either - in this case. https://datatables.net/examples/api/tabs_and_scrolling.html
The Problem
I think the line
$.fn.dataTable.tables({ visible: true})
is not valid DataTables syntax - and I would expect it to generate an error in your browser's console:
$.fn.dataTable.tables(...).columns is undefined
Suggested Solutions
You can re-write your approach in a couple of different ways (assuming you are using a recent version of DataTables).
The first two examples assume all your tables use a common CSS class name in their HTML <table> tags. In my case, I am using this:
<table id="example2" class="display dataTable cell-border" style="width:100%">
And therefore I will use the .dataTable class selector in the following examples.
Example One
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$.fn.dataTable.Api('.dataTable')
.columns.adjust()
.responsive.recalc();
} );
Example Two
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$('.dataTable').DataTable()
.columns.adjust()
.responsive.recalc();
} );
Note that the above example uses DataTable() with a capital "D".
Example Three
The above examples operate on all data tables in the page - it's just that the only one which is affected is the one you see in the selected tab.
If you want to explicitly target only one table in your tab event, you can use the approach shown in this question:
How to make DataTable responsive in Bootstrap tabs
In that answer, the approach retrieves the specific table name from a unique attribute value 'data-bs-target' defined for each tab, for example:
data-bs-target="#home"
See the API reference page for details.
What I need is to have every second row of a table to have a different background colour. I have successfully created my method that can be called from the rml document and returns the hex colour. What I need is a way on rml side to set the background-colour attribute of the tr tag to the return value of my method. How can this be done ? I have been using the official documentation and looking specifically at the chapter 11 Conditional formatting but I do not see anything. Essentially what I want to do it the following:
<tr style="background-colour: [[_get_colour(index)]];" />
_get_colour will return a string that will contain the hex value of a colour
Edit: As it turns out the docIf RML tags that are used for conditional formatting are not implemented in openerp v7 according to this and I have to resort to a different solution.
Can't test this at the moment, but here's an idea that might work:
Make two <tr> for each iteration (1 for each style). In one of them, check if the index is even or removeParentNode('tr'), in the other, check if the index is odd or removeParentNode('tr'). This way only one or the other table row will display on each iteration, but not both.
Example (untested):
<tr style="style1">[[ (index%2 == 0 and display.content) or removeParentNode('tr')]]</tr>
<tr style="style2">[[ (index%2 != 0 and display.content) or removeParentNode('tr')]]</tr>
I found an example of that problem being solved in an rml in the system. I ended up resolving the issue with the following:
<tr>[[ setTag('tr','tr',{'style': 'Move_Line_Contect_Assign_State_background' if picking.move_lines.index(move_lines) % 2 else 'Move_Line_Contect_Assign_State'}) ]]
I need some help.
I have a server side processed jquery.datatable. One of the columns is a numeric col with values between 0 and 180.
I would like to filter this column with yadcf ranger_number_slider. I set the yadcf like this:
{
column_number: 14,
filter_type: 'range_number_slider',
filter_container_id: 'external_filter_container_ZZ'
}
But I am faced with some problems:
On the first page of the datatable (paging size is 10, number of entries is roundabout 10.000), the values of this specific column are (accidentally) only from 0 to 30. The ranger_number_slider shown in the div "external_filter_container_ZZ" is as shown below:
Ranger-Number-Slider
As you see in the image, the slider is set from 0 on the left side to 30 on the right side. It seems, that the slider doesn´t get all values from the server side processing for this specific column.
Furthermore: If I try to select some values in the slider, the result in the table is always empty, and the slider disappears!
Is anybody able to give some hints for this behaviour?
Thank you very much in advance.
Best regards
BeSt
Not only that its possible, its available on the showcase page - see here, you must do some reading in the docs / showcase (source on github too) and you will find all the needed docs for that, in short: in addition to your table data that is sent form server to client you must provide yadcf with its data as well - populate the yadcf_data_COL_NUM with the relevant data,
aaData:[["Trident", "Internet Explorer 4.0", "Win 95+", "7/24/2015", "1"],…]
draw:"2"
recordsFiltered:6
recordsTotal:57
yadcf_data_0:[{value: "Trident", label: "Trident Eng'"}, {value: "Tasman", label: "Tasman Eng'"},…]
yadcf_data_1:["Nintendo DS browser", "Netscape Browser 8", "All others", "Lynx", "Mozilla 1.6", "Mozilla 1.5",…]
yadcf_data_2:["N800", "Win 95+ / Mac OS 8.6-9.2", "S60", "KDE 3.5", "Win XP SP2+", "KDE 3.3", "OSX.3", "KDE 3.1",…]
yadcf_data_4:["134", "0"] <- this is for range slider filter tips
From showcase docs
//In case that you want to populate your select / auto_complete
filters with values //you have to add to your current JSON the
following attributes yadcf_data_0 / yadcf_data_1 / etc' //where each
attribute contains a list of strings //For example:
//"yadcf_data_0":["KHTML","Webkit","Trident","Misc","Other
browsers","Tasman","Presto","Gecko"],
I have an Interactive Report that displays Images in one column. The images are displayed directly from Images I loaded into shared components.
The report query:
SELECT
Tbl_P.ImagePackage,
Tbl_P.PRICE as PACKAGE_PRICE,
Tbl_I.ID,
Tbl_I.Name,
Tbl_I.PRICE,
Tbl_I.Type || Tbl_I.Name as Minifigure,
Tbl_I.Quote as QUOTE,
'AddToCart.png' as ADD_TO_CART
from "Tbl_090_ImagePackages" "Tbl_P"
left outer join "Tbl_091_Images" "Tbl_I"
on Tbl_P.ID = Tbl_I.Image Package
where Tbl_P.ID = :P201_GROUP
The column in question is 'ADD_TO_CART'.
The Column attributes are as follows:
Display Type: Display as Text(escape special characters)
Link Text:
<img src=#APP_IMAGES##ADD_TO_CART# alt=Application Express height=30 width=30
Link Attributes:
ID=#ID# class="AddToCart"
Target: Page in this Application (Current Page)
The Title is defaulting to 'Application' and I can't get rid of it or change it. I have tried changing the Link Attributes to: title="Testing" ID=#ID# class="AddToCart" Unfortunately this has not worked. Any help would be much appreciated.
Thank you
Seems like your link text is malformed? Put your attributes between quotes, single or double. When you view your page source with eg Firefox, you'll notice strings highlighted in red: these are invalid html. The browser is forgiving up to a certain point, but if you confuse it enough things like this may start happening.
<img src="#APP_IMAGES##ADD_TO_CART#" alt="Application Express" height=30 width=30 />
I got my autocomplete stuff working well enough to see that it's returning some data when I type in a field--but the data shown in the dropdown below the textbox is just a vertical column of asterisks or list item bullets. (I can't really tell what they are.)
When I query the web service directly in the browser, it returns a Json array as expected which looks like this where, for example ?term=chi (I've added some line breaks for readability)
[
{"Name":"Chihuahua"},
{"Name":"Chinese Crested"},
{"Name":"Chinese Shar-Pei"},
{"Name":"Japanese Chin"},
{"Name":"Schipperke"}
]
My JavaScript looks like this:
$(function() {
$("#Breed").autocomplete({
source: "#Url.Action("BreedList", "Patient")"
});
});
like I say, my textbox in question (#Breed) does respond sort of like an autocomplete box, but the dropdown data is weird. Any ideas?
Although I did have a CSS bundling problem (somehow I had omitted the jquery ui css from my bundle), a bigger issue was that the Json returned by my service needed a lower case "value" property for each item. I was using the column name as cased on my Linq query. The tip that pointed me in the right direction on this came from the answer here: jQueryUI autoComplete returns back empty list