Mixing radio and checkbox in a Dynatree - dynatree

I´d like to create a tree mixing radio and checkbox .... The first section will use radio (to select just one Base layer in my map) and the others sections will use checkbox (to select any layers to show up)
Is it posible to do that with dynatree? Image attached...

Checkboxes and Radioboxes are simply CSS styled <span> tags, so you can add your own CSS that overrides this based on some custom node classes.
You should then use selectMode: 2, and implement the desired behavior in the onSelect handler.

Related

Clear mounted html in vue.js

I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.

Dojo dijit tree hide expand icon

I've got a dijit Tree which is populated via a store wrapped in Observable, essentially the example here: http://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html#id7 (Not that the example actually runs from the dojo site though: unless that's just my browser).
It's working well and I can expand and collapse items. However, it displays an expand icon even for the last item in a hierarchy - i.e. an item that doesn't have any children. When you try and expand such an item, it seems to realise this and the expand icon then disappears.
Does anyone know of how to supress the expand icons from appearing in the first place?
Thanks!
Implement the mayHaveChildren() method of the model:
Implementing logic here avoids showing +/- expando icon for nodes that
we know don't have children. (For efficiency reasons we may not want
to check if an element actually has children until user clicks the
expando node)
This method inputs one of your items and outputs true if it can be expanded; false otherwise.

Make button text A/B testable - Sitecore MVC

I have an MVC/angularJS page with a button, the button needs to call code to process the current page and proceed to the next step in the application, but they want the button text to be a/b testable with different variations. I'm new to Sitecore so am struggling to know the best way of doing things.
I thought of having a simple text component/template which just has a single line text property, but if I add that to the page template then it doesn't seem a/b testable because when you click on the test option it asks you to select content. Whereas the content was text they entered as part of the page template.
The only way I know of making a/b testable content so that they can click on the page in page editor and choose to select content / add test variation. I wouldn't add the button to the placeholder as it needs to call specific angular code and always be there, but should I be adding a placeholder where the text is? It seems like overkill to have to define a placeholder there, define a rendering, create a partial view, define placeholder settings to limit it to the simple text component, and then hope they don't try adding multiple items to the placeholder.
I would make a separate template (ie with the text field for your button) to represent your form, then either create the two test variation items as children of your page, or maybe place them in a shared components folder outside of your 'home' node.
EDIT
In order to move your form component into a new A/B testable component you would need to create a new Sublayout in Sitecore, then create a new ascx control for the sublayout. In the Page_Load handler of this control, you would use the following code to retrieve the datasource of the sublayout:
//assume you have a button on your usercontrol called btnSubmit
//assume your template has a single-line text field called 'SubmitButtonText'
Guid dataSourceId;
Sitecore.Data.Items.Item dataSource;
if (Guid.TryParse(sublayout.DataSource, out dataSourceId))
{
dataSource = Sitecore.Context.Database.GetItem(new ID(dataSourceId));
btnSubmit.Text = dataSource["SubmitButtonText"];
}
So I created a new template which just had a single line of text as a field, and added a content item in a shared data node.
In my partial view:
#model Digital.Models.SimpleTextItem
<button ....>
<span class="hidden-xs">#Model.SimpleText_Value<br></span>
</button>
In my main page - I was trying to statically bind it so that they could only change content rather than add new controls to the placeholder, but that only worked if I specified the datasource in this page.
Using a rendering, and in the page layout adding the rendering to the placeholder with a specified data source:
#Html.Sitecore().Placeholder("PremiumQuoteApplyNowPlaceHolder")
Not sure if it was the best approach but it achieves what I need it to.
A/B testing could be applied only to controls(XSLT renderings, sublayouts, action controller renderings, view renderings). If you want to make A/B testing only for button then you should create additional control for it as you did.
Technical details for MVC: A/B testing is applied on mvc.customizeRendering pipeline where rendering arguments are processed. This pipeline operates on renderings level. It means that you are not able to create A/B testing for particular field(button) without your own customization.

Does Dojo has Label property for checkBox or its widgets?

I am creating a CheckBox in dojo as shown below-
new CheckBox({
id:"chckBox",
checked: true,
label: "Save for future"
},"divId").startup();
The checkBox has no label when it is displayed. It just has the checkbox checked.
So my question is - Do I need to have 2 separate components to be laid out, one for checkBox and other one for the label ?? Can't I just combine this into 1 widget?
Isn't there something similar to ExtJS where you have the fieldLabel property in dojo as well?
As well, say there is the no other way to create the check box with the label, other than having to input fields, then say if I need to do dynamic show/hide, do I need to apply CSS property on both the widgets separately,right ?
Please let me know if I am wrong.
Thanks !
Yes, you are all right.
There is no "checkbox with label" widget in DOJO, you need to create them separately and style them separately as well.

Render radio as button/image simple_form

I'm using SimpleForm and was able to create a list of radios. Is there a way that I can render them as buttons or images?
I did some search and tried this:
- f.collection_radio_buttons(:category, [['Male', 'icon_male'], ['Female', 'icon_female']], :first, :last) do |category|
= category.label { image_tag("/assets/icons/16x16/#{category.text}.png") + category.radio_button }
However, it still renders the radio icon, see below
Is there a way to render it as just images that's selectable or as buttons similar to Twitter Bootstrap button? http://twitter.github.com/bootstrap/javascript.html#buttons
Also, this requires me to specify the list of images in the view, I need it to be driven off the model, something like category.image_url
I ended up not using simple_form's radio element. I simply resorted to jQuery and a hidden input element.