How to change url on navigating to pivotItem in fluentui - fluent-ui

I want to change the url of the page when navigating to different pivot items in fluent ui.
This is the code snippet of the pivot component that I am using
<Pivot>{
headerItems.map( (item: IHeaderItem) => (
<PivotItem itemKey = {item.id} headerText = {item.name} itemIcon={item.icon}>
<PivotBody index={item.id} report = {report} test = {test}></PivotBody>
</PivotItem>
))
}
</Pivot>
There is one property 'href' in item of IHeaderItem type. The 'href' only contains the ending path like '/photo' or '/video'.
I want to append that 'href' in the url and show the corresponding component.

Related

React native Dynamic Menu with slider

I want to create a summary page in react native with different items, which will be displayed through slider with card. Im using intro slider library.
I dont want to set the title and content with static text, but everything has to come from server as JSON data and map items to card.
like
content = [{"title": "Title 1", "item1":"value1", "item2":"value2"},{"title": "Title 2", "item1":"value1", "item2":"value2", "item3": "value3"},....]
render()
{ map(contents) =>item( implement card here and return)
}
What is best way to do this?
Need help with deciding json format and rendering it with map. No of items in each page, and it's name wont be be same always.
It should be a generic slider card which can display any title and items of any length and content.
Considering your case, I have developed a solution for you. Please try the following:
{contents.map((item, index) => (
<View key={index}>{item.index}</View>
))}
If this doesn't work then try
{contents.map((item, index) => (
<View key={index}>{item[index]}</View>
))}
This solution work regardless of the property name.

Styling Apache DataGrid in flex 4.15

I would like to know, how I can change the background color of an datagrid item!
I use external CSS and with flex 4.6 I use:
s|ItemRenderer
{
contentBackgroundColor: #FF0000;
}
But I have to upgrade to apache flex 4.15 and it doesn't work anymore... I can't find which component I suppose to style. In the documentation I can't find the list of styles available T_T.
If you have a link or answer thx!
In the documentation of adobe Flex it's said:
An item renderer is associated with a column of the DataGrid control. The item renderer then controls the appearance of each cell in the column. However, each item renderer has access to the data item for an entire row of the DataGrid control. Use the data property of the item renderer to access the data item.
Try to accomplish that by using ItemRenderer for all your columns you can do that in MXML manner or by mixing MXL with Action script code like applying the style for a known column:
<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
var today:Number = (new Date()).time;
var pubDate:Number = Date.parse(data.date);
if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
else setStyle("backgroundColor",0xffffff);
}
]]>
</mx:Script>
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
or in separated action script class by excluding the content of the script tag mentioned to action script class extending your column's type and overriding the set data method like:
public class CheckBoxHeaderRenderer extends CheckBox
{
override public function set data(value:Object):void
{
_data = value as CheckBoxHeaderColumn;
selected = _data.selected;
//type your condition here using the property of your dataField
if(data.property=="value"){
this.styleName="yourClassCSSName"
}
}
and your class CSS will be like:
.yourClassCSSName{
contentBackgroundColor: #FF0000;
}
for more:
Understanding Flex itemRenderers
Creating item renderers and item editors for the Spark DataGrid control

Sitefinity get current dynamiccontent item from code

I'm currently writing a site using Sitefinity CMS. Can someone please explain how to get the current dynamic content item from server side code on page_load?
I have written a user control to display a custom gallery of sliding images. There are multiple content types in my dynamic module. The user control will sit as part of the masterpage template rather than on every page. On each page load I would like to fetch the current dynamiccontent item that is associated with the page and examine whether it has a property with the name 'Gallery'. If so I would then extract the images and render them via the usercontrol.
Thanks,
Brian.
I'm assuming your images are related content. This gets every published content item of your type.
var dynamicModuleManager = DynamicModuleManager.GetManager();
var moduleType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.YOURTYPEHERE");
var dcItems = dynamicModuleManager.GetDataItems(moduleType)
.Where(l => l.Status == ContentLifecycleStatus.Master);
foreach (var dcItem in dcItems)
{
//pass the dynamic content item to a model constructor or populate here, then
// get your image this way:
var image = dcItem.GetRelatedItems<Image>("Images").SingleOrDefault();
if (image != null)
{
ImageUrl = image.MediaUrl;
}
}

How to get listbox column text with xul

I am new with xul,
I want to know how to get listbox column text with xul,
I search about listbox method and property, but I can't find about that
please help!
Thanks a lot!
You can see the reference page listbox - XUL
If you want to get the selected item, there is a property of the listbox called selectedItem that will return it.
Your listitem can be composed with multiple elements.
<listbox id="list">
<listitem class="listitem">
<listcell class="column1" value="value1" width="100"/>
<listcell class="column2" value="value2" width="100"/>
</listitem>
</listbox>
If you give this elements a class, you can access them doing the following:
var list = document.getElementById("list");
var listItem = list.selectedItem;
var column1Value = listItem.getElementsByClassName("column1")[0].getAttribute("value");
var column1Value = listItem.getElementsByClassName("column2")[0].getAttribute("value");

CMenu - active class not rendering

'items'=>array(
array(
'label'=>'About',
'url'=>array('about/index')
),
about/index - we get the class on the menu - active.
about/graphic - we don't get the class on the menu active.
about/print - we don't get the class on the menu active.
Please note that the menu has NO subitems.
Only About.
No mater if the user is on graphic, print or whatever, we wish to have the About highlighted.
How can we accomplish this ?
I've tried to edit that 'url' param a lot. No luck.
'items'=>array(
array(
'label'=>'About',
'url'=>array('about/index'),
'active'=>Yii::app()->controller->id=='about',
),
Added the active param. This worked.
active: boolean, optional, whether this menu item is in active state
(currently selected). If a menu item is active and activeClass is not
empty, its CSS class will be appended with activeClass. If this option
is not set, the menu item will be set active automatically when the
current request is triggered by url. Note that the GET parameters
not specified in the 'url' option will be ignored.
I've set that property. Otherwise it wouldn't work.
However, as you can see on the bold line, they say this should be automatically triggered. It wasn't on this case.
I suppose this was the case due to the fact that Yii is expecting a child element of About in order to apply that class, since there's any, we have to force it, to get the parent instead.
Not sure however.
CMenu is comparing item's route to current route, so by default it will work only for about/index.
I see two ways of forcing it - first is just set 'active' => true in items list:
$isActive = strpos(Yii::app()->controller->route, 'about/') === 0;
// ....
'items'=>array(
array(
'label'=>'About',
'url'=>array('about/index'),
'active' => $isActive
),
Or you can subclass CMenu class and overwrite CMenu::isItemActive($item,$route) method
simple but effective:
$action = Yii::app()->controller->action->id; // this is the action name currently running
'items'=>array(
array(
'label'=>'About',
'url'=>'/about/something',
'active'=>$action == 'something',
),
also...
to activate a menu, regardless of the action, just for a controller:
$controller = Yii::app()->controller->id; // this is the controller name
...
'active'=>$controller == 'something',
Notes:
add the $controller or $action variables, you can use them for more menu items. Your code will be cleaner.
you'll be 100% sure, the menu items will 'stick' active