Develop Reference

How to add sort to bootstrap-table card view / custom view?

I am trying to create a sort to be used directly from the card mode (custom mode in my case).
I created the button myself but I can't find a method to call sort on a field when not in table view.
Like the option to filter, I am looking for something like:
$("#bootstrapTable").bootstrapTable("sortBy", {
sortAlgorithm: sorter }
For example here:
If you switch to table view (click the eye), you can sort by name by pressing on the table header.
But then on card/custom view, you can't.
How can I make the button there to sort by name?

I found a way to solve this.
You can use $('#table').bootstrapTable("refreshOptions", {}) to change the sort options and it will take effect.
In the above example you can use:
<button onclick="sorter()">
Sort by name
</button>
<script>
function sorter() {
console.log("here")
$("#table").bootstrapTable("refreshOptions", {
sortName: "name",
sortOrder: "desc",
});
}
</script>
of course, you can modify it to sort on whichever column you want and change the order.
Hope it helps whoever stumbles here on the future

Tabulator context menu won't show

I have a problem with Tabulator.js library. I am usig version 4.8, I would like to use context menu feature, but I am unable to make it work. When I use code from documentation (see bellow) browser default context menu is replaced by nothing (nothing shows up). I was not able to find answer to this. Is here someone with similar experience? I have tried three different browsers,but behavior appears to be same in every one of them.
rowContextMenu: [
{
label:"Hide Column",
action:function(e, column){
column.hide();
}
},
{
separator:true,
},
{
disabled:true,
label:"Move Column",
action:function(e, column){
column.move("col");
}
}
]

Unfortunately the example is in error. The rowContextMenu action function does not provide a Column component. It provides a Row component.
If you want to manipulate a column you will need to setup Column Menus. Start by looking here and scroll down to see the other options - http://tabulator.info/docs/4.8/menu#header-menu.
For Rows look at Row Context Menus - http://tabulator.info/docs/4.8/menu#row-context

Unfourtunately, it was all my mistake, I surely did update tabulator js version but forgot to change CSS file, so menu was working right but was shown as div without styling on the bottom.

How to show original full list of data after doing Search in Jquery DataTables in javascript

I have a Jquery dataTable as below. It works fine except that if I do a Search on the Search field, the users displayed were narrowed down to match the search criteria, but there is no way for me to go back and let the dataTable to show the original full list of users unless I do another search on the Search field. Is there a way to change this behavior so that I can see a full list of users without doing the search again ? Thanks a lot!
var input =
{
"aaData": data,
"aoColumns":
[{
"mDataProp": "userid",
"sWidth": "10%"
},
{
"mDataProp": "fullname",
"sWidth":"15%"
}
]
};
$("#users").dataTable(input);
I have added the following code which worked:
<input type="button" id="btnReset" value="Reset Table"></input>
$('#btnReset').click(function()
{
var oTable = $('#users').DataTable();
oTable.search('').draw();
});

If I'm understanding your requirements correctly, let's give this a shot...
Create a new 'reset' button somewhere on the page, link this functionality to it...
$('#users').search('').draw();
That will mimic what happens when a user manually removes the search term, but now they can do it with the click of a button instead.
You could also look into using state to implement this, if that suits you better: https://www.datatables.net/examples/basic_init/state_save.html

Implementing a hyperlink within a dojo datagrid

This is my first time working with datagrids so please forgive anything that is unclear.
I have json text that is being implemented in a dojo datagrid (dojox.grid.DataGrid).
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xAgent.xsp"});
var layout = [
{cells:[ [
{field:'firstname', name:'First'},
{field:'lastname', name:'Last'},
{field:'policy', name:'Policy'},
{field:'lastaccessed', name:'Last Accessed'}
] ], noscroll:false
}
];
grid = new dojox.grid.DataGrid({
store: jsonStore,
structure: layout,
rowsPerPage: 50,
autoHeight: 50
}, '#{id:gridNode}');
grid.startup();
The grid itself is created perfectly fine and all data is displayed as desired, but I would like for one of the fields (the 'policy' field to be specific) to link towards another page. I need to include the information within the 'policy' field when I redirect as the policy number will be used in the next page.
In other words, I want all of the policy fields within my table to have their own unique external link that will contain the policy number from that respective field. The easiest way I can think of doing that is by changing the layout variable that feeds into the DataGrid's structure parameter, but there might be an easier way. If anyone has any ideas I would be very grateful.
Thanks in advance.

You can use formatter to create links, dojo buttons etc inside the grid.
Formatter is a JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML or even a dijit widget.
So in your case, add a formatter to policy column
{field:'policy', name:'Policy', formatter: createLink},
Then define the function with necessary external link. For example:
function createLink(data){
return (""+data+"");
}
Reference: http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#id3

Extjs 4.02 - Custom component needed

I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks

There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})

I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.