GridPanel code example

14 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 06 Feb 2015 Link to this post

    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
  2. Alex
    Admin
    Alex avatar
    129 posts

    Posted 09 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 09 Feb 2015 in reply to Alex Link to this post

    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
  4. Alex
    Admin
    Alex avatar
    129 posts

    Posted 10 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 12 Feb 2015 in reply to Alex Link to this post

    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
  6. Alex
    Admin
    Alex avatar
    129 posts

    Posted 13 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 13 Feb 2015 in reply to Alex Link to this post

    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
  8. Alex
    Admin
    Alex avatar
    129 posts

    Posted 19 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 19 Feb 2015 in reply to Alex Link to this post

    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 
  10. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 19 Feb 2015 Link to this post

    Hi Ian,

    Here is an example:

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


    Regards,
    Vlad
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 20 Feb 2015 in reply to Vlad Link to this post

    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
  12. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 20 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 20 Feb 2015 in reply to Valentin.Stoychev Link to this post

    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
  14. Answer
    Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 27 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top