Semantic UI: how can I destroy table sortable? - jquery-ui-sortable

I've tried this but it doesn't seem to work.
$('#table_id').sortable('destory');

Related

TYPO3 7.6 Backend module table DataTable not working

I've been searching for quite a while but neither solution worked.
I have created a backend module which shall display orders in a table. I achieved creating a table containing the wanted information BUT I need some more functionality and I thought there would be an easy way.
The table should be sortable, filterable and searchable - functions that TYPO3 uses for displaying datasets in the backend already.
I have tried to make use of the DataTables which are already included by the core of TYPO3 and should be easily accessible according to the following links:
https://forum.typo3.org/index.php/t/210780/
https://typo3.com/blog/how-to-use-javascript-in-typo3s-backend/
TYPO3 backend modul DataTable is no function
I added a js-file according to the answer from Philipp Wrann in the first link:
/Resources/Public/JavaScript/OrderingTables.js:
define('TYPO3/CMS/GiPdShop', ['jquery', 'datatables'], function($) {
var OrderingTables = {};
// Initialize dataTables
OrderingTables.initializeDataTables = function() {
$('#orders-table').DataTable();
};
$(document).ready(function() {
// Initialize the view
OrderingTables.initializeDataTables();
});
});
As there are no errors and the file is included if I check in the dev-tools I believe this is not a bad approach. To use the file I added the following to the <f:be.container> in the template:
includeRequireJsModules="{0: 'TYPO3/CMS/GiPdShop/OrderingTables'}"
Yet it doesn't create a DataTable, no added classes to the rows or cells of the table and thus I assume that there is some kind of error, maybe a missing configuration, maybe another option I missed out somehow.
The only other solutions I found so far seem rather complicated and I would love to keep it as simple as possible (I am not a professional in TYPO3 (yet) and the module should already be functional).
Can someone see a mistake I haven't found? Is it even possible to add the wanted functionality in such an easy way?
Any help would be highly appreciated.
It's really a stupid little thing I was missing.
The path 'TYPO3/CMS/GiPdShop' in the definition was missing the module.
So the correct path would be 'TYPO3/CMS/GiPdShop/OrderingTables', the same I have added in the template.
Really stupid but maybe this helps someone someday who gets stuck as well...
#PaulBeck thanks again!

How to make a custom ListView page in SuiteCRM

I need to make a page in SuiteCRM (v7.9 -- based loosely on Sugar 6.5 CE) that has a list of objects (of a custom module), with checkboxes in front of each one. So far, so good: that's a standard ListView.
The catch is that only some records should be in the list (filtering on whether there is an associated row in a related custom module/object).
This page needs to be distinct from the "regular" list for this module, which should indeed list all records.
It seems to me it makes sense to use a custom "action" to access this page view, and I can get my custom action code to fire with the right URL.
But I don't see how to hook in the filtering. At first, it looked like the process_record logic hook might be helpful here, but it just gives the bean for every record to be displayed. Unless there's a flag "display this record" that I'm not seeing, that's not so helpful.
Ideally, of course, I'd like to be able to inject a different WHERE clause in my custom controller action before calling
parent::action_listview();
to display the page, but I'm not seeing doc to indicate how that might work. I would include source code, but so far, the line above is everything (but boilerplate) that's in the controller.php file.
Create a copy of listview in custom folder and then override the listview's listViewProcess() method and insert your query there:
function listViewProcess() // generating listview
{
$this->processSearchForm();
if($this->where==''){
$this->where.="leads.status='Converted'";
}
$this->lv->searchColumns = $this->searchForm->searchColumns;
if(!$this->headers)
return;
$this->lv->setup($this->seed, 'custom/modules/Leads/ListView/ListViewGeneric.tpl', $this->where, $this->params);
echo $this->lv->display();
}
More info: http://wiki-crm-forum.com/forum/viewtopic.php?f=2&t=9420&p=32674&hilit=listViewProcess&sid=21907ecd28734a726f61f7017a7e9a24#p32674
Another tested working example can be found here:
How to hard code the where condition in list view ,basic search,advance search in sugar CE
P.S: I'm not so sure about "v7.9 -- based loosely on Sugar 6.5 CE" I'd say it's 95% identical apart from API stuff
for custom modules in SuiteCRM.
You may change in function create_new_list_query.

Waiting for sap.ui.table.Table rendered after bound model has changed

I have sap.ui.table.Table which rows are bound to an JSONModel.
var oListModel = new sap.ui.model.json.JSONModel();
//oTable created here (sap.ui.table.Table)
oTable.setModel(oListModel);
oTable.bindRows("/");
When the table is rendered, i.e. the DOM is created for this table, i need to reference to the DOM to pass the DOM elements (table rows) to a library which will make them draggable.
My problem is: How do i know when the DOM for the table is created after the model has been changed and the table is rerendered? I didnt find any listener. The view controller's listener onAfterRendering() didn't help me.
The model is filled with data after a XMLHTTPRequest is successful. When i set the model in the success handler of the xht request and try to access the DOM elments directly afterwards they don't exist yet.
Thank you for your help!
You can add an event delegate
var oMyTable = new sap.ui.table.Table();
oMyTable.addEventDelegate({
onAfterRendering: function() {
$table = this.getDomRef() ....
}
});
a better way is to extend the control see Using addDelegate to extend a control to use third party functionality
UPDATE
the example in that blog doesn't work anymore fixed here
I had a similar issue recently where i had to access an element after a smartform (where the element is present) rendered onto the view. I posted my query here as well as my final solution (based on the accepted answer of #Dopedev). I am using XML views - including nested XML views - here however and the onAfterRendering didn't help for me as well.
I guess you could look at this solution - like it's mentioned in the accepted answer, it may not be an optimal solution, but it sure works. In my case there is not much of a performance issue with the binding of the DOMNodeInserted since it is being called in the onAfterRendering of the nested view that consists of only the smartform with an immediate unbinding upon finding.
The condition if (id === "yourtableid") { } should be enough to identify and pass on. Since you have a table and thus several child nodes, unbinding is imperative at this point.
Mutation Observer is the preferred method but i guess you may need to check the browser compatibility table at the end of the page to see if it matches your requirements. There is an example here. I have used Mutation Observer (outside of a SAPUI5/openUI5 environment) earlier and found it very convenient(and performant) to listen to DOM insert events. In fact the sap.ui.dt package consists of MutationObserver.js

Change 'prefer canvas' setting per leaflet map

I'm using Leaflet (v 0.7.7). It expects setting L_PREFER_CANVAS as a script tag, which is global. I wish to create 2 maps on same page, one with L_PREFER_CANVAS flag ON and once with OFF. How can I do that ?
1) I've tried setting window.L_PREFER_CANVAS before the map creation.
2) I've tried creating my layers with extended classes like this
var MyCircle = L.Circle.extend({
statics: {
CANVAS: true,
SVG: false
}
});
then using 'new MyCircle' instead of 'L.circle'.
Neither of the two methods have the desired effect, even though the map is rendered successfully
I'm looking into leaflet code but i'm not very comfortable with its inner workings yet, due to lack of js sorcery know-how i believe
Edit: A thing that partly works is cloning the entire leaflet source under a new object (M.* instead of L.), and keep my desired flag enabled for it. But its clumsy and breaks with plugins which add their functionality to L. classes. Thereby requiring more duplication to fix, which i'm trying to avoid
Would recommend you look into migrating onto Leaflet 1.0, where preferCanvas is now a traditional option inside the map constructor...Among many other significant improvements.
http://leafletjs.com/reference-1.0.0.html#map-prefercanvas

Use Template on Invisible Table for inserting into existing bound sap.m.Table

Excuse the confusing language but hopefully this makes sense: (see code for more clear explanation)
I have a requirement to display a list of "spare parts" in an sap.m.Table but there is the ability if one of these "spare parts" has a related "spare part" (e.g. A heavy duty version, a light version, etc) , that you can click a button on the row and display these related "spare parts" by inserting them immediately below the "spare part" in question.
While I can get the sap.m.Table doing what I want to do, I would like to take advantage of templates and binding to create a temporary sap.m.Table; bind it to the relationship that returns these alternate spare parts; and reuse the template for a row to give me an array of ColumnListItems which I can insert into the Table at the right place.
Unfortunately, doing this, a sap.m.Table has a feature that if it is not displayed, it doesn't actually make the Odata call and leverage the template function.
To explain possibly much clearer, refer to this jsbin:
http://jsbin.com/sihofu/4/edit?html,js,output
Any better ideas on how to generate template output for a binding without using a sap.m.Table; or alternative, getting the sap.m.Table to make the call without placing it on the screen visible (temporarily)?
The specific code to look at is as follows:
var oTable2 = new sap.m.Table();
oTable2.attachUpdateFinished(function() {
console.log("But this one doesn't");
// What I'm trying to do here is insert these entries below Key 1
});
oTable2.bindAggregation("items", {
path: "/ExampleSecondaryValues",
template: oTemplate,
});
Thanks,
Matt
Back from Holidays now and solved this problem with a bit of brute force by simply enhancing/extending the sap.m.table control slightly.
The problem was if the control was invisible, nothing was rendered, and some optimisation within UI5 core means that in the case nothing is rendered, the AfterRender event is not called on the control and this event is what fires the UpdateFinished event.
I won't debate whether that optimisation is appropriate or not, but to fix this I simply extended the table control with a new control which looks like as follows:
sap.m.Table.extend("my.InvisibleTable", {
renderer: function(oRm, oControl) {
oRm.write("<span");
oRm.writeControlData(oControl);
oRm.write("></span>");
}
});
e.g. Simply always rendering something in the render function, causes the AfterRender event to be called; which in turns allows the sap.m.Table to fire the UpdateFinished event which allows me to then safely get the rendered template items to insert in my visible table.
Would love to know a much better way of doing this (possibly using the template control or similar), but this works okay to solve the problem.
Cheers,
Matt