I'm using some KendoUI web widgets such as DropDownList, which create 'div' elements that are being added to the bottom of the Body. is there a way to configure those to be added as children of one specific div, instead of being direct children of 'body'?
Some widgets have an appendTo configuration option, e.g. kendoWindow, but most don't. kendo.ui.Popup (which is used by widgets like kendoDropDownList and kendoComboBox) appears to be using that configuration option, so it might be relatively easy to make some changes to achieve what you're after.
In response to your follow-up question: there is no document for kendo.ui.Popup because it's not intended to be used independently - it's just a reusable component for the framework itself.
If you're concerned about having to clean up the DOM elements created by a widget, you can achieve that by using the widget's destroy method.
Related
Seaside has a convenient message WAComponent>>confirm: that creates a dialog with yes/no buttons, however there is no CSS styling on this component. Is it possible to add styling to this component or do I need to subclass WAYesOrNoDialog in my app to do that?
There are two ways to apply your styles to the WAYesOrNoDialog:
If your calling it from your top level component, then subclassing it is the way, but you'd still need to implement confirm:onAnswer: on your own component to reference you're own class.
If you call it from within another component (that is not top level), you can render the component that's going to perform the confirm:onAnswer: within a <div> in the parent component.
in my xamarin application I have multiple pages that contain the same elements (header and horizontal menu), and every time I have to make a change I have to change the code in every single page, there is a way to insert fixed elements in each page ?
In xamarin, use Xamarin.Forms control templates to achieve what you want.
First create a template, design the style you want and set bindable parameters. Then when you use it, you only need to import the class directly, and you can flexibly bind the values you want to use.
For more information, please refer to the official documentation: Xamarin.Forms control templates.
I'm using the CKEditor's widget functionality to create my own widget with a jquery component there. However when the widget is dragged and dropped it gets destroyed and all the state in the jquery component gets lost.
Can this behavior be avoided? Is it configurable? Why it is required (maybe the CKEditor team can answer this)?
It is true that the widget is destroyed (and re-initialized) during drag and drop, this behavior can't be avoided.
How do you link your jQuery component with the widget object? What does your widget definition look like? (It is the object that you pass in the editor.widgets.add() call). Do you use Widget.setData() / How do you set this jQuery component as widget data?
If it's hard for you to answer these questions, you might just copy paste here the source code of your widget instance (open the browser's developer tools and look for an element with the data-cke-widget-id attribute - do not confuse with source mode view in CKEditor). Paste it with the whole content.
Widgets store their data in the data-cke-widget-data HTML attribute. A blind guess would be that you either do not set the data correctly on the widget or when it is stringified and then parsed back, it doesn't handle the jQuery object properly. Maybe you could initialize your jQuery component using widget.definition.init and keep the data as a plain object (Widget.setData)?
You might also want to look to CKEditor widget documentation for more information.
I'm building a dashboard builder and view interface with Marionette. I have some views from legacy code that are pretty heavyweight(large reports) and the html is thus pre-constructed on the server.
I have a Marionette CollectionView for each row in the dashboard which contains an ItemView for each widget that was dragged onto the row during dashboard building.
When the user moves a widget from one row to another I want to avoid deleting the view and having to reconstruct it (because it would be a lot of unnecessary dom manipulation) but instead want to just detach the element from one(row) CollectionView and add it to another. What's the best practice for accomplishing this with CollectionViews in Marionette?
It seems by default moving a item across CollectionViews would destroy the view/model from one and re-instantiate/re-render it in the other.
The concern I have is that the tablereport in the DOM that would be moving from one collection to another is not original Marionette/Backbone template generated View, it would be just a predefined DOM element we set as the view's el.
The tablereport DOM element has lots of children elements with events associated with it via legacy code not the Backbone view events array nor via Backbone's listenTo calls. So destroying the DOM tablereport element is what we need to avoid to preserve those events, we just want to relocate it in the DOM.
Whats the best way to handle this functionality efficiently in Marionette.
A couple options spring to mind, but the fact that your event-binding code is not easily callable means you'll probably want to use the jQuery detach() method to keep all your events bound when you remove an element.
One option is to cache your view elements as you build them:
- write a view factory which you delegate to in the buildItemView method of your CompositeView.
- have your factory cache the elements for the views it creates against the model.cid of the model that is passed in as the first parameter to the buildItemView method.
- when your factory method is called, retrieve the element from the cache if it exists, call detach() on it, and set it as the ItemView's element.
- override the render method on the view to stop it from rebuilding the html
- move the model from one CollectionView's collection and put it into the other CollectionView's collection, and Marionette will then build your view as described above and insert the element (with events still bound) into the DOM.
Instead of doing the above, you could, assuming you know which ItemView has been dropped:
- remove the ItemView from the first CollectionView's children container (this is a Backbone.Babysitter instance, I believe, and there is documentation for it)
- detach the ItemView's element
- insert the ItemView's element into its new place in the DOM
- insert the ItemView into the second CollectionView's children container
- remove the model from the first CollectionView's collection
- add the model into the second CollectionView's collection silently, which prevents the CollectionView from triggering its normal behaviour of building a new view, rendering it and inserting it.
The first way is probably more elegant as you are still letting Marionette do its thing, but just altering the building, rendering and inserting of the ItemViews. The second way is less complex, but means you have to manually keep everything in sync yourself - essentially doing what Marionette would normally do behind the scenes and stopping it from 'interfering', so to speak.
I am loading a Razor View via AJAX and putting the content into a div on a page.
If I want to send some arbitrary data from the view to our AJAX framework, is there a recommended HTML tag to do this with? A hidden field sounds like the wrong this to use for this. I could use an empty div with custom data- attributes, but again, a div sounds wrong.
My data isn't relevant to any element within this view, more related to the view itself.
Yes - this is simply a question of systematics and aesthetics.
I use data-* attributes, and try to find and attach them to already existing related elements. This convention is also used by asp.net mvc framework itself - when link target needs to be loaded, data-ajax-* is attached to anchors. When you need to set update target of form submit, you attach data-ajax-* to form, so in most cases it is possible to find good candidate for it. If it is not possible in any particular case, I do not see problems using body instead.