creating cardview dynamically

[zee-me]

how would one go about creating a cardview dynamically from js ?

[bradmartin]

I've never tried to do that @zee-me but it should be possible.

Likely something along the following lines:

var CardView = require('nativescript-cardview').CardView;
var Color = require('color').Color;
var card = new CardView();
console.log(card);
card.height = 300;
card.width = 500;
 card.radius = 8; /// same for iOS and Android
 if (card.android) {
     card.elevation = 10;    
} else if (card.ios) {
    card.shadowOffsetWidth = 10;
    card.shadowColor = new Color('#3489db').ios;
}

[s207152]

@bradmartin How can I import CardView using TypeScript? What I always got is:

Cannot find module "nativescript-cardview".

What I am trying to do is:

import { CardView } from 'nativescript-cardview';

Tried to add the plugin through

npm install nativescript-cardview

and

tns plugin add nativescript-cardview

Is there anything I am missing?

[bradmartin]

Ahhh looks like when I worked on this months ago I never created any definition files for the plugin. That's likely why. You can get around the TS errors because your import line looks correct.

[bradmartin]

TS defs added. Reinstall the package and you should get the intellisense support.

[s207152]

Thank you very much for the update! It works now.

[sudhanshu-15]

How do you add components to the new CardView dynamically? The method card.addChild() doesn't work. Can you help me out with this?

            var stk = page.getViewById('tempStack');
            var card = new cardView();
            card.margin = 10;
            card.radius = 5;
            card.height = 100;
            card.width = 100;
            card.elevation = 40;
            var grid = new gridModule.GridLayout();
            var lab1 = new labelModule.Label();
            lab1.text = message.body;
            grid.addChild(lab1);
            card.addChild(grid);
            stk.addChild(card);

[bradmartin]

I've not tried but CardView extends content-view which is a layout like StackLayout. Hopefully that makes sense and helps a little.

[sudhanshu-15]

It does make sense, and that is what I expected and addChild() should work by analogy of content-view. But when I try to call card.addChild(some element), it throws an error:

TypeError: card.addChild is not a function
File: "/data/data/org.nativescript.webauth/files/app/landingpage.js, line: 39, column: 17
StackTrace: 
    Frame: function:'', file:'/data/data/org.nativescript.webauth/files/app/landingpage.js', line: 39, column: 18
    Frame: function:'org.nativescript.plugins.firebase.FirebasePlugin.setOnNotificationReceivedCallback.org.nativescript.plugins.firebase.FirebasePluginListener.success', file:'/data/data/org.nativescript.webauth/files/app/tns_modules/nativescript-plugin-firebase/firebase.js', line: 252, column: 15
    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.access$200(Runtime.java:25)
    at com.tns.Runtime$3.run(Runtime.java:882)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

[sudhanshu-15]

Update: I was looking at it in the wrong way, you were correct. If I use card.content = some element it works. Thanks a lot for the help! 👍