Consider this example:
http://jsfiddle.net/wc0zLpef/219/
I am using bootstrap-table which is using TableExport
How can i export all data records by one click?
I tried adding:
$('#export').bootstrapTable('refreshOptions',{
exportDataType: 'all'
});
or
exportDataType: 'all',
refreshOptions: { exportDataType: 'all'}
With normal button this works:
http://jsfiddle.net/ggywebtech/apseb49f/2/
But not with custom button.
The first example you tried is attempting to instantiate a bootstrap table object on the element #export. What you want to do is call the bootstrap-table method on the #export element click event. I'm assuming the method syntax is correct.
$('#export').on('click',function(e) {
$('#yourTableElement').bootstrapTable('refreshOptions', {exportDataType: 'all'})
})
Related
Does anyone know how to get datatables to work inside of a modal? I've been following the example at https://docs.abp.io/en/abp/latest/UI/AspNetCore/Modals#modals-with-script-files and bascially did all of my work to load the datatable inside the initModal function but it doesn't seem to work.
I was able to figure this out on my own. I tried to specify my class as an object (no quotes) rather than a string as in their example:
var productInfoModal = new abp.ModalManager({
viewUrl: '/Products/ProductInfoModal',
scriptUrl: '/Pages/Products/ProductInfoModal.js', //Lazy Load URL
modalClass: 'ProductInfo' // << Make sure to specify as a string
});
You may want to check CmsKit.Admin.Web project for view the usage of modal in datatable.
1-) Create your modal view. (.cshtml file):
Volo.CmsKit.Admin.Web/Pages/CmsKit/Blogs/CreateModal.cshtml
2-) Define your abp.modals class. (.js file for your modal):
Volo.CmsKit.Admin.Web/Pages/CmsKit/Blogs/createModal.js
3-) Define your modal by using ModalManager and call the modal wherever its needed:
Define Modal Manager
Open the modal when an event triggered
You can create a row action and open the modal when the action is clicked.
...
rowAction: {
items: [
{
text: l('MyRowAction'),
action: function (data) {
myModal.open();
}
},
]
}
...
Refresh the datatable according to the changes of your modal
I am using react material table to create a table. Inside this I open a modal dialog and I need to create another table inside de dialog.
in my code there is a layout to my table which contains all I need so I just need to use my template to create the table and I did.
What happens : When I run the application my dialog doesn't open and the app crashes out. it doesn't compile my second table.
Sometimes it throws me errors about render and nesting. Once it said something about re-rendering or nesting too much times usetate.
Here is an example of it
When clicking to the button it says: "action.onClick is not a function"
So the first thing you need to check is the declaration or the assignment of that button here:
onClick: { handleClickOpen }
Then click to check the onClick type it says: onClick: (event: any, data: RowData | RowData[]) => void;
So obviously it doesn't accept an object but a function:
You then need to change to this to make it works:
onClick: handleClickOpen
In your second sourcecode it's failed because you do not return anything from basicTable.js
Try to put something in it like:
import React from "react";
export default function BasicTable() {
return <div>123</div>;
}
I have a datatables table (https://datatables.net) initialized like this:
$('#example').DataTable({
data: data,
columns: [{
title: "Database ID",
data: 'database_id',
render: function (data, type, row) {
return '<NavLink to="/shop">'+ data +'</NavLink>';
}
}]
});
The NavLink that i have in the code is supposed to render a database cell as a clickable link because of React-Router (This whole function is inside a React component), but the link is not rendering when i run the code.
What i ultimately want is the ability to click on a database cell that will take me to another component by routing into a link like "/shop/id" but i am stuck in it for a long time. Help!
I was facing the same issue and below solution is working for me.
You can directly add anchor tag with href to the path where you want to route upon on the click. But, it will reload your application.
To avoid reloading of the application, try below solution.
When you're initializing the columns dynamically, you can add below code for the column where you want to have a link.
fnCreatedCell: (nTd, data) => ReactDOM.render(
<a
onClick={() => handletableclick(data, props)}>
{data}
</a>, nTd)
Add handletableclick() function/method in your file to handle click event and programmatically through history push the path where you want to route upon the click
function handletableclick(data, props) {
props.history.push("/pathToRoute=" + data);
}
Also,in above code to access history from props, you will need to enclose your component with withRouter
like below :
export default withRouter(YourComponentName);
I'm using the autocomplete editor of HOT, but needed to have my own template of the option-list. I've been able to accomplish that, by removing the default display and replacing it with my own while doing a lazy load of its content. But I need to perform specific tasks on each of the options being clicked.
The issue is that I cannot find a way to have my <a ng-click='doSomething()'> or <a onclick = 'doSomething()'> tags to find my "doSomething" function.
I've tried the extend prototype of the autocomplete instance, have put my function out there on my controller to no avail. Is there any way I can insert a delegate function inside this editor that could be triggered from inside my custom-made template? (Using angularjs, HOT version 0.34)
Dropdown options cannot interpret HTML instead of Headers.
To perform action when an option is selected you can use Handsontable callback : AfterChange or BeforeChange
Here you can find all HOT callbacks https://docs.handsontable.com/0.34.0/tutorial-using-callbacks.html
This JSFiddle can help you http://jsfiddle.net/fsvakoLa/
beforeChange: function(source, changes){
console.log(source, changes)
},
afterChange: function(source, changes){
console.log(source, changes);
if(!source) return;
if(source[0][1] == 0){//if ocurs on col 0
let newsource = optionsWBS[source[0][3]];
cols[1] = {
type : 'dropdown',
source: newsource,
strict: false
};
hot.updateSettings({columns: cols});
hot.render();
};
}
Thanks, I actually needed actions specific to each area being clicked. What I did to make it work was this: while inserting the items for the list, I created the element and bound it to the function right away: liElement = document.createElement('li') .... liElement.onclick = doSomething(){} .... got it working this way ..
I would like to add a custom menu button to the object tree context menu of Pimcore 4.3.1, for example before the copy button:
I think the best solution would be a custom plugin:
https://www.pimcore.org/docs/latest/Extending_Pimcore/Plugin_Developers_Guide/Plugin_Backend_UI.html
In the 'pimcoreReady' function of the plugin I am able to extend for example the main navigation and adding custom buttons... But I can't find anything about extending the object tree...
I already looked at /pimcore/static/js/pimcore/object/tree.js where the original menu is created, but can'f find anything useful.
The approach using a custom plugin will work. The docs you mentioned, https://www.pimcore.org/docs/latest/Extending_Pimcore/Plugin_Developers_Guide/Plugin_Backend_UI.html, shows a list of available javascript events.
The prepare*TreeContextMenu events are specifically ment to modify the context menu in the tree panels. You can execute a function for this event by simply adding it to you plugin class in the same way you did with the pimcoreReady event, like so:
pimcore.plugin.myplugin = Class.create(pimcore.plugin.admin, {
prepareObjectTreeContextMenu: function (menu, treeClass, object) {
// Modify ext menu
menu.add({
text: "My Button",
iconCls: "pimcore_icon_copy",
handler: function () {
console.log('Clicked menu button');
}
});
}
}