I have an angularjs application that uses an ng-grid. I need to be able to persist the sort order state of the grid even when the grid is repopulated.
The app uses a service that manages state, including the grid configuration, and this provides the persistence that I need:
//variable defined in service, and exposed via controller to grid
var gridConfig = {
data: 'withCandidate',
multiSelect: false,
selectedItems: [],
columnDefs: getAlternateColumnDefinition(),
rowTemplate: 'Templates/grids/WithCandidateCaseRow.html',
headerRowHeight: 20,
rowHeight: 20,
sortInfo: { fields: ["CaseNumber"], directions: [] }
};
<div class="gridStyle" ng-grid="gridConfig"></div>
The sort order is persisted by the sortInfo object supplied. This works fine. However, ideally I would like the grid to have no initial sort order, but still persist any selection made by the user. That means using an empty sortInfo object, but I can't find out how to configure it. I have tried the following, but all produce angular script errors.
sortInfo: null
sortInfo: { }
sortInfo: { fields: [], directions: [] }
sortInfo: { fields: [""], directions: [] }
sortInfo: { fields: [null], directions: [] }
Is this possible? How can I define a null sortInfo object?
Related
I’ve inherited a project that’s setting an inmemorycache with the following key field syntax. None of the examples showcase this particular signature (that I can find at least). All the fields I see in the examples use multiple fields and are placed in the key field attribute. Is this looking for any nested “myField” attributes? How is this expected in the graphql data? (Apollo client 3.2)
const cache = new InMemoryCache({
typePolicies: {
Query: {
/// query info
},
},
UserData: {
fields: {
fieldA: {
merge(existing = [], incoming = []) {
return incoming;
},
},
fieldB: {
merge(existing = [], incoming = []) {
return incoming;
},
},
},
keyFields: [["myField"]], // <-- What is this looking for?
},
},
});
This leads to an invariant violation error:
Uncaught Invariant Violation: Missing field 'myField' while extracting keyFields from {"id":"462a349...... (does not contain myField)
Your code seems fine when it comes to fields map. On the other hand, keyFields in a slightly different question. You could totally skip setting it.
The purpose of keyFields is to uniquely identify your record, so the cache would know how to update. Just like in the relational databases you have a primary key that consists of one or more columns that consider your record unique.
I believe this is well documented in Apollo's documentation, see this:
https://www.apollographql.com/docs/react/caching/cache-configuration/#customizing-cache-ids
I'm using handsontable on an angular app with ngHandsontable. I can see that I need to set search to true in the table settings, which should make a query method available.
Can someone explain how I am able to access that method through my angular controller?
<input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" />
<hot-table settings="tableSettings.settings"
datarows="mappingData"
col-headers="true"
height="700">
<hot-column data="Column1" title="'Column One'"></hot-column>
</hot-table>
Angular
function GlobalMappingController($scope) {
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery
}
};
The issue is access to the root handsOnTable instance created by ngHandsOnTable isn't as intuitive as you might think, but in order to access all the functions handsOnTable has by itself you have to do something like this.
First, declare the variable we'll use as the instance of the table
$scope.handsOnTable;
You can access the root for handsOnTable by setting the afterInit parameter in the settings array
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery,
//insert this
afterInit: function() {
$scope.handsOnTable = this;
}
}
};
You can then set an ng-change on the input to something like this:
function search() {
$scope.handsOnTable.search.query($scope.searchQuery);
$scope.handsOnTable.render();
}
You'll also need to, in the same manner as the afterInit, set afterchange with the same statement. If you've got your own custom version of the function then just put it in after everything else has ran.
Keep in mind you'll have to keep the input box bound to searchQuery and add onChange="search()" but that should work - at least it did for me.
I am using jQrid version 3.8.1 and I have a grid that displays information about cars. The jQgrid should is set up to display one car per row and one of the columns is a multi-select list that displays which types of seats the car is configured with. A car can have multiple seat types.
When the user edits a car row, it makes an ajax query to get all of the seats types available in the system and sticks them in the multi-select list. In addition to populating the list, it needs to also select the options already chosen for that car.
The values inside the Installed Seats column are not simple strings. They have both an ID and a string value. So the ID for "Wire mesh" might be 2883 and the value for "Composite" might be 29991. They are just unique numeric values (basically the primary key from the table they are stored in).
After the multi-select list is populated with all the appropriate Seat values, I need to select the ones that the car currently has installed (in the picture above it's "Steel" and "Wire frame"). I need to do this based on the seat IDs stored for that car. However, I don't know where these value are going to come from. The grid only stores the names for the seats, not the IDs. Hopefully there is a way to make it store both.
The column model looks like this:
colModel: [
{ name: 'Year', index: 'Year', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Make', index: 'Make', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Body', index: 'Body', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Seats', index: 'Seats', editable: true, edittype: "select", editoptions: { multiple: true }, cellattr='is-seat-list="1"' }
]
Notice that the 'Seats' model has a cell attribute called is-seat-list. I'm using this to find the select box in the row inside the 'editRow' function.
The onSelectRow handler looks like this:
onSelectRow: function (index) {
var curValues = $('#cargrid').getRowData(index);
jQuery('#cargrid').jqGrid('editRow', index, true, function(rowId) {
//when the user edits the row, query for all the seat types and fill in the list
jQuery.ajax({
url: '/getalltheseats',
complete: function (allSeats, stat) {
var list = $('#cargrid').find('tr[id="' + rowId + '"] td[is-seat-list="1"] select');
var $list = $(list);
//add the all seat types to the list, checking the ones that this car currently has selected
_.each(allSeats, function(seat) {
var selected = '';
if(curValues['Seats'].indexOf(seat.ID) !== -1) //<-- what do I do here??
selected = 'selected';
$list.append($('<option ' + selected + '></option>').attr('value', seat.ID).text(seat.Name));
});
});
});
});
},
The important line is
if(curValues['Seats'].indexOf(seat.ID) !== -1)
I have the value of the row but it only contains the seat name, not the ID. The data returned from the ajax call contains each seat name and ID but the <option> elements don't contain the ID value so I don't know which ones to select in the list.
So the question is, what's the best way to make jqGrid store both the seat names and IDs so that when I create the list dynamically, I can check the <option>s for the seats that have been chosen for that car.
Note:
For various reasons the standard dataUrl and buildSelect features of jqGrid are not going to work for me, which is why I'm building the list on the fly in this manner.
First of all you need additionally add formatter: "select" and to populate ID values in Seats column during filling of the grid. The formatter: "select" will decode the IDs and the corresponding Name value will be displayed to the user.
If you would use more recent version of jqGrid the you can use beforeProcessing callback created for the purpose. It allows to include all different ID/Name pairs in the server response for filling of the grid. It allows you to fill the information needed for the formatter: "select" directly in the main server response. You don't need to load the information before creating the grid.
If you use retro version of jqGrid (3.8.1) then I hope that you can still use the following trick. You can define userdata part of the server response defined as function. The outer elements of the server response root, page, total, records and userdata will be processed before the processing the main part with all items. It allows you to modify editoptions.value before it will be processed by formatter: "select".
For example the response from the server can looks like
{
"page": 1,
"total": 20,
"records": 400,
"userdata": {
"seats": "29991:Composite;42713:Nappa leather;6421:Steel;2883:Wire mesh"
},
"rows": [
{
"year": 2007,
"model": "Toyota/Camry",
"body": "Sedan",
"seats": "29991,6421"
},
{
"year": 2057,
"model": "BMW/Series 4",
"body": "Sedan",
"seats": "6421,2883"
}
]
}
Inside of jsonReader you can define userdata which set userdata.seats as value of editoptions. You can use setColProp method for example to do this.
In the way you will be able to implement all your requirements.
I am trying to change the default sorting direction. The default order is ascending and then descending. I am trying to reverse it.
The sorting direction should be independent and should apply to all the columns( Number of columns vary with different tables ) The script I have to initiate datatable is generic.
Sorting should only apply on click.
I found few examples but they are column specific https://datatables.net/examples/advanced_init/sort_direction_control.html
Here is my script
jQuery(function($) {
$(".datatable").dataTable({
"paging": false,
"searching": false,
"info": false,
"orderCellsTop": true
});
});
All options and settings has default values defined in the internal DataTable.defaults object. This object is available for altering through $.fn.dataTable.defaults. This is poorly documented on the website, but very well documented in the code. Open a none minified jquery.dataTables.js and search for DataTable.defaults.
To reverse the default ordering for all columns, so it becomes desc, asc :
$.fn.dataTable.defaults.column.asSorting = ['desc', 'asc'];
To set the initial ordering for the first column to desc
$.fn.dataTable.defaults.aaSorting = [[0,'desc']];
Likewise you can simply alter the defaults so you not need to set any generic options in your dataTable() at all :
$.fn.dataTable.defaults.bPaginate = false; //paging: false
$.fn.dataTable.defaults.bFilter = false; //searching: false
$.fn.dataTable.defaults.bInfo = false; //info: false
$.fn.dataTable.defaults.bSortCellsTop = true; //orderCellsTop: true
see demo -> http://jsfiddle.net/f31pncb4/
You can do it while initializing:
jQuery(function ($) {
$(".datatable").dataTable({
"paging": false,
"searching": false,
"info": false,
"orderCellsTop": true,
aoColumnDefs: [
{
orderSequence: ["desc", "asc"],
aTargets: ['_all']
}
]
});
});
Richard's answer above works but is the legacy approach. The syntax for current versions is similar and a bit simpler:
var myTable = $('table').DataTable({
"columnDefs": [
{
"orderSequence" : [ "desc", "asc" ],
"targets" : "_all"
}
]
});
Slightly off topic but note capital "D" in DataTable() which returns an api instance instead of a jquery object. This is important since doing it this way allows you easier access to the api after initialization.
Extending the #Eaten by a Grue's answer, if we want, we can use the same orderSequence API to reverse the sort order using HTML only.
Under the <thead>, we can change the <th> as follows:
<th data-order-sequence='[ "desc", "asc" ]'>Amount</th>
I am creating custom overlays for my connections in jsPlumb.
connectorOverlays: [
["Custom", {
create: function(component) {
return connectionNode();
},
location:0.5,
id:"customOverlay"
}]
]
connectionNode() creates a div with a select list in it. The divs themselves should be connectable, i.e., I want to connect two labels of different connectors.
var overlay_div = $(connection.overlays[0].canvas);
jsPlumb.addEndpoint(overlay_div, { anchor:[ "Perimeter", { shape:"Rectangle"}] }, relationEndpoint);
Enpoint on the connector overlay is defined as such:
var relationEndpoint = {
endpoint:["Dot", {radius:4} ],
anchor: ["BottomRight","TopLeft", "TopRight", "BottomLeft"],
paintStyle:{ fillStyle:"#ff33333", opacity:0.5 },
isSource:true,
connectorStyle:{ strokeStyle:"#ff33333", lineWidth:3 },
connector : "Flowchart",
isTarget:true,
dropOptions : {
tolerance:"touch",
hoverClass:"dropHover",
activeClass:"dragActive"
},
beforeDetach:function(conn) {
return confirm("Detach connection?");
}
};
When I now move any of the original nodes that are connected by the connection with the custom overlay, the endpoint is not moved along with the label but remains static where it was created. Can I somehow trigger its movement programatically or am I missing some configuration option?
I had this problem too. I was able to fix it with
instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [5, 5] });
where ".flowchart-demo .window" is the class of the div.
The example shown is from jplumb page examples... in my project this line stays
instance.draggable(jsPlumb.getSelector(".flowchart-demo .clsExecutando"), { grid: [5, 5] });
I hope this information helps you.