LocalStorage table columns sort - javascript

I use this table-dragger plugin.
I want save sorted data table on localStorage, when then user reloads the page I want to save the ordered table for him.
I have code:
var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'column',
dragHandler: '.handle',
onlyBody: true,
animation: 300
});
dragger.on('drop',function(from, to){
// Setting the Value.
localStorage.setItem("keyName", "value"); // Syntax
localStorage.setItem("table_layout", table_layout); // by variable
localStorage.setItem("table_layout", "from to?"); // by value
// Get the value.
localStorage.getItem("table_layout");
// Clear one item.
localStorage.removeItem("table_layout");
// Clear all items.
localStorage.clear();
});
I don't know how to save the ordered data table correctly. When I reload the page, all my changes lost.

Related

AngularJS keep category expanded at where user left off

I am new to the angularJS. And recently I have been working on a angularJS project. I use the ng-template and ng-repeat to make a multiple product category tree. And I add a button to control whether the sub-category expanded or not.Here is the problem,How I can keep the category expaneded at where user left off when the user click into other pages and click back to the category page?
You could save the current tree state into the HTML5 Localstorage.
Add a unique id to each category and save them into the localstorage.
function saveCurrentState() {
const openedCategories = /* find the opened categories */;
// we injected $window in our controller.
$window.localStorage.setItem('openedCategories', openedCategories.join(','));
}
Then, when you load the page
/* to be run on the page load.*/
function retrieveOpenedCategories() {
// all the current categories, open or not.
const categories = /* get all the categories */;
// we retrive our category from the localStorage. With some code to handle if it's empty / null.
const openedCategories = ($window.localStorage.getItem('openedCategories') || "").split(',');
// check if we have categories that were opened. length of 0 will evaluate to false-y.
if(openedCategories.length) {
// we use map because we want to change every value from the original array.
categories = categories.map((category) => {
if(openedCategories.includes(category.id)) {
category.open = true;
}
return category;
});
}
}
/* we show our categories, somehow.*/

Input field in Table "keeps" edited number in same row while scrolling (JSView)

I've got a sap.ui.table.Table with Input fields and the table gets the data via JSON which works well. However, if I edit the value in the first row for example, and try to scroll down, the value "stays" in the first row until a different value hits this field. So it basically updates every cell except the edited one while scrolling. After that, I scroll up again to see the value I changed, but this value now has the old value from the load at the beginning again.
I think something with my binding isn't correct at all, because I haven't seen anything like this yet. I know that tables only update the row contexts but I can't figure out how to do this.
Here is a example: https://jsbin.com/yuvujozide/6/edit?html,console,output
Edit the right "Gates" and scroll, to see how it disappears and edit the left value and scroll to see how the value scrolls with the table.
I tried to remove/set the VisibleRowCount and logged to see if the data gets loaded multiple times but that's not the case.
var oModel = new sap.ui.model.json.JSONModel();
var oTable = new sap.ui.table.Table({
visibleRowCount: 12,
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
editable: true
});
oModel.setData({ rows: tableRows.value, columns: columnArray });
oTable.setModel(oModel);
var counter = 0;
oTable.bindColumns("/columns", function (sId, oContext) {
var columnName = columnArray[counter];
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
}).bindProperty("value", columnName, function (cellValue) {
return returnRange(this, oTable, cellValue, columnName, counter, dic);
});
counter++;
return new sap.ui.table.Column({
label: columnName,
template: defaultTemplate,
flexible: true,
autoResizable: true,
width: 'auto',
multiLabels: [
new sap.ui.commons.Label({ text: columnName }),
new sap.ui.commons.Label({ text: dic[Number(counter - 1)].value[0] + " - " + dic[Number(counter - 1)].value[1] })
]
});
});
oTable.bindRows("/rows");
As you can see I separated the rowData and columnNames in two arrays:
tableRows and columnArray
The returnRange function checks some values and just returns the cellValue
I would expect that the Input fields keeps the changed values (which is probably normal), so I can change several Input fields and then I can Update the table via Ajax-Call.
The problem is that sap.ui.table.Table has a custom scrolling behaviour that is different from the default browser scrolling. Instead of creating a row for each record, it will create a fixed number of rows and re-bind these rows after each scroll.
If the table is editable and bound to a JSONModel, it will usually create a two-way-binding and update the model values upon user input, hence scrolling works fine. But since you have provided a custom formatter function for the binding (returnRange), a two-way-binding is not possible anymore. This means that any user input is lost after scrolling.
If you remove the formatter function like this
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
});
it will work fine.
In case you want to validate the user input, you should listen to the input's change event and use InputBase#setValue to set it to a different value. This will also reflect your changes in the JSONModel.

How to ignore fields in search while being able to search using the API?

My table contains thre columns; "name", "description" and "status". I have a dropdown field which filters the table on the status column. Essentially:
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$('#dt').DataTable().column('status:name').search(value).draw();
}
});
This works, but the problem is the standard free-text search input field includes the status field in the free-text search.
Setting searchable: false on the status field causes the dropdown to stop working since Datatable ignores it.
{
data: 'status',
name: 'status',
searchable: false // Stops table.column().search(value) from working :-(
}
Ideally, the (standard) free-text search field should ignore the stuatus column, but the dropdown code should still be working.
This works:
Set the column to searchable: false. This makes the table ignore this column in free text searches.
Add a custom search which uses the original row data, settings.aoData, instead of the data array (it doesn't contain the column because of 1.)
Redraw the table when the filter dropdown changes.
Code:
$('#dt').DataTable(defaults)
.on('init.dt', statusHandling);
function statusHandling(e, settings, processing) {
// Redraw table on dropdown status change
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$(options.table).DataTable().draw();
}
});
// Our custom search function which adds an AND 'status = foo' condition
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var input = $('input[name=status]').val().toLowerCase();
// Use original data instead of 'data' because status is not searchable
var status = settings.aoData[dataIndex]['_aData']['status'];
return status.toLowerCase().indexOf(input) === 0;
}
);
}

How do I update data on Kendo-UI grid and persist hierarchy selection using Angular?

I have an Angular single page app with a kendo grid that is bound to a RESTful API. When this data is updated externally, I have a web socket (PubNub) function I am triggering with the intent to refresh and display externally changed data while preserving the hierarchy of the grid as well as selected row.
I can get the data grid to refresh but this doesn't refresh the datasource with the changed data from the API. If I include a dataSource.read(), then it seems to prevent my persistence of the hierarchy, IE it closes previously opened hierarchical grids.
I have an tried to use the example from the Telerik Docs for this listed here: Persist expanded rows after refresh
vm.savestate = function(e) {
console.log('save pressed:');
var grid = $scope.responseGrid;
var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-minus)"), function(row) {
console.log(row);
console.log($(row).data("uid"));
return $(row).data("uid");
});
grid.one("dataBound", function() {
grid.expandRow(grid.tbody.children().filter(function(idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
});
grid.refresh();
};
The solution was rather simple actually. You can't use the uid as this is generated upon each new read for the observable array. The correct choice is to use a model id as the below example:
vm.savestate = function(e) {
console.log('save pressed:');
var grid = $scope.responseGrid;
var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-minus)"), function(row) {
console.log(row);
console.log($(row).data("uid"));
return grid.dataItem($(row)).EmployeeID; //Use Model Data instead of uid
});
grid.one("dataBound", function() {
grid.expandRow(grid.tbody.children().filter(function(idx, row) {
return $.inArray(grid.dataItem($(row)).EmployeeID, expanded) >= 0;//Use Model Data instead of uid
}));
});
grid.refresh();
};
Thanks to the Telerik support team for this response. Here is their updated example on how to persist expanded rows after a refresh of a Kendo-UI Grid when a dataSource.read() is required.

Required Help in Hiding Table Rows - dc.js

I'm using dc.js to plot chart and show data tables.
Everything runs quite good. And for the table i've created a dimension and also a group. Passing the group variable to dynatable records.
Problem is when I do some selection in the chart. The data table value are of course getting changed. But the there are few records which are supposed to hidden instead they come with 0 value.
I wanted to hide those rows.
Below are the functions I'm using.
Table Dimension :
var tableDim = ndx.dimension(function(d) { return d.label; })
Table Group: var tableGroup = tableDim.group().reduceSum(function(d) { return d.count; })
Dyna Table:
var dynatable = $('.data-table').dynatable({
features: {
pushState: false
},
dataset: {
records: tableGroup.top(Infinity),
perPageDefault: 10,
perPageOptions: [10, 20, 100, 500, 1000]
}
}).data('dynatable');
Refresh the table on chart selection :
function RefreshTable() {
dc.events.trigger(function () {
dynatable.settings.dataset.originalRecords = tableGroup.top(Infinity);
dynatable.process();
});
$('.data-table tr').each(function() {
if ($(this).find('td:nth-child(2)').text() < 1) {
$(this).addClass('zero-value');
}
})
};
I've written jquery codes to assign a class for the rows with zero-value. And it gets assigns only for the first 10 records as I've given the perPageDefault: 10. But I want to it run for the entire table records.
Some one please help me in hiding those rows with values 0.
Before assigning the records in the dynaTable initialization and RefreshTable, you can copy the data and remove records that have value 0.
Dynatable is acting on the records that you pass it, so you can change that data in any way you see fit.

Categories