GridPanel code example

[Ian]

Hi,
I've trying to create a GridPanel using the code-behind method (ie. no UI XML). I've followed the guidance on the GridPanel How to page but I just keep getting native errors (I'm using App Builder) so I've really got no idea what's wrong.

Have you got a very simple code example that programmatically creates a GridPanel with one row, one column and where the [only] cell is populated with a label.

Thanks,
Ian

[Alex]

Hi Ian,

Here is how to define a Page with a GridPanel and a single Label inside it:

page.js:

var pages = require("ui/page");
var gridModule = require("ui/panels/grid-panel");
var labelModule = require("ui/label");

function createPage() {
    var grid = new gridModule.GridPanel();

    var label = new labelModule.Label();
    label.text = "some text";
    grid.addChild(label);

    var page = new pages.Page();
    page.content = grid;
    return page;
}
exports.createPage = createPage;

You can refer to this article for more detail on how to create a page using only code. You can see it is more verbose approach compared to XML declaration.

I hope that was helpful.

Regards,
Alex
Telerik

 

 

[Ian]

Hi Alex,
Thanks for the example code. Sorry, I should have explained that I was getting native errors using the setColumn, setRow, GridLength, ColumnDefinition, RowDefinition methods.

Would you be able to expand your code to show how to create a grid with one column and one row but using the above methods to define the column and row properties.

Many thanks, Ian

[Alex]

Hi,
I have extended the example - two columns and two labels:

var pages = require("ui/page");
var gridModule = require("ui/panels/grid-panel");
var labelModule = require("ui/label");

function createPage() {
    var grid = new gridModule.GridPanel();

    // Create column with fixed width - 150 pixels
    var firstColumnDefinition = new gridModule.ColumnDefinition();
    firstColumnDefinition.width =  new gridModule.GridLength(150, gridModule.GridUnitType.pixel);;
    grid.addColumnDefinition(firstColumnDefinition);

    // Create column with "*" type - it will take all the ramining space
    var secondColumnDefinition = new gridModule.ColumnDefinition();
    secondColumnDefinition.width =  new gridModule.GridLength(1, gridModule.GridUnitType.star);;
    grid.addColumnDefinition(secondColumnDefinition);

    // Label in first column
    var label = new labelModule.Label();
    label.text = "column 1";
    grid.addChild(label);

    // Label in second column
    var label2 = new labelModule.Label();
    label2.text = "column 2";
    gridModule.GridPanel.setColumn(label2, 1);
    grid.addChild(label2);

    var page = new pages.Page();
    page.content = grid;
    return page;
}
exports.createPage = createPage;

Regards,
Alex
Telerik

 

 

[Ian]

Hi Alex,
Thanks for extending your code sample - I can see where I was going wrong now.

Out of interest, is it possible to bind the columns in each row of a GridPanel directly to items in a JavaScript array? Or do you always have to include the GridPanel inside a ListView and then use a ListView item template?

Best regards, Ian

[Alex]

Hello,
I'm glad that the code helped. Actually, we are currently re-factoring the code of the GridPanel - hopefully after that the API will be easier to use.

On your other question - indeed, using ListView is the suggested approach when you what to have dynamic number of rows - each bound to a separate item in a data array. There no way to change the number of the rows or columns in the Grid using a binding to an items array, so it is not suited for this purpose.

Regards,
Alex
Telerik

 

 

[Ian]

Hi Alex,
Thanks for the clarification. The reason I was asking is that I can foresee situations where the current default styling for a ListView item isn't always what you need. I think I read a forum post where it said you were looking to allow the styling for a ListView item to be changed programmatically (via CSS).

In particular, would this allow you to:
1. Remove or change the appearance of the thin, grey line that separates each ListView item?

2. Allow the grey highlighting that is applied to a ListView item when it is touched to be removed? In situations where you are simply displaying a grid of items which are NOT links, you don't really want the grid item to change colour when it is touched - that incorrectly suggests to the user that it is clickable when it's not. I'm guessing that being able to override the default value for a ListView item's :pressed pseudo-property would solve this?

Best regards, Ian

[Alex]

Hi Ian,
Thanks for the suggestions. These UI customization are something you should be able to do with the ListView so we will keep them in mind when extending the API of this view. 
For now it is not possible to do them in the common API. The good news is that you have access the underlying UITableView(for iOS) or android.widget.ListView(for Android) and you can customize them using platform specific code.

For example here is how to remove the separator lines in Android(using the ListView.setDivider method):

if (listView.android) {
    listView.android.setDivider(null);
}

Hope that helps.

Regards,
Alex
Telerik

 

 

[Ian]

Hi Alex,
Many thanks for the advice on how to change the ListView divider using Android-specific code. Any chance you could show me how to do this for iOS as well?

Thanks, Ian 

[Vlad]

Hi Ian,

Here is an example:

if (listView.ios) {
    listView.ios.separatorStyle = UITableViewCellSeparatorStyle.UITableViewCellSeparatorStyleNone;
}

Regards,
Vlad
Telerik

 

 

[Ian]

Hi Vlad,
Thanks. I got your suggestion to work by adding a loaded event handler in the ListView XML file...

<ListView loaded="listViewLoaded">

And then using your code in the event handler...

exports.listViewLoaded = function(args) {
    var listView = args.object;    
    if (listView.ios) {
        listView.ios.separatorStyle = UITableViewCellSeparatorStyle.UITableViewCellSeparatorStyleNone;
    }
}

This seems to work fine but is it the best/correct way to do it?

Regards, Ian

[Valentin.Stoychev]

Hi Ian,

do you have a screenshot of the design you are trying to achieve. It will be helpful for us to see if we can do a better support for it in the framework.

thanks!

Regards,
Valentin.Stoychev
Telerik

 

 

[Ian]

Hi Valio,
I’ve attached a screenshot from an app developed using KendoUI Mobile. It provides passengers with details of train services in the UK. I thought it would be a good candidate to try re-developing using NativeScript.

The current app’s UI does make extensive use of CSS. Every image, for example, is pure CSS which eliminates the need to create different resolution versions of .png files for different handsets. Using web fonts (such as Font Awesome) also helps in this respect.

A lot of my recent forum questions have been related to my attempts to replicate the app’s UI using NS. I think I should be able to get quite close with some of the features you’ll be introducing in the beta version (eg. CSS border and rounded edges properties) although I know that I will have to use some image files. 

Best regards, Ian

[Vlad]

Hello Ian,

Sorry for the late reply however we were busy with the beta release.

In my opinion you will be able to achieve your design using images and binding expressions for backgroundColor and visibility property. Here are some examples:

...
... style.backgroundColor="{{ yourBooleanProperty or condition ? '#ffffff' : '#fffbf0' }}" ...
...

...
... style.visibility="{{ yourBooleanProperty or condition ? 'visible' : 'collapsed' }}" ...
...

In this way you will be able to hide/show different parts of the ListView item and provide different colors for depending on your logic. 


Regards,
Vlad
Telerik