Nativescript-vue newbie here...
I am using nativescript-vue to display a list of items. When the .vue page loads, the grid should just be an empty table. When a button is clicked, the grid is populated with sub-elements of a list I retrieved from a service. I am running into two issues:
There is only one row, where there should be a row per item in the list.
The date will be a date element such as 06-01-2019 11:30:01 but I would prefer to display it as 06-01-2019
In my *.vue:
<RadListView for="item in itemList" layout="grid" #itemTap="onItemTap">
<v-template>
<GridLayout rows="20, 20" class="list-item list-item-grid">
<GridLayout row="1" rows="25, 35" columns="auto, auto, auto, auto">
<Label col="0" :text="item.date" class="list-item-left" textWrap="true"verticalAlignment="middle" horizontalAlignment="left"></Label>
....
</GridLayout>
</GridLayout>
</v-template>
</RadListView>
....
<script>
expot default {
data() {
return {
itemList: []
};
},
methods: {
getItems() {
// really simplified but it will return something like:
// [{"date" :"09-01-2019 11:32:01", "name":" first last"}]
service.getItemArray()
}
},
beforeMount: function() {
this.itemList= this.getItems();
}
</script>
I have put a shortened Playground version here:
You could try a v-if to render the RadListView after the button is clicked, or manual load on demand.
Related
I'm using react-native-render-html library to display data from Django Rest Framework stored in RichTextUploadingField from django-ckeditor. As basic styling is working properly I have a problem with the <ul> tag - text is not centered with circle/square/number as shown in the image. I tried using renderersProps like:
<RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />
But it works for specific text size. If I change the text size in style in Django admin, the element and text aren't centered again. Is there any option on how to fix it or what causes the problem?
You could add a custom CSS class to unordered list items only. Then apply your styles to that CSS class.
// this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
const { children, name } = el;
if (name === 'ul' && children && children.length) {
children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
}
}
// define your styles for your custom class
const classesStyles = {
"ul-li": {
lineHeight: '21px', // for me adjusting lineHeight did the job
}
}
// in your JSX
<RenderHtml
source={source}
contentWidth={width}
tagsStyles={tagsStyles}
... // other props you may have
domVisitors={{onElement}} // first alter your html
classesStyles={classesStyles} // then apply styles
/>
Sources:
classesstyles
onElement
I have slider in my application:
<ion-slides #showSlider *ngIf="product.show_images" class="slideShowWrapper productImages" [options]="mySlideOptions">
<ion-slide *ngFor="let image of product.show_images;">
<img [src]="image.big_url" alt="{{image.title}}"/>
</ion-slide>
</ion-slides>
And in code I need to change slides and count of slides. But after change the list of slides. Slider changes, but first slide not shows, or it can be showed but points of slides is not anought.
How right to change slides list?
My code to change is:
this.slider.getSlider()['removeAllSlides'](); // Delete slides
this.product.changeOffer();
this.product.show_images = this.product.getImages();
Template:
<ion-slides #showSlider *ngIf="product.show_images" class="slideShowWrapper productImages" [options]="mySlideOptions">
<ion-slide *ngFor="let image of product.show_images;">
<img [src]="image.big_url" alt="{{image.title}}"/>
</ion-slide>
</ion-slides>
Code:
export class ProductBlocksProductPage extends AbstractBlock{
mySlideOptions: any
#ViewChild('showSlider') slider: Slides; //Access to slider
#Input() slideOptions = {}; // Slider options
constructor(){
}
/**
* Change the images action
*/
changeOffer()
{
this.product.changeOffer(); //Here is your function to change of our images array
// Update slider
this.slider.getSlider().update(); //Reinit slider
this.slider.getSlider().slideTo(0, 0, true); //Move to first slider
}
}
I have a list in mxml. I need to show a menu when the user longpresses an item in the list. The menu will show some action on the item that has been pressed on.
I also have to make the pressed item the selected item in the list. So I need a reference to the list. I cannot find a normal way to get to the list so I did this:
var list:Object = event.currentTarget.parent.parent.parent.parent.parent
Which of course is hideous. I am looking for a better way to get a reference to the list.
Here is my code for the list:
<s:List id="catList" x="0" y="0" width="100%" height="100%" click="selectItemHandler(event)">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
styleName="labelFontStyle"
messageStyleName="descriptionFontStyle"
labelField="labelField"
messageField="descriptionField"
dataChange="onDataChange(event)"
mouseDown="onMouseDown(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function onMouseDown(event:MouseEvent):void
{
try
{
var tg:Object = event.target;
var selectedItem:Object = event.currentTarget.data;
if (selectedItem != null)
{
// Here I need to set the selectedItem property of
// the owning list.
// I don't know how to get to the list so I did this.
var list:Object = event.currentTarget.parent.parent.parent.parent.parent;
list.selectedItem = selectedItem;
}
} catch (e:Error) {}
}
]]>
</fx:Script>
</s:IconItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
I'm not sure but won't just set the selected property in the itemrenderer's onMouseDown do the trick ?
selected = true;
If not, check if this will get you your list:
var myList:List = owner as List;
Another approach would be to create a custom event that contains your item and fire it from the itemrenderer. Then listen for that event on the list and set the selectedItem property to the item you got in the event
I want to refresh a dojo grid in my web page. I tried .refresh which is given in dojotoolkit.org without success. is there any other convenient way to do refreshing? Thanks in advance.
Maybe this helps. This is the way i refresh my Grid:
if(!registry.byId("GraphGrid")){
var grid = new EnhancedGrid({
id: 'GraphGrid',
store: GraphicStore,
query: { ident: "*" },
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {
headerSelector:true,
width:"40px",
styles:"text-align: center;"
}}
},"GridGraphicInMap");
/*Call startup() to render the grid*/
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get a value out of the item
var value = this.store.getValue(item, "geom");
highlightGeometry(value,true);
// do something with the value.
});
}
else {
registry.byId("GraphGrid").setStore(GraphicStore);
}
When i first call my function the grid is generated. Evrytime i call the function later only the store is refreshed.
Regards, Miriam
I created a HTML Gallery that expands an image every window.
http://mmvirtualtours.com/0002/photos.php
When I run the gallery as a slideshow I would like it to pause when the contained image expands.
I am trying the following code:
hs.Expander.prototype.onAfterExpand = function() {
if (this.contentType == 'html') {
this.slideshow.pause();
As it is it will pause after every transition in the slideshow. What do I need to change the contentType to and or is there a better way to do this?
Thanks!
Remove this:
hs.Expander.prototype.onAfterExpand = function() {
if (this.contentType == 'gallery') {
this.slideshow.pause();
}
};
Add this:
// Stop slideshow when viewing large image
function stopSlideshowAndExpand(element, config) {
var exp = hs.getExpander(element);
if (exp.slideshow) {
exp.slideshow.pause();
}
return hs.expand(element, config);
}
Change the onclick for the large image in the highslide-maincontent div:
<a class='highslide' href='media/01.jpg' onclick="return stopSlideshowAndExpand(this, largeGalleryOptions1 )">
<img src='media/s01.jpg' alt='' / border="0">
</a>