HandsOnTable editor custom function - angularjs

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 ..

Related

Data Tables inside of a Modal

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

Pimcore - How to add custom button to object tree menu

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');
}
});
}
}

Kendo tooltip content is not updated when angular model is changed

I have defined kendo tooltip in following way:
<i class="fa fa-info-circle ico-tooltip" kendo-tooltip k-content="model.Description"></i>
Initially the content is ok, but when model.Description is changed and the site is not reloaded the k-content shows the old value.
After reload site by F5 there is new value, but this is not what I want to achieve.
It is possible to somehow refresh this tooltip or workaround this issue?
I had a similar issue and I debugged through Kendo's code and following solution works, in my case I wanted to show only upto 22 characters of text from my model and show full text in the tooltip, here is example code
This sample below is using Angular's 1.5 component
<div kendo-tooltip="$ctrl.selectedItemTooltip" k-content="$ctrl.selectedItemText">{{$ctrl.selectedItemText | limitTo:22}}</div>
and in JS
function fetchFromServer(){
$http.get('/myService').then(function(response){
ctrl.selectedItemText = response.data.model.text;
ctrl.selectedItemTooltip.options.content = ctrl.selectedItemText
ctrl.selectedItemTooltip.refresh();
});
}
in the tooltip options object (when you initialize the tooltip) you set function for the hide event (check documentation ) and in this function you could call refresh function
`
var tooltip = $("#container").kendoTooltip({
hide: function() {
tooltip.refresh();
}
})
`
i think this will do the trick

Backbone.Marionette - show method not rendering properly.. somethings goes wrong

In my app, I am getting the show method issue. something is wrongly going on with my app. But i couldn't able to find that.
in case if i do like this my view is properly rendering ( but this is wrong approach ):
regions:{
header:'header',
content:'section',
footer:'footer'
},
initialize:function(){
console.log('initialized by layout')
},
renderRegions:function(options){
this.formData = _.defaults(options || {}, requireViews);
if(this.formData.headerView){ //this is true.
this.headerView();
this.renderHeaderView();
}
},
headerView:function(){
this.appHeaderView = new AppHeaderView({model:this.model});
return this.appHeaderView;
},
renderHeaderView:function(){
$(this.header.el).html(this.appHeaderView.render().el) //working fine
//but this is not workig: this.header.show(this.appHeaderView)..why not working?
}
why i use the "this.header.show" - nothing is appending to header.
Any one highlight me what is wrong i do here?
I have simplified my total process, and added in Jsfiddle here is the link:
Live Demo Here
You have a few issues in your code:
A view's model needs to be instantiated, not just the model class.
There is absolutely no reason for you to overwrite the ItemView's render method with what you had.
Your order of operations is wrong. show can only be called after the Layout is in the DOM already.
Here's the main thing that fixes your issue:
var Controller = Backbone.Marionette.Controller.extend({
initialize:function(){
this.layout = new Layout;
$('#wrapper').html(this.layout.render().el);
this.layout.renderRegions();
}
});
Updated FIDDLE
Another option (and something I find myself doing often) is to render the regions using the onShow method of the layout.

Unable to render a Ext.form.TextField into the output of an XTemplate

I want to render some Ext components into the output of an XTemplate. We want to have the flexibility of using an XTemplate to render the HTML but retain the styling, behaviour, and handlers of using Ext components rather than plain old HTML elements.
I am currently successfully doing this with an Ext.Button. In the template I am writing a placeholder div like so:
<div id="paceholder-1"></div>
After I have called apply() on the template I then create a new Ext component and render it in like so:
this._replacePlaceholders.defer(1, this, [html, 'placeholder-1', collection]);
The _replacePlaceholders function looks like this:
_replacePlaceholders: function(html, id, collection) {
var emailField = new Ext.form.TextField({
emptyText: 'Email address',
hideLabel: true
});
var downloadButton = new Ext.Button({
text: 'Download as...',
icon: 'images/down.png',
scope: this,
menu: this._createDownloadOptionsMenu(collection) // Create Menu for this Button (works fine)
});
var form = new Ext.form.FormPanel({
items: [emailField, downloadButton]
});
downloadButton.render(html, id);
}
This works and renders the button into the html correctly. The button menu behaves as expected.
But if I change the last line of replacePlaceholders to emailField.render(html, id); or form.render(html, id); I get a javascript error.
TypeError: ct is null
ct.dom.insertBefore(this.el.dom, position);
ext-all-debug.js (line 10978)
I'm a bit confused because from what I can tell from the docs the render() method called is going to be the same one (from Ext.Component). But I've had a bit of a play around and can't seem to track down what is happening here.
So is there any good reason why these components behave differently from Ext.Button? and is it possible to render an Ext.form.TextField or an Ext.form.FormPanel or anything that will let me use an Ext text field in mt XTemplate html?
NB. I am using ExtJS 3.3.1 and don't have the opportunity to upgrade the version. I believe ExtJS 4 has functionality which would make doing what I doing much easier.
Thanks!
Solution is quite simple - use form.render(id) instead of form.render(html, id).
See [api][1] if you have doubts.
The reason why button is rendering properly is that it has weird onRender implementation, different from Component.
onRender : function(ct, position){
[...]
if(position){
btn = this.template.insertBefore(position, targs, true);
}else{
btn = this.template.append(ct, targs, true);
}
[...]
}
As you can see in code above, if you provide position (which is basically second argument provided to render) it doen't use ct (which is first argument passed to render).
In normal component onRender method looks like this:
onRender : function(ct, position){
[...]
if(this.el){
this.el = Ext.get(this.el);
if(this.allowDomMove !== false){
ct.dom.insertBefore(this.el.dom, position);
if (div) {
Ext.removeNode(div);
div = null;
}
}
}
}
In code above, you can see, that ct is called always, despite the position is not null.
The bottom line is that rendering of button works by accident.

Resources