I have a StackContaner which contains multiple ContentPanes. When I try to add content to a nested ContentPane (after it has been created and rendered), it doesn't resize, it always keeps it's initially size. Is there an easy way to get around this? Here is how it is laid out:
StackContainer
-ContentPane
--ContentPane (nested)
-ContentPane
Here is working example example:
http://jsfiddle.net/zzdyM/1/
Click the add button in the sample, I want to make it so the divs automatically resize the height to show the new content, instead of keeping the same height with scrollbars. Clicking the button should add another span element to the innerPane, not replace what is currently there.
Any ideas what I'm doing wrong?
Are you trying to achieve a specific layout or just replace the existing content "Blah Blah Blah" with new content?
If you just wish to replace existing content with new content, the following is the best option:
dijit.byId('innerPane').attr('content','<span>Added Content</span>');
See updated fiddle: http://jsfiddle.net/YdZyZ/1/
Related
I tried to add dropdown-menu-left class but still it displayed outside the control area.
I want to show that dropdownlist under txtbox and button control, and also width as per
above control. How to do that?
Here is a demo link DEMO
I guess you misunderstood dropdown-menu-right for dropdown-menu-left. Replace dropdown-menu-left with dropdown-menu-right. As for the width, you could manually set it to a fixed value (using CSS) or you could use javascript / jquery to resize it dynamically.
Using CSS: https://jsfiddle.net/7w9wkr64/
Using JQuery: https://jsfiddle.net/Lyrzt8tu/
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.
I need to create a list of buttons inside a ContentPane (one under the other) as a "single column vertical grid". I did not found such a layout widget in dijit ref. guide.
What can I use? How can I get a new line when adding (addChild) elements to a content pane?
There's dojox grid container but looks overkill to me.
i know that this is the least elegant way to do it but it is one-of-a-kind: you could create a custom div-domNode containing your buttons just like this:
var btn1=new dijit.form.Button({...});
var btn2=new dijit.form.Button({...});
// custom div-domNode
var buttons = dojo.create('div');
// filling it with the domNodes of your buttons separated by a <br> node
dojo.create(btn1.domNode,null,listOfButtons);
dojo.create('br',null,listOfButtons);
dojo.create(btn2.domNode,null,listOfButtons);
and display it in you ContentPane
myContentPane.set('content', buttons);
A ul or a table would work as well.
Finally let me say that im very ashamed of myself for not knowing any better answer.
Hope its what you asked for.
I have an EnhancedGrid which is bound to a dynamic Store. I am using lazy loading, so as I scroll down, more data will be fetched and bound.
I also have an "add new Item" functionality. This will open a pop-up where the user creates the new Item in a form, and on Save the item is added to the store. with dojo.data.ObjectStore.newItem() and dojo.data.ObjectStore.save().
My problem, after using those two functions, the item is automatically appended to the grid at the bottom, which is kinda of a nuisance. The user will have to scroll down to find it, which would trigger the lazy loading.
After following the code around, I found out that newItem() calls the dojox.grid.DataGrid._addItem(item, index, noUpdate) function.
I managed to overwrite it so when I am adding a new item, the _addItem function will be called with index 0. But that does not work since it was just replacing the first row with the new one instead of prepending it.
Is there any other way to look at this? is it possible to actually do it?
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});