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
Related
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 ..
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'})
})
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');
}
});
}
}
I have form and grid in kendo window modal, I want to refresh the screen everytime user open the modal window, I have used refresh() but its not working...any suggetion will be appreciated....
So far tried code...
main.html
<div kendo-window="viewAttestorkWin" options="attWinOptions" k-modal="true"></div>
main.js
$scope.openAttestorSearch = function(){
$scope.viewAttestorkWin.refresh();
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.open().center();
};
It should work properly with your code right now, yet I suspect setOptions make it didn't. Have you try to call the refresh method after window is open?
$scope.openAttestorSearch = function(){
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.refresh().center().open();
};
I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.
Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?
My current approach is this:
get reference to Tab Panel
call getActiveTab()
call the controller events for the component in active tab
Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)
I'm using ExtJS 4.1.
Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.
In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:
onButtonClick: function (button) {
var panel = button.up('panel[tab]');
if (panel) {
panel.someMethod();
}
}
The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.
The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.
onButtonClick: function (button) {
var panel = button.up('panel[tab]'),
tabPanel = button.up('tabpanel'),
activeTab = tabPanel && tabPanel.getActiveTab();
if (panel && panel === activeTab) {
panel.someMethod();
}
}
Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?
I believe that simple ref inside your controller would work:
this.control('#content button', {
click: this.buttonClicked
}
});