I have a "select" column and I want to have the total of the current selected rows in the header name.
I am using headerValueGetter but the value is not refreshed when a new row is selected.
// in my colDef
headerValueGetter: params => `(${this.totalSelected})`
// methods
onSelectionChanged(event) {
this.totalSelected = event.api.getSelectedNodes().length
},
totalSelected is a property of my Vue component and its value is updated when a new row is selected.
Any ideas how to accomplish this ?
Try refreshing the header manually in your selectionChanged-event:
onSelectionChanged(event) {
this.totalSelected = event.api.getSelectedNodes().length;
gridOption.api.refreshHeader();
},
Related
When you use react-select multi-select option, the default behavior is for each value once selected be inserted after each other.
you can see this behavior on the example site here for the MultiSelect option. https://jedwatson.github.io/react-select/
How can I insert each value component before, instead of after ?
Is there some sort of trick to do this ?
here is a code box.
https://codesandbox.io/s/y8RD0GVWg
Thanks in advance.
The secret to ordering the selected values lays in the function that handles the changes.
It concats each new selection, you can split it into an array and reverse it.
handleSelectChange = value => {
const data = value.split(',');
const d = [
data[data.length-1],
...data.slice(0, data.length - 1),
]
console.log("You've selected:", value, data, d);
this.setState({ value: d });
};
I am working to create a grid like component in VueJs. You can see the JSFiddle here: https://jsfiddle.net/masade/nrb9f4j2/
In the above fiddle the <datacell> component is used to allow inline edit for any cell.
I am 'watch'-ing changes to the rows and saving them in local storage
A newly created row is being pushed to parent object by this.$parent.unshift(newrow) in the <addrow> component
The problem is when I add a new row, though it is being added to the rows local storage it is not being watched for changes
Steps to replicate the issue (on JS fiddle):
Click on Add Row and enter a name to add
Once the row is added, click on the second column (year) and update it
Any changes to newly added row is not being updated
However if you refresh the page, and modify the same again, I am able to update it again.
Please help me understand if I am doing something wrong
You stumbled into one of the change detection caveats in Vue. Vue cannot detect when you have added a property to an object using the index of that object.
You define newrow like this:
data: function(){
return {
newrow : {}
}
},
which means that newrow has no properties. After that, you always add properties to newrow using an index, like here:
this.$parent.cols.map(function(col,index){
if(typeof newrow[col.m] == "undefined")
newrow[col.m] = "";
})
This means that Vue doesn't know about any of the properties you just added.
I added a method to your fiddle called makeNewRow which adds the properties you need to newrow correctly using the $set method.
makeNewRow(){
this.newrow = {};
this.$parent.cols.map((col,index) => this.$set(this.newrow, col.m, null))
},
Then I call it in mounted and in your addRow method. This fixes your bug. Here is the updated fiddle.
Note: there was an additional bug in your code that I fixed. If someone opened your app and did not previously have grid-vue-local in their local storage, then the uid for gridStorage would be zero, and the first row they added would have the id 0. To fix this I simply added
save: function (rows) {
gridStorage.uid = rows.length
localStorage.setItem(STORAGE_KEY, JSON.stringify(rows))
}
data(){
return{
items:localStorage.fetch()
}
}
watch:{
items:{
handler:function(items){
localStorage.save(items);
},
deep:true
}
}
you can save in items,and watch items,if the items has changed,it will updata
I implemented a dynamic column visibility to hide/show columns, e.g. DT.columns(5).visible(true) and DT.columns(5).visible(false) to show/hide column 5. I also have a callback for createdRow which let's say makes a html button out of the text in column 5.
Currently in createdRow I check this.api().columns(5).visible() and if true then I proceed to do $('td:eq(5)',row).html('<button>'+data[5]+'</button>') cell content, and if false then I return because otherwise I'd overwrite the current 5th <td> which is not the intended one. But then when I unhide column 5, it comes up as text since I did not run the previous code.
I'd like to be able to run the code and cache the html of the cell in column 5 so that when it's unhidden, it comes up with the intended <button>. What's the best way to do that? The column-visibility event?
Note that I know I can use the render: function (...) {} option for the column, but I do not want to use that because it affects the raw data of the table and affects filtering and searching - I want the raw data to remain unaffected, which is why I was using the createdRow or rawCallback callbacks.
Assume column 5 has visibile: false in the DataTable initialization object which looks like this:
var DT = $('#dt').DataTable({
...
createdRow: function (row, data) {
if (this.api().column(5).visible()) {
$('<button>' + data[5] + </button>')
.appendTo($('td:eq(5)',row).text(''));
}
);
Cheers
Look into using columnDefs and the 'render' function instead...
var DT = $('#dt').DataTable({
...
"columnDefs":[
{
'targets':[0],
'visible':false,
'render':function(data, type, row, meta){
...
}
]
});
https://datatables.net/reference/option/columns.render
https://datatables.net/reference/option/columns.data
I have a custom built tableview, where I am building the text in the table row by row. I have a big loop that goes through a set of XML data and builds the row based on an RSS XML feed.
Then I added an event listener to see when somone clicks on one of the rows:
tableview.addEventListener('click',function(e)
{
showrow(theid);
});
My question is, during the building of the row, how do i define theid as a variable associated with that row?
I tried a simple
var theid = item.getElementsByTagName("id").item(0).text;
in my loop, but that does work as its always set to the last item in my loop of XML entries.
Thanks!
As you are creating the TableViewRows in your loop, just add the 'theid' property to it with dot notation
var row = Ti.UI.createTableViewRow();
row.theid = item.getElementsByTagName("id").item(0).text;
row.addEventListener('click', function(e){
alert( e.source.theid );
});
Note: If you are adding additional objects on your TableViewRow (like images, labels, etc) make sure you look at the event propagation in the KitchenSink to make sure that 'e.source' is the tableViewRow and not the UI objects added to the tableViewRow
If you want to add the eventListener to the table (not the row) just check the 'rowData' of the click:
table.addEventListener('click', function(e){
alert( e.rowData.theid );
});
you should add custom variables to your row like
var newRow = Ti.UI.createTableViewRow({
title: 'my new row',
customID: item.getElementsByTagName('id').item(0).text
});
tableViewRow.add(newRow);
if that doesn't work, try this:
var newRow = Ti.UI.createTableViewRow({
title: 'my new row',
'customID': item.getElementsByTagName('id').item(0).text
});
tableViewRow.add(newRow);
Here is the scenario:
1. Select all rows by checking the header row checkbox.
2. Unselect one row.
3. The header row checkbox is still checked which is invalid because not all rows are selected.
How can I unselect the hedaer row checkbox?
Thanks
You can use resetSelection method. Look at the example prepared for this and this question. The button "Clear Selection" use resetSelection method.
You can do the following:
var grid = $("#ID_OF_YOUR_GRID");
grid.jqGrid({
//other options
multiselect: true,
onSelectRow: function (rowid, status) {
var chkSelectAll = $("#ID_OF_THE_HEADER_CHECKBOX_USUALLY_CB_DATA");
if (chkSelectAll.length && chkSelectAll.is(':checked') && !status) {
chkSelectAll.removeAttr('checked');
}
}
});
BTW. You only need this on the older versions of JQGrid. I've checked in version 4.3.1 this works out of the box.