yadcf>filter_type: “text”>filters_position: 'footer' fails to search - yadcf

I'm having issue when search text box are in the footer position. The search box is not functional when setting filters_position: 'footer' to yadcf. When setting is removed the text search box do there thing. Anything else I need to do? Thanks in advance and Awesome plug-in.
https://jsfiddle.net/4hqm9tsh/2/
Setting scrollX: to false I'm now able to search with in the column. I'm hoping to keep this true.
{
column_number: 6,
filter_default_label: "",
filter_type: "text",
style_class: 'yadcf-sb',
filter_delay: 1000,
filter_reset_button_text: false
},
],
{ filters_position: 'footer' }

It was a bug in yadcf which I just fixed and released in new 0.9.3.beta.8,
see it in action here
If you will encounter this in other filter type please open a bug in yadcf repository.

It seems that specifying scrollY in the DataTables settings is causing the footer not to filter anything. Needs fixing.

Related

How to resolve Vitesse formatting issue?

I just created a project based on the https://github.com/antfu/vitesse template. But I've some formatting issue.
If I ask for formating in VS Code, each "first" attribute of an html element is on the same line as the start of element, which is something I would have expected, but it raises warning:
Expected a linebreak before this attribute.eslintvue/first-attribute-linebreak
or sometimes:
Expected indentation of 2 spaces but found 4 spaces.eslintvue/html-indent
If I hit Ctrl+S, then I get no errors anymore, all the attributes(including first one) are on a new line.
Honestly, I don't really care which is kept, but how to synchronize the two of them? It jumps a lot every time I format and it's disturbing.
Thank you very much
EDIT
After #tony19's comment, I tried to set volar as default formatter. So my .vscode/settings.json looks like:
{
"cSpell.words": [
"Vitesse",
"Vite",
"unocss",
"vitest",
"vueuse",
"pinia",
"demi",
"antfu",
"iconify",
"intlify",
"vitejs",
"unplugin",
"pnpm"
],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.keystyle": "nested",
"i18n-ally.localesPaths": [
"locales"
],
"i18n-ally.sortKeys": true,
"prettier.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.css": "postcss"
},
"editor.formatOnSave": false,
"editor.defaultFormatter": "Vue.volar"
}
But I've still the same behavior. shift+alt+F format like this:
<div id="simple"
class="toto">
index
</div>
and when I save, it formats like this:
<div
id="simple"
class="toto"
>
index
</div>
I must admit that I'm not a big fan of having the end > on a single line but as far as the comportment is coherent I'm happy
(I also tried "editor.defaultFormatter": "dbaeumer.vscode-eslint" and "editor.defaultFormatter": "antfu.vite" without any luck.

datatables header not aligned with columns when scrolling horizontally

I cannot figure out the way to solve this. Ive tried adding "table-layout:fixed" but it no longer works in dt's current version.
Thanks
var config = {
"bFilter": false,
"bInfo": false,
"bPaginate": true,
"scrollY": 200,
"table-layout":fixed,
"data": dataoMine,
"bAutoWidth": false,
"columns": columns,
"scroller": true,
"language": {
"emptyTable": "empty data"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
};
<table class="dataTable" style="width:80%; height:100%; margin-left:10%; margin-right:10%;}">
<thead><tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
<th>a5</th>
<th>a6</th>
<th>a7</th>
<th>a8</th>
</tr></thead>
</table>
I don't quite have enough information to give you a firm answer, because you don't tell us what's in your columns variable and don't give us the structure of your dataoMine array. But, it seems pretty clear from your screen shot that you have four columns of data, and also have eight columns specified. That will show all the columns and whatever background you have for the missing data columns. Presumably, your "barbershop stripes" are the page background in whatever theme you are using.
Make sure that you have the same number of columns in your data that you have in your column specification, and see if that fixes your problem.
After researching it turns out that this problem is very common. It seems there is no definitive solution but this worked for me:
add this into dt's config:
scrollX: 100%
i fixed my problem by just adding
scrollX: true

yadcf plugin not filtering data

I am loving this yadcf plugin an all its options. But for some reason, I cannot get it to filter my data. I want to type in data and have it filter on the fly. I have looked through all the examples on the yadcf site and followed them to the best of my knowledge. I am using JQuery 2.1.4, DataTables 1.10.10, and yadcf 0.8.9.beta.26.
Here is my relevant javascript:
$(document).ready(function() {
'use strict';
var table = $(".stocks").DataTable({
paging: false,
searching: false,
info: false
});
yadcf.init(table, [
{
column_number : 4,
filter_container_id: 'industrySearch',
filter_default_label: "Type industry",
filter_type: "text",
text_data_delimiter: ","
}]);
Let me know if any other code is needed.
You must remove the searching: false, from your datatables init code.
Setting searching to false disables datatables searching abilities, and since yadcf uses datatables search api under the hood that it wont work.
Read here more about this option

Datatables 1.10 bSelectedOnly equivalent

I'm trying to find the equivalent of bSelectedOnly in the new version of Datatables 1.10.
I only want to print rows that the user has selected, or print all rows if they havn't selected any.
"tableTools": {
"sSwfPath": "/Datatables-1.10.0/extensions/TableTools/swf/copy_csv_xls.swf", //Add buttons for saving table data in these formats
"sRowSelect": "os", //allow user to select multiple rows in the table
"aButtons": [
{
"sExtends": "print",
"bSelectedOnly": "true",
},
{
"sExtends": "select_none",
},
]
},
It hasn't changed (see docs). But you have an error in your code. Instead of
"bSelectedOnly": "true",
it should be
"bSelectedOnly": true,
Also, bSelectedOnly is not available as a print option. It is only available as a flash button option. See here. That is the actual reason why what you're trying to do will not work :)

Edit hover in rallygrid missing

Trying to do some cell validation in a rallygrid, but in order to add it I need to use objects in columnCfg instead of just file names. I have something like
{
dataIndex: 'field1',
text: 'field1',
editor: { xtype: 'rallynumberfield', allowBlank: true , allowDecimals: false},
editable: true,
},
Everything works (and I'll add a renderer when it does) but I don't get the little edit hover (pencil icon) on this column. Any hint where to look? My goal is for it to look like a default grid with just the renderer, but as soon as I use the options opbject instead of a string, the hover goes away. Any hints?
Thanks for reporting this - I'm seeing the same issue (i.e. cells in column are editable, but the "pencil hover is missing). This looks like an oversight in the rendering of the component in AppSDK2. I'll file a Defect with Rally Engineering. Sorry for the inconvenience.