gridview


ionic 3 grid view not working with two col per row


My ionic info :
global packages:
#ionic/cli-utils : 1.0.0
Ionic CLI : 3.0.0
System:
Node : v7.3.0
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.0
ios-sim : 5.0.13
So from databse i will fetch some data and i need to display in grid view with two col per row. But when i do i can see only one row. Hre my
controller.ts that i am fetching data from api :
another(loading:any) {
this.subcatdata = { CatID: this.categoryid };
this.authService.allresources(this.subcatdata).then((result) => {
this.data = result;
console.log(this.data);
if (this.data.status == 1) {
this.Catdata = this.data.SubjectList;
for (let i = 0; i < this.Catdata.length; i++) {
console.log(this.Catdata[i].FileName);
}
}
else if (this.data.status == 0) {
let alert = this.alertCtrl.create({
title: 'Error',
subTitle: 'Please Enter Valid Username & Password',
buttons: ['OK']
});
alert.present();
}
loading.dismiss();
}, (err) => {
loading.dismiss();
});
}
then in my html :
<ion-grid>
<ion-row *ngFor="let data of Catdata; let i = index" (click)="opndetailpage()">
<ion-col col-50 >
<span class="grid-title">{{Catdata[i].FileName}}</span>
</ion-col>
</ion-row>
</ion-grid>
I will get more than 10 or 1 data from my db. I need to show 2 col name in one row. Please help me out how can i achieve that.
Thanks in advance !
update :
1 2
3 4
5 6
7
I need like this : 2 col per row
Ionic 3 comes with 12 column grid system. change col-50 to col-6
<ion-grid>
<ion-row *ngFor="let data of Catdata; let i = index" (click)="opndetailpage()">
<ion-col col-6 >
<span class="grid-title">{{Catdata[i].FileName}}</span>
</ion-col>
</ion-row>
</ion-grid>

Related Links

Yii2: Multiple Model/Controller in Index and Url change
Disable Kartik Gridview responsive on mobile
Yii2 view button in gridview show dropdown
Yii2 pjax gridview ActionColumn issue with a view link
Automatically collapsing a detail when opening another in a shieldui grid hierarchy
filter in Yii gridview
Get items within GridView Windows 8
Blog posts grid view
search/sort 0 to many relations table in gridview yii2
yii2 gridview search field not triggering validation, not displaying error messages
Search date field only with year in yii2
add and editing row manually in gridcontrol devexpress
yii2 GridView many to many junction table display
Xamarin - How to create a shared page that I can include into a GridView in non-shared project?
how to validate data being entered in pop-up from a gridview in devexpress
Set TotalCount in ShieldUI Grid for Paging

Categories

HOME
adal
jpa
fpga
serialization
mstest
jsf-2.2
switch-statement
crystal-lang
pega
keytool
linear-algebra
azure-iot-hub
glyphicons
esoteric-languages
production
php-mysqlidb
fat
stackexchange
oculus
android-things
tizen-tv
realm-mobile-platform
google-earth
autodesk-designautomation
git-squash
android-gridview
watchman
release
filesystemwatcher
xv6
wmp
file-sharing
facebook-social-plugins
opencmis
term
dotnet-httpclient
tinymce-3
arq
arules
mach-o
objectscript
gets
visual-studio-2008-sp1
slackware
cudd
seek
mongodb-php
x-tag
dup
observablecollection
deep
riot
halcon
aspen
phpgrid
state-restoration
flock
cgi-bin
evolus-pencil
typeconverter
actionfilterattribute
public-html
administration
cbind
mdichild
mobility
lnk
malformedurlexception
dot42
authlogic
git-repo
code-duplication
video-codecs
mantle
monotouch.dialog
google-maps-mobile
flex-mobile
lr
rmdir
cuteeditor
facebook-iframe
feasibility
google-wave
java1.4

Resources

Encrypt Message