locked
WinJS 2.0 NavBar pagination

    Question

  • Hi, team!

    I have a problem using new navBar WinJS control in WinRT application.
    If I use command, f.e. I have 6 commands in navBar, but use the code:

    navBar.showOnlyCommands('HomeButton', 'AddReportButton');

    there are some problems in pagination:
    1) There are 3 pages for all the buttons including hided navBar buttons ( i want to have 2).

    There are empty pages there. Does anybody know, how to fix it?

    2) There are Right/Left buttons in NavBar to change selected page. They doen't work. I have to scroll, but that's not good to have functionality, which have errors. How can I fix this error or hide Right/Left buttons?

    Thank you!

    PS: Sorry, I can't add images here


    Monday, December 2, 2013 10:41 AM

Answers

  • Anne, thank you for response - a very good ideas and tutorials.
    Unfortunately, it haven't help with my problem.

    I'm already using showCommands method, but after that navBar container have still the same child count as before this method using.

    Here is my problem screenshots (sorry for possible advertisement there - that's the easiest way to demonstrate screens):
    http://gyazo.com/0b664da115637cd8616efb0753d40631
    http://gyazo.com/c2b043d255df24620c34e459c0952306

    As you can see, there are a lot of free space in last navBar pages.
    I'm using these styles:
    .win-command class and

    .navbarFixClass {
        padding: 0px !important;
        width: 200px !important;
        margin-left: 5px !important;
    }

    .win-navbarcontainer-surface {
        height: 100px !important;
    }

    .win-navbarcontainer-viewport {
        padding-left: 15px !important;
    }

    Thank you!
    Friday, December 6, 2013 12:14 PM
  • I think Navbar is a custom layout appbar that doesn't support showCommands() or showOnlyCommands().

    Navbar is supposed to be for always present navigation commands. If you want to show contextual commands, you should use an appbar.

    Thursday, December 12, 2013 8:55 PM

All replies

  • Hi,

    The showOnlyCommands takes an array of command id values and hide all of commands that are not sepcific in the

    array. You can use it like below:

    navBar.showOnlyCommands(["HomeButton","AddReportButton"]);

    For your second question, I'm not quite understand what you mean, can you provide a bit more information? If you mean the length of NavBar is longer than screen which we need left and right button to display the hidden part, you can ref to the sample, in  scenario five you can find the solution:

    http://code.msdn.microsoft.com/HTML-NavBar-control-sample-4472d92a


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    • Edited by Anne Jing Tuesday, December 3, 2013 8:39 AM edit
    Tuesday, December 3, 2013 8:37 AM
  • Anne, thank you for response - a very good ideas and tutorials.
    Unfortunately, it haven't help with my problem.

    I'm already using showCommands method, but after that navBar container have still the same child count as before this method using.

    Here is my problem screenshots (sorry for possible advertisement there - that's the easiest way to demonstrate screens):
    http://gyazo.com/0b664da115637cd8616efb0753d40631
    http://gyazo.com/c2b043d255df24620c34e459c0952306

    As you can see, there are a lot of free space in last navBar pages.
    I'm using these styles:
    .win-command class and

    .navbarFixClass {
        padding: 0px !important;
        width: 200px !important;
        margin-left: 5px !important;
    }

    .win-navbarcontainer-surface {
        height: 100px !important;
    }

    .win-navbarcontainer-viewport {
        padding-left: 15px !important;
    }

    Thank you!
    Friday, December 6, 2013 12:14 PM
  • This error has appeared after adding 'win-command' class to navBar commands (we have to do it, cause showOnlyCommands methods dosn't work without it - that's a previous version bug).

    Are there any available fixes of this problem?

    Thank you!

    Monday, December 9, 2013 1:40 PM
  • I think Navbar is a custom layout appbar that doesn't support showCommands() or showOnlyCommands().

    Navbar is supposed to be for always present navigation commands. If you want to show contextual commands, you should use an appbar.

    Thursday, December 12, 2013 8:55 PM