For a DetailsList or ShimmeredDetailsList, I need to add two arrows (one up, one down) besides the column name in the column header so that the user can look at the grid and tell which column is sortable and which is not. Currently I am using isSorted and isSortedDescending in IColumn, but that only brings an up or down arrow once the user clicks on that column. It doesn't produce any icon that tells the user by just seeing the grid which column is sortable. How can that be done ?
You need to register the sort icon.
registerIcons({
icons: {
sort: <Sort />,
sortdown: <ChevronUp />,
sortup: <ChevronDown />,
},
});
https://github.com/microsoft/fluentui/wiki/Using-icons#custom-svg-icons
Related
i am building an app with element UI and when using tables with sorting capabilities, i can't change the sorting caret, bby default it's a filled triangle but i want to change it to an SVG icon i have.
here is the default icon :
Is there a way to change it, as the official docs don't specify how, or give any slot for it in headers.
It seems to me that you can't change it, looking at the interface you can see that it receives four parameters, but the documentation indicates two.
Documentation
:default-sort="{ prop: 'date', order: 'descending' }"
Interface
interface Sort {
prop: string;
order: 'ascending' | 'descending';
init?: any;
silent?: any;
}
if you manage to do it, I'm interested in knowing how you did it.
In a v-data-table, I have one column with a simple text field, this column containing the text field is sortable. The problem is that when I change the value in the text field, the data is immediately re-sorted and in my case the lines change and in the worst case the line change and the focused input changes too, like in this example: codepen reproduction
For reproduction:
click on the iron header to sort the iron column
change one input
see that the line changed its position and that you're not anymore in the same field
Expected behavior:
sort the iron column
change one input
see that the line didn't change its position and you can keep modify the input
click sort again to reorder the data once you're done.
Is there a way of behaving like in the expected behavior?
Thank you very much for the answers
It looks like you should use a different event on the <v-text-field> component to listen for changes instead of using v-model to bind changes automatically to props.items.iron. Text Field Event Docs here
You could do something like using the blur event so it only updates when your user focuses away from the text field:
<v-text-field
#blur="updateIron"
:rules="[max25chars]"
label="Edit"
single-line
counter
autofocus
></v-text-field>
then in your JS file you'd add a method like this:
methods: {
// ...other stuff here
updateIron(val) {
this.item.iron = val
}
}
Try experimenting with different events to update your values at the appropriate time.
So I found the answer to that, which consist of redefining the header:
I use the slot header.iron in order to redefine a sortIron method only on click : basic demo
What I'll have to do next is to redefine arrows, style, 'asc' and 'desc'
I'm still open to other ways of doing it!
But right now I can follow my wanted behavior which is :
sort the table via the iron column
change one field
press tab, on the next field enter a value
repeat previous step until you're done
finally re-sort the table only by clicking the header
I want to put YADCF filters as the first row in the table. Is there a config option for that? Currently, I have it as a part of header row.
I am able to put the filter in footer and use display:table-header-group to put it in the first row. However, this feature stops working when I use "scrollX": true to allow horizontal scrolling.
You can try the filters_tr_index
As to integration with vertical scrolling, I'm not sure if it works properly (in the past there was no option to integrate with that feature)
filters_tr_index -
Required: false
Type: integer
Default value: undefined
Description: Allow to control the index of the inside the thead of the table, e.g when one is used for headers/sort and
another is used for filters
I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/
I have these five fields ID, Name, Address, Phone and Fax displaying on the datatable. I am using Column Visibility Feature and by default, I am displaying first four columns. Suppose, I make Fax column Visible and Phone Column Invisible. Now, if I refresh the page, I see the same four columns again. My question is, can we Retain this visibility / invisibility ?
Thanks.
Refresh the page? Do you mean redraw the datatables page? (e.g. by clicking a column header to sort or clicking 'next' in the datatable?)
If so, are you using javascript/jquery to modify the visibility of your elements?
Doing so will work initially - but because datatables doesn't 'know' that jquery has modified the element, when it redraws the table (in a new order, or on a new page or whatever) it will revert your changes to whatever state it understands the table to be in.
To make your changes persist over redraws, you need to use the datatables api - so that datatables knows what you're doing. like this:
var mytable= $('#mytable').DataTable();
mytable.column( 0 ).visible( false );
however IF you want these changes to persist between refreshes of the webpage in the browser, then you need to set up sessions, or store these configurations in a database.
Then every time the page in requested, you check that data, and you can decide dynamically onload how to initialise your datatable:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ userHiddenColumn ] }
] } );
} );